作者:lisaling,腾讯 IEG 游戏运营工程师。
小程序技术演进 内部开放微信原生能力 微信小程序基础架构浅析-1.jpg (87.92 KB, 下载次数: 0) 下载附件 半小时前 上传 2015 年初,微信发布了一整套网页开发工具包,称之为 JS-SDK,开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个 API。让所有开发者都可以使用到微信的原生能力。 微信小程序基础架构浅析-2.jpg (90.38 KB, 下载次数: 0) 下载附件 半小时前 上传 用户在访问网页的时候,在浏览器开始显示之前都会有一个白屏的过程,在移动端,受限于设备性能和网络速度,白屏会更加明显。除了白屏,影响 Web 体验的问题还有缺少操作的反馈,主要表现在两个方面:页面切换的生硬和点击的迟滞感。 微信小程序基础架构浅析-3.jpg (78.86 KB, 下载次数: 0) 下载附件 半小时前 上传 微信小程序基础架构浅析-4.jpg (190.48 KB, 下载次数: 0) 下载附件 半小时前 上传 具体实现上小程序采用了类 web + 离线包的形式。开发上与 web 类似,门槛较低,开发效率较高。 离线下载和页面预渲染功能增强了用户体验,提升了加载速度,解决了 JS-SDK 加载白屏的问题 1。 小程序提供了云端更新离线包的功能,可动态更新页面,相对于 app 的更新和发布更为灵活。 此外,小程序在离线包的基础上对切换动画进行优化,降低了切换页面导致的迟滞感,缓解了切换不流畅的问题 2。 微信小程序基础架构浅析-5.jpg (41.55 KB, 下载次数: 0) 下载附件 半小时前 上传 微信小程序基础架构浅析-6.jpg (125.09 KB, 下载次数: 0) 下载附件 半小时前 上传
这样的逻辑层与 UI 层的隔离,加上小程序的审核和举报机制,使得微信加强对小程序的管控,解决了问题 3。但这也使得开发者无法灵活的进行页面渲染。 上面已经说了逻辑层无法操作 DOM 变更,那小程序是如何进行页面的渲染呢? 小程序基于数据驱动的架构模式,基于 Virtual Dom(React 引入,真实 DOM 的一种 JS 描述方式)的概念,业务侧只需要改变数据即可引起界面变化。 其中渲染层提供了带有数据绑定语法的 WXML,逻辑层提供了 setData 等等 API,开发者需要进行界面变化时,只需要通过在逻辑层执行 setData 把变化的数据通过 Native 层传递到渲染层,小程序会进行 Dom Diff(DOM 结构对比并进行最小化变更的算法)等流程,最后把正确的结果更新在 Dom 树上。 微信小程序基础架构浅析-7.jpg (78.2 KB, 下载次数: 0) 下载附件 半小时前 上传
小程序方案与 React Native 对比 那么小程序与现有的混合开发技术类型的异同点在哪?尤其是与 React Native 的区别,小程序技术架构为什么没有使用 React Native? 现有的混合开发类型,基于 UI 渲染的分类来看,主要有两类:
小程序也属于类型 1,本次我们主要以类型 2 中的 React Native 作为对比分析。 框架 React Native 框架主要有三层:
UI 渲染 React Native 基于 react 框架(Virtual Dom)来进行 UI 渲染,具体的流程大致如下:
通信 React Native 基于 JSCore 实现 js 与 java/oc 交互,具体流程大致如下:
微信小程序基础架构浅析-8.jpg (61.91 KB, 下载次数: 0) 下载附件 半小时前 上传 优势
劣势
小程序不选择 React Native 原因 据小程序开发人员告知的原因如下:
小程序与 React Native 相同点
小程序与 React Native 不同点 小程序使用浏览器内核 WebView 来渲染界面(小部分原生组件由客户端参与渲染),界面主要由成熟的 Web 技术渲染,辅之大量的接口提供丰富的客户端原生能力,而 React Native 是客户端原生渲染。理论上 React Native 相对于 WebView 的性能更好,但小程序的类 web 开发对开发来说入门相对简单,像是一种开发效率与性能的双刃剑。 基于上面的架构分析,我们在开发中需要注意是:
参考文档
腾讯技术交流群已建立,交流讨论可加QQ 群:160315980(备注腾讯技术) ,微信交流群加:teg_helper。 |
本站(www.chuangyeye.com)部分图文转自网络,刊登本文仅为传播信息之用,绝不代表赞同其观点或担保其真实性。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