SAPUI5和微信小程序对比之我见

今天继续由SAP成都研究院著名的菜园子小哥Wang Cong，给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的。

关于Wang Cong种菜的手艺，大家请移步到他以前的文章 SAP成都研究院非典型程序猿，菜园子小哥：当我用UI5诊断工具时我用些什么 去观摩，这里不再赘述。

下面是他的正文。

近几年微信小程序发展之势如火如荼，越来越多的用户放弃原生App，转而投入小程序的怀抱，大有"一个微信行天下"的趋势。

面对如此巨大的流量机遇，百度、阿里等公司也纷纷在自家的核心产品中推出小程序功能，欲与腾讯的微信在这场入口大战中一较高下。至少在今天看来，微信小程序的生态圈依然是其中最为繁荣的。

同为"前端框架"，SAP UI5与微信小程序有着诸多异同点。这里我们摘取其中本人觉得比较有特点的方面进行对比，看看二者相似的表象下隐含着哪些设计理念上的区别。

本文仅代表作者个人作为一个前端开发人员的个人观点。

UI5是SAP开发的一套开源的前端框架，而微信小程序则是局限在微信内部，表现形式类似于普通App。

虽然两者的核心(或者说大部分功能)都是与用户进行交互，但从架构的角度看，存在很多本质上的不同，我们可以从接口的角度窥见一二。

入口

UI5不依托任何平台，通过UI5实现的页面可以从多种入口进行访问，基本上只要支持浏览器功能的平台，都可以访问UI5页面。而微信则是微信小程序的唯一入口。

后端

UI5是一个纯粹的前端框架，对于后端没有做任何的限制，同时也没有任何的支持。微信小程序不但允许你自由地选择后端，而且提供了一些基础的后端支持，在很多情况下开发者甚至无需搭建自己的服务器，就能满足需求。这些支持有：

(1) 数据库：微信小程序提供远端的类似MongoDB的JSON数据库支持，用户不需要购买数据库，也不需要任何复杂的前期配置，就能在小程序中直接对JSON数据库进行增删查改等操作。

(2) 存储：类似于上面提到的JSON数据库，用户可以在微信小程序中直接利用免费且免配置的远端存储空间来存储文件。

(3) 云函数：除了数据库和存储之外，微信小程序还提供了后端逻辑的支持。云函数可以理解成一个功能有限的后端服务器，也可以理解成一个运行在云端的Javascript方法。优点是方便，一键部署而且免费。缺点是功能有限，无法实现复杂的后端功能。

以上功能全部免费免配置，如果发现免费的配额不够，可以申请提升配额或考虑自己搭建服务器。

访问限制

作为开放的框架，UI5对于外部访问没有做任何限制。而微信小程序则有着严格的审核机制，首先要访问的链接必须是https的安全链接，其次地址必须提交给微信进行审核，审核过后还需维护在小程序后台的访问列表当中。

如果上述步骤没有做好，就连腾讯自己的官网都无法访问。其实这样做的原因也很容易理解：用户通过微信小程序访问的所有链接，最初的入口都是微信本身，这也是微信为了自身生态安全而做的必要控制。

但这项限制在本文发稿时为止还不是特别完善。因为云函数尚未对访问做限制，开发者可以使用云函数作为路由，访问未经审核的链接。

从上面和下面两张图中我们可以看出UI5应用和微信小程序在接口方面的区别，其中虚线框内分别为UI5和微信小程序框架内所提供的功能范围。

技术细节

一个熟悉SAP UI5的前端开发人员，上手微信小程序应该没有什么难度。两者同为前端框架在设计上自然有很多相似的地方。例如：

(1) 在微信小程序中的app.js极其类似于UI5中的component.js，都代表整个应用的一个全局实例。某些作用范围为全局的方法或数据都可以存于其中。

(2) 两者在数据绑定方面,都支持灵活的表达式绑定，将更多的本应出现在controller层的逻辑向前推放到view层当中，简化逻辑层。

(3) 两者都支持列表渲染，例如UI5中的ListBase中的items属性，而微信小程序中则是通过wx:for属性实现同样的功能。

(4) 两者都支持自定义控件/模板，UI5有component和custom control，微信小程序有component和template。

但两者也有很多技术上的区别，例如：

