企业互联网架构原理与实践
上QQ阅读APP看书,第一时间看更新

3.7 公众号、小程序与快应用的开发

3.7.1 公众号开发

公众号开发是指针对微信公众号的开发。公众号开发主要使用H5x相关技术,主要开发内容包括:(1)获得微信平台的安全授权,获得公众号专属的OpenID,使用AccessToken安全调用接口。(2)使用公众号内的消息会话,公众号是作为微信用户的一个联系人形式存在的,消息会话是公众号与用户直接交互的基础。(3)公众号内的业务场景通过自定义菜单链接到网页的形式实现。这时需要网页获得用户的授权,获取用户基本信息,还可以通过微信JS-SDK使用微信原生功能,实现在网页上录制和播放微信语音、监听微信分享、上传手机本地图片、拍照等功能。

3.7.2 小程序开发

小程序是指运行在超级App内,不需要另外安装的应用,超级App作为应用商店,负责小程序的审核,同时为小程序提供相应的环境生态与流量支持。现在互联网头部超级App如微信、支付宝、头条、百度、京东等都推出了自己的小程序体系。

小程序一般包括视图层和逻辑层。视图层一般包括页面配置文件、页面结构文件、页面样式文件,一般各平台在视图层都自定义描述页面结构的类HTML标签语言以及类CSS的样式语言。组件(Component)是视图的基本组成单元。视图层通过事件机制连接逻辑层。逻辑层一般用JavaScript编写,一般都支持MVVM模式,逻辑层可以调用部分原生API与OpenAPI,原生API包括多媒体、文件、位置、网络、设备等接口,OpenAPI是超级App开放的特色能力接口。

3.7.3 快应用开发

快应用是手机市场上处于领先地位的九大手机厂商共同推出的新型应用生态。用户无需下载安装,即点即用,更新直接推送,享受原生应用的性能体验。

“快应用”使用前端技术栈开发,原生渲染,同时具备H5页面和原生应用的双重优点。

快应用前端开发模式与Vue相近,采用MVVM模式,支持标准的JS语法,为获得更高的渲染性能和易用性,对CSS和标签进行了一些剪裁和扩充,很多前端代码资源可以直接复用。

快应用没有采用浏览器内核的运行模式,框架深度集成进各手机厂商的手机操作系统中,在操作系统层面形成用户需求与应用服务的无缝连接,将系统原生的渲染机制和接口能力提供给上层应用。很多原本在原生应用中才能使用的功能,在快应用中可以很方便地实现,享受原生应用体验。快应用有自己的“快应用中心”作为应用入口,同时支持生成桌面图标,不用担心分发留存等问题,资源消耗也比较少。

3.7.4 多端开发框架

Web、Native、超级App小程序、快应用等各种端形式多样,针对不同的端编写多套代码的成本显然非常高,需要只编写一套代码就能够适配到多端的能力。

uni-app与Taro是开源的多端开发解决方案,均支持移动端、H5、微信小程序、百度小程序、支付宝小程序、头条小程序这六端的转化,uni-app遵循VUE的规范,Taro遵循React语法规范。它们支持多端适配的原理是先把代码解析成一棵抽象语法树,根据这棵树生成其他小程序端支持的模板代码,最后把业务代码运行在一个与其他端框架兼容的运行时框架上。

将源代码解析为AST抽象语法树可以使用Acorn等JavaScript解析器。解析之前代码时遵循语言规则的文本,解析之后成为与输入文本完全相同的树形结构。这个过程是可逆的,再一次对AST遍历以及替换,这个过程对于前端来说相当于DOM树的生成,最后根据修改后的AST生成编译后的代码,如图3-13所示。

图3-13 多端开发框架的代码转换

Antmove(蚂蚁搬家)是一个小程序平台开发的统一解决方案,通过编写一次代码,编译成不同平台的小程序代码。Antmove并不是开发框架,而是源码到源码的转换器。Antmove生成的代码侵入性更少,可以产生原生的小程序代码。