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

重点

• 小程序发展历程
• 小程序业务价值
• 小程序原理、语法、实际例子（番茄闹钟）
• 跨端框架介绍和原理

小程序

发展历程

核心数据

小程序生态

业务价值

与web区别

• 1.有固定的语法以及统一的版本管理，方便平台审核
• 2.平台能控制各个入口，如二维码 文章内嵌 端内分享，更好用户体验
• 3.给予特殊的架构，小程序流畅度比web好，有更优秀的跳转

三大价值

• 渠道价值：由于便捷性，依托于超级平台，小程序能够充分为场景导流 如美团和美团优选小程序带来的流量占比为40% 80%
• 业务探索价值：开发难度成本降低，场景开发者可以快速试错，不断探索新的业务价值
• 数字升值价值：线下到线上从轻消费的快餐 茶饮到地产汽车，小程序都有良好容错空间，线下场景的小程序覆盖范围广

技术解析

小程序原理

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

无网络的情况体验不佳，网页切换体验不佳，如何保证安全

为了解决上述 则需要

• 开发门槛低（HTML+JS+CSS
• 接近原生的使用体验（资源加载-资源离线化+渲染+页面切换-每次切换保留之前页面多webview
• 安全管控（独立JS沙箱 把dom禁用）

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

data->根据数据处理dom->页面

小程序原理

小程序语法

实现番茄时钟

时间格式化，mtext哪里是为了保证显示出来都是两位数 如05

相关拓展

跨端框架介绍

跨端框架解决了：复杂应用构建，一次开发可以跨多端

主流框架

跨端框架原理

编译时

编译时：先AST语法树，再转换为code

例子 这是一段代码 提取AST语法结构后 转换为小程序代码

缺点：无法完全抹平差异

运行时

虚拟dom + template组件

在一些场景下比小程序原生语法性能差

总结

讲解了小程序的发展、原理和跨端