(1) 前文提到的列表渲染，UI5仅支持对列表类控件的子控件进行列表渲染。而微信小程序则显得更加灵活一些，任何一个控件都可以通过wx:for属性进行重复渲染。例如上面例子中被重复渲染的就是image元素。

(2) 除了列表渲染，微信小程序更支持wx:if的条件渲染。即if条件检测的结果为true时渲染，为false时则忽略。UI5中实现类似功能则更多是通过控制visible属性来进行。

(3) Routing的实现。两者都是使用栈的方式记录跳转的历史，但是与UI5的"宽容"不同，微信小程序最多仅支持5层跳转。

如用户需要继续向下访问，则必须通过其他workaround实现，例如通过redirectTo将栈顶的旧页面弹出栈，换成新页面。

(4) 数据绑定方面。

UI5的数据绑定功能极其强大，支持各种类型的数据模型的排序和筛选，并且提供双向绑定和单向绑定多种绑定方式。另外数据在view层和controller层的反馈也更加积极。

关于SAP UI5和Angular数据绑定的比较，可以参考Jerry这篇文章：

https://blogs.sap.com/2016/06/30/compare-data-binding-mechanism-sapui5-and-angular/

关于SAP UI5和Vue数据双向绑定的实现区别，可以参考Jerry这篇文章：

https://blogs.sap.com/2017/06/14/two-way-data-binding-ui5-vs-vue/

相对而言微信小程序的数据绑定功能要稍弱一些。首先不提供排序和筛选功能。另外反馈也不够积极：view层改动数据模型需要借助触发事件来调用controller层中的方法进行手动赋值；controller层在更改模型时也必须通过setData方法，才能让改动在view层中生效。

(5) 微信小程序的底层是"巨人"微信, 因此可以借助微信方便地调用很多硬件以及软件API，例如：NFC，WIFI，蓝牙，微信运动，生物认证，二维码，登陆以及支付功能等。

(6) 纵观两者的控件库，我们可以发现UI5可谓大而全，就连一个表格都要提供responsive table，grid table，smart table等, 目的就是为了支持尺寸各异的不同设备以及各种业务场景。而微信小程序则极其专注在移动端的常用控件，轻量，简易且统一。

理念

综合以上的比较，我们可以大致发现UI5和微信小程序自面世起便肩负着不同的使命。

UI5是SAP为其自研的企业管理软件前端页面所设计的前端框架，以此来实现SAP推荐的Fiori风格的前端应用。它的出现体现了SAP对于确保未来产品拥有统一风格，友好界面和良好用户体验的决心。

而微信小程序虽然小，却足以彰显微信扩张的雄心：通过丰富的前后端支持以及简易的上手体验，实现生态圈的急速扩充。而入口和外部访问的限制则是快速扩张的同时，仍然恪守的那份理智。轻量，小巧，快速，简易，移动，一站式。微信想要对你说的是，你的生活，被我承包了。

关于SAP UI5和微信小程序，SAP成都研究院的开发人员们做过很多研究，如果您想进行更多阅读，可以参考下面的链接：

(1) 我的同事，SAP成都研究院大卫哥Wu David的文章：SAP C4C中国本地化之微信小程序集成

(2) 以前Jerry写的SAP UI5框架代码自学教程

(3) Jerry在SAP社区上发表过的59篇SAP UI5相关的文章合集

(4) Jerry和您聊聊Chrome开发者工具：关于Chrome开发者工具一些搞笑的故事

(5) Jerry通过自己调试的方式解决过的UI5的问题合集：

https://blogs.sap.com/2016/04/30/my-ui5-debugging-tips-and-experience-collection-how-to-resolve-ui5-issues-through-debugging-by-yourself/

(6) Jerry日常工作中使用Chrome开发者工具积累的一些技巧：

https://blogs.sap.com/2016/03/15/chrome-development-tool-tips-used-in-my-daily-work/

(7) Jerry的碎碎念：SAPUI5, Angular, React和Vue

(8) Yang Joey的文章：SAP Cloud for Customer 使用SAP UI5的独特之处

(9) 我自己的文章：当我用UI5诊断工具时我用些什么

(10) Jerry的文章：在Kubernetes上运行SAP UI5应用

(11) Jerry的文章：SAP Fiori + Vue = ？

要获取更多Jerry的原创文章，请关注公众号"汪子熙":