【第二届字节青训营 - 寒假前端场】「小程序技术全解」の学习笔记

小程序技术全解

发展历程

小程序与WEB的区别

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

小程序的价值

• 渠道价值
  由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流，如美团和美团优选微信小程序带来的流量占比分别是40%和80%
• 业务探索价值
  相比原生APP来说，小程序的开发难度和成本都降低的很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探索新的业务价值
• 数字升级价值
  线下到线上如何做？从轻消费类的快餐、茶饮到地产汽车等大宗消费，小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广。

技术解析

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

WebView是一个基于webkit的引擎，可以解析DOM 元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。

JSBridge:JS与native代码的桥梁。主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能。

当前存在的问题：
无网络的情况体验不佳，
网页切换体验不佳

如何管控保证安全？

小程序原理（好处）：

• 开发门槛低
• 接近原生的使用体验
• 能够保证安全可控

不操作DOM如何控制页面渲染？

graph LR 数据 --> 根据数据处理DOM 根据数据处理DOM --> 页面

相关拓展

跨端框架：

缺陷：无法完全抹平差异。

运行时方案：虚拟DOM；Template组件。
虚拟DOM：是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上

---

声明：文章大部分内容来自字节青训营张晓伟老师上课讲解的内容。