UI5与微信小程序

前段时间陪老婆玩一个养成类的手游，叫《养猪场MIX》。大致的游戏思路就是不停的进货小猪仔，养大，然后期望通过配种培育出稀有的猪种，收集图鉴。不少大佬总结出一整份的配种攻略，大体都是些A+B=C,C+D=E之类的。资料虽然很全，但是查阅起来极其不便。作为程序员的我，怎么能不用程序解决这个问题。于是兴致冲冲的用熟悉的UI5给老婆做了一个查询配种的网页。

但我这人有个怪癖，就是非常讨厌在手机浏览器上打开网页。手机上最舒服的使用方式难道不是APP嘛！？可写个IOS的APP还要先付费成为开发者，于是我想到前段时间大火的微信小程序。摸索着写下来，发现微信小程序这东西还真是有点意思，这里就将其与我最常用的UI5进行多方面的对比，并谈一谈我个人的浅见。

框架

有人会觉得，为什么拿UI5跟微信小程序进行对比？他们之间风马牛不相及嘛。确实，两者从框架上就有着一些差异。但两者的核心（或者说大部分功能）都是与用户进行交互，自然也会有很多相通的地方。既然提到“框架”，我们就从“框架”说起。

众所周知，UI5是SAP开发的一套前端框架。而微信小程序有的人觉得恰如其名就是一种APP，有的人又觉得它也只是一种局限在微信内部的前端框架。我们首先来看看他们本质上的一些区别：

1. UI5不依托任何平台，通过UI5实现的页面可以通过多种入口进行访问，基本上只要支持浏览器功能的平台，都可以访问UI5页面。而微信则是微信小程序的唯一入口。
2. UI5是一个纯粹的前端框架，没有任何后端支持。而微信小程序为方便开发者而提供不少后端基础功能的支持：
   1. 数据库：微信小程序提供远端的类似MongoDB的JSON数据库支持，用户不需要购买数据库，也不需要任何前期复杂配置，就能在小程序种直接对JSON数据库进行操作。
   2. 存储：类似于JSON数据库，用户可以在微信小程序中直接利用免费免配置的远端存储空间来存储文件。
   3. 云函数：可以理解成一个功能有限的后端服务器，也可以理解成一个运行在云端的JS方法。其实本质上非常类似于用Node.js开发的介于前端和后端之间的中间层。优点是方便，一键部署而且免费。缺点是功能有限，无法实现复杂的后端功能。
   4. 以上功能全部免费，虽说有配额，但是对于微型开发者而言肯定够用了。如果不是微型开发者的话。。。那你应该是有自己的服务器的吧。。。
3. 作为开放的框架，UI5对于外部访问没有任何限制。而微信小程序则对于外部链接进行了严格的限制，首先你要访问的必须是https的安全链接，而且必须是经微信审核的地址，而且你还要将其维护在你的小程序访问列表当中。以上哪个没有做到的话，就连腾讯自己的官网你都访问不了。如果以上条件不满足怎么办？这里有个小workaround，就是云函数可以访问啊。。。你可以让小程序访问云函数，然后云函数替你访问外部链接。。。

技术细节

作为熟悉UI5的程序员，我上手微信小程序几乎没有什么难度。原因是在很多技术细节上两者有很多相似的地方，例如：

1. 在微信小程序中的App.js极其类似于UI5中的component.js，都是整个app的一个全局应用实例。部分作用范围为全局的方法或数据都可以存于其中。
2. 两者在数据绑定方面，都支持灵活的表达式绑定，将更多的本应出现在controller中的逻辑向前推放到view层当中，简化逻辑层。
3. 两者都支持列表渲染，例如UI5中的ListBase中的items属性，而微信小程序中则是通过wx:for属性实现列表渲染。
4. 两者都支持自定义控件/模板，UI5有component和custom control，微信小程序有component和template。

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

1. 上面提到的列表渲染方面，UI5仅支持对列表类控件的子控件进行列表渲染。而微信小程序则显得比UI5更加灵活，任何一个控件都可以通过wx:for属性进行重复渲染。例如上面例子中被重复渲染的就是image元素。
2. 除了列表渲染，微信小程序更支持wx:if的条件渲染。即，true的时候渲染，而false的时候则忽略。UI5中实现类似功能则更多是通过控制visible属性。
3. Routing的实现。两者都是使用栈的方式记录跳转的历史，但是与UI5的“宽容”不同，微信小程序最多仅支持5层跳转。如用户需要继续向下访问，则必须通过其他workaround实现，例如通过redirectTo将栈顶的旧页面出栈，换成新页面。
4. Data Binding方面：
   1. UI5的数据绑定功能极其强大，支持数据model的排序和筛选。并且提供双向绑定和单向绑定多种绑定方式。另外数据在view层和controller层的反馈也更加积极。
   2. 而相比之下微信小程序的数据绑定则要弱一些。首先不提供排序和筛选功能。另外反馈也不够积极：view层改动数据model需要借助触发事件来调用controller层中的方法进行手动赋值，而controller层在更改model时也必须通过setData才能让改动在view层中生效。
5. 不同于“单打独斗”的UI5，微信小程序的底层是“巨人”微信。也因此可以借助微信方便的使用很多硬件以及软件API，例如：nfc，wifi，蓝牙，微信运动，生物认证，二维码，登陆功能以及支付功能等。
6. 纵观两者的“控件库”，我们可以发现UI5可谓大而全，就连一个表格都要提供responsive table，grid table，smart table等。目的就是为了支持各种尺寸的各种设备以及各种business场景。而微信小程序则极其专注与移动端常用控件，轻量，简易且统一。

总结

以上为我个人混乱无章且缺乏条理的归纳。我知道自己根本无法通过一篇文章写出微信小程序与UI5所有的异同点，但从上至少可以管中窥豹，看出两者有着怎样不同的存在意义。

UI5是SAP面向business场景所提出的前端框架，可以实现复杂的前端页面，它的出现代表了SAP对于未来产品统一风格和友好界面的决心。

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

虽然SAP历史上的明星产品永远跑不掉“大而重”的印象。而近几年“小而灵”的风格却在SAP的很多新产品中尝试落地。在产品要求快速迭代的今天，我个人认为这可能是一个很好的尝试。那在这条路上，微信小程序“通讯+应用”的“一拖多”模式是否会成为sap的一个榜样呢？我们拭目以待。

BTW，有同样玩《养猪场MIX》的同学吗？支持一下呗？~