这是我参与「第四届青训营 」笔记创作活动的第18天
小程序的发展历程
发展历程
核心数据
小程序生态
业务价值
与WEB的区别
- 01.有着固定的语法以及统一的版本管理,平台可以更方便的进行审核
- 02.平台能够控制各个入口,如二维码，文章内嵌，端内分享。入口上也能带来更好的用户体验
- 03.小程序基于特殊的架构，在流畅度上比WEB更好，有更优秀的跳转体验
三大价值
渠道价值
由于小程序的便捷性，依托于超级平台,小程序能够充分为很多场景导流,如美团和美团优选微信小程序带来的流量占比分别是40%和80%
业务探索价值
相比原生APP来说，小程序的开发难度和成本都降低的很多，这就创造了很多场景并发者能够用小程序来快速试错，不断探索新的业务价值
数字升级价值
线下到线上如何做?从轻消费类的快餐、茶饮到地产汽车等大宗消费，小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广。
小程序技术解析
小程序原理
- 第三方开发应用最简单最方便的方式:
- WebView + JSBridge
- WebView：移动端提供的运行JavaScript的环境，相当于App内的浏览器页面
- JSBridge：顾名思义，作为桥梁开发者可以调用App本身的一些api
几个问题：
- 无网络的情况体验不佳
- 网页切换体验不佳
- 如何管控保证安全
而小程序通过以下方式，解决了这些问题：
- 开发门槛低——HTML+JS+CSS
- 接近原生的使用体验——资源加载 + 渲染 + 页面切换
- 安全管控——独立JS沙箱：隔绝操作dom的方式
- 不操作DOM如何控制页面渲染
- Data -> 根据数据处理DOM -> 页面
- Data -> 根据数据处理DOM -> 页面
小程序语法
比如字节小程序是TTML/JS/TTSS，而微信小程序则是WXML/JS/WXSS，对应HTML/JS/CSS
实现简易番茄时钟
编写tomatoClock.wxml（html）
编写tomatoClock.js
编写一点点wxss（css）
相关拓展
什么是跨端框架？
- 复杂应用构建
- 一次开发可以跨多端（微信小程序、各系小程序等等）
跨端框架介绍
跨端框架原理
编译时
AST 语法树
- 在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。比如，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；而类似于 if-condition-then 这样的条件跳转语句，可以使用带有三个分支的节点来表示。
- 和抽象语法树相对的是具体语法树（通常称作分析树）。一般的，在源代码的翻译和编译过程中，语法分析器创建出分析树，然后从分析树生成AST。一旦AST被创建出来，在后续的处理过程中，比如语义分析阶段，会添加一些信息。
天然缺陷：无法完全抹平差异！
- 小程序本身是有很多限制的
- 所以大部分方案都是运行时方案
运行时
虚拟DOM
本质为js中的一个对象，有很多dom中的属性值标签等，通过这个对象可以生成我们的实际DOM
Template组件
小程序中提供的动态生成的模板。
运行时结构
运行时的方案也不是完美的，在一些场景下相比原生小程序的语法性能会更差，大部分场景下都可！
