小程序的一些事
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 和安卓宿主。