小程序的一些事
yshaojun opened this issue · comments
现在的移动开放中,但凡对体验有要求的,都不会首选 H5,能平衡体验和效率的解决方案则是小程序。小程序是如何运行的,对比 H5 有怎样优势,我在这个周末仔细地学习了一下。
基本原理
小程序和 H5 最大的不同是:小程序是双线程架构,逻辑层(App Service)和渲染层(Webview,或者叫视图层)运行在不同的线程里,以微信小程序为例,其运行环境如下:
运行环境 | 逻辑层 | 渲染层 |
---|---|---|
iOS | JavaScriptCore | WKWebView |
安卓 | V8 | chromium 定制内核 |
小程序开发者工具 | NWJS | Chrome WebView |
由于逻辑层中没有 DOM 和 BOM 对象,一些常用的前端库比如 jQuery 没法直接运行,但是由于分开,避免了 H5 中因为较长时间执行 js 从而使页面卡顿甚至失去响应的弊端。
宿主环境
小程序应用的开发是比较容易上手的,但是对于企业内部服务,却缺少宿主环境。参考上图微信小程序运行环境,需要实现3端,本身就是个不小的工作量,这还不包括小程序开发规范的制定、原生能力支持和小程序平台搭建和运营等。
目前也没有查到开源的小程序宿主环境框架,比较接近是百度智能小程序开源联盟:
但是内容简陋,更新迟缓。这说明企业内部服务小程序化,不会单纯是技术创新,更多是战略决策。
疑问解答
这部分是我阅读了微信、支付宝、百度、字节小程序文档后的个人理解,如有错误欢迎指出。
Q:H5 比小程序体验差在哪?
A:微信小程序文档中说了2点,白屏 和 缺少操作反馈,小程序的限制资源大小、限制页面数量和双线程架构确实很好解决了这两个问题,但个人认为并不是唯一解,甚至在某些场景都算不上最优解。
Q:小程序使用了原生渲染?
A:并没有,小程序仍然是通过 Webview 渲染页面的,虽然可以调用原生能力(比如图片预览),但是这类调用 JSBridge 同样可以做。
Q:小程序宿主开发成本有多高?
A:可以看到现在各家的小程序不仅是技术创新,更是一个生态体系,即使我们不考虑管理和运营,只做技术实现,也需要至少实现3端(iOS、安卓、桌面模拟器)宿主,加上目前没有开源方案可以借鉴,一切从零开始,其成本早已超过原生开发。
Q:前端能做什么?
A:目前前端技术栈仅能接管桌面端(Electron)和 Web 端,由于移动端跨端方案(比如 Flutter)并不成熟,我们对 iOS 和安卓没特别好办法。因此,小程序宿主框架,应该是前端同学和 iOS、安卓开发同学合作共建,前端负责实现桌面和 Web 宿主,端开发同学负责实现 iOS 和安卓宿主。