这是我参与「第四届青训营 」笔记创作活动的第7天。 这节课的主要目的是认识和了解小程序的业务产品价值；学习和掌握小程序相关技术原理。
发展历程
为什么会有小程序：小程序扩展了微信的使用场景，技术人员也要关注业务价值，技术为业务服务。
业务价值
- 渠道价值：为很多场景导流，如美团、美团优选；
- 业务探索价值：相比原生app而言，开发难度和成本降低很多，开发者可以用小程序试错，探索新业务；
- 数字升级价值：从线下到线上，线下场景覆盖范围广；
技术解析
第三方开发应用最简单的方式：WebView+JSBridge。WebView相当于app内置浏览器。JSBridge为JS和native代码的桥梁，代码注入、url方式可以实现。
这种方式的问题：无网络情况体验不佳，网页切换体验不佳，如何管控保证安全
安全可能遇到的问题：
if(Data.now()>new Data('2022-02-02')){
document.body.innerHTML = '<h1>hello world</h1>'
}
这种情况下使得程序上线后代码被改变，最后上线的版本可能和审核的版本不一致
针对遇到的问题：开发门槛低、接近原生的使用体验、能够保证安全可控。
开发门槛低：大部分开发人员都会，学习成本低（HTML、CSS、JS）
接近原生的使用体验：资源离线化解决资源加载问题+渲染+页面切换（多个页面用多个WebView链接，切换页面就是切换WebView，之前的页面状态不会销毁，依然存在）
安全管控：不能让开发者使用js来操作DOM，使用独立JS沙箱，只能做JS逻辑，无法做DOMAPI操作。 ===>不操作DOM如何控制界面渲染？框架实现数据处理，渲染DOM。
小程序逻辑
数据传输决定了性能问题
小程序语法（字节为例）
TTML模版部分、JS数据和方法、TTSS样式
相关扩展
跨端框架
一次开发可适应不同的端
常见跨端框架：
- remax：语法：react，厂家：蚂蚁金服
- taro： 语法：react/vue，厂家：京东
- megalo： 语法：vue，厂家：网易
- mpvue： 语法：vue，厂家：美图
- uni-app: 语法：vue，厂家：Hbuilder（在vue上比较成熟）
跨端框架原理
编译时方案：AST语法树。存在问题：无法完全抹平差异化
运行时方案：虚拟DOM，Template组件帮助动态生成模版。存在问题：在一些场景下相比小程序原生语法性能会更差。
