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

这是我参与「第四届青训营 」笔记创作活动的第5天

这篇文章是青训营-前端《小程序技术全解》的课堂笔记。

发展历程

• 核心数据

• 小程序生态

业务价值

与Web的区别

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

三大价值

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

技术解析

开发门槛低
接近原生的使用体验
第三方开发应用最简单最方便的方式 WebView +JSBridge
WebView是一个基于webkit的引擎，可以解析DOM 元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。
JSBridge:JS与native代码的桥梁。主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能。

相关扩展

在目前的开发环境中，能够实现跨平台就是一个巨大的优势。

渲染层：结合template生成实际要渲染的元素树
逻辑层：虚拟dom树，js实现
运行时方案：虚拟DOM；Template组件。
虚拟DOM：是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上。