共计 3394 个字符，预计需要花费 9 分钟才能阅读完成。
今天继续由 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…
关于 SAP UI5 和 Vue 数据双向绑定的实现区别，可以参考 Jerry 这篇文章：
https://blogs.sap.com/2017/06…
相对而言微信小程序的数据绑定功能要稍弱一些。首先不提供排序和筛选功能。另外反馈也不够积极：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…
(6) Jerry 日常工作中使用 Chrome 开发者工具积累的一些技巧：
https://blogs.sap.com/2016/03…
(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 的原创文章，请关注公众号 ” 汪子熙 ”: