小程序技术全解课程笔记 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天，以下是我对这堂课的一些记录。

业务价值

与WEB的区别

1. 有着固定的语法以及统一的版本管理，平台可以更方便的进行审核。
2. 平台能够控制各个入口，如二维码，文章内嵌，端内分享。入口也能带来更好的用户体验。
3. 小程序基于特殊的架构，在流畅度上比WEB更好，有更优秀的跳转体验。

三大价值

1. 渠道价值：由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流。
2. 业务探索价值：相比原生APP来说，小程序的开发难度和成本都降低了很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探索新的业务价值。
3. 数字升级价值：从轻消费类的快餐、茶饮到地产汽车等大众消费，小程序都展现了良好的容错空间。

技术解析

小程序原理

第三方开发应用最简单最方便的方式：WebView + JSBridge。

WebView可以理解为APP内置的一个浏览器，可以在APP内浏览一些网页，就是用webView来承接这些网页的；除了开发者能调用Web本身的一些功能，比如通过js来调用一些APP的功能，比如说打开相机，打开地图等，这些单靠Web本身的API是做不到的，这就需要JSBridge，它作为js代码和native代码的桥梁，让两者能互相调用。

存在的问题：

1. 无网络的情况体验不佳。
2. 网页切换体验不佳。
3. 如何管控保证安全。

解决以上问题需要满足的条件：

1. 开发门槛要低。（HTML + CSS +JS）
2. 要接近原生的使用体验。（用资源离线化处理）
3. 能够保证可控。（用独立JS沙箱）

因此有以下小程序的架构：

渲染层和逻辑层都是分离的，渲染层是多Webview的架构，可以提升切换页面的体验，逻辑层是一个独立的沙箱，无法独立的对渲染层来操作，因为它无法独立的操作DOM元素，它们要传递页面数据的时候，需要通过Native。在浏览器中，操作DOM时，如果过于频繁，动画会卡顿，因为它们是运行在同一个进程中的，如果要解决这个问题，需要实现渲染和逻辑分离。如果页面出现卡顿，可以是逻辑层的数据传输的问题，会不会过大，可以考虑分段传输去优化。

相关拓展

跨端框架的实现目的：

1. 复杂应用构建。
2. 一次开发可以跨多端。

以下是一些框架：