这是我参与「第四届青训营 」笔记创作活动的的第5天
一、本堂课重点内容:
- 发展历程
- 业务价值
- 技术解析
- 相关拓展
二、详细知识点介绍:
发展历程
业务价值
与web的区别
- 有着固定的语法以及统一的版本管理,平台可以更方便的进行审核
- 平台能够控制各个入口,如二维码,文章内嵌,端内分享。入口上也能带来更好的用户体验
- 小程序基于特殊的架构,在流畅度上比WEB更好,有更优秀的跳转体验
三大价值
- 渠道价值:由于小程序的便捷性,依托于超级平台,小程序能够充分为很多场景导流,如美团和美团优选微信小程序带来的流量占比分别是40%和80%
- 业务探索价值:相比原生APP来说,小程序的开发难度和成本都降低的很多,这就创造了很多场景开发者能够用小程序来快速试错,不断探索新的业务价值
- 数字升级价值:线下到线上如何做?从轻消费类的快餐、茶饮到地产汽车等大宗消费,,小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广。
技术解析
小程序原理
简单开发方式 : WebView + JsBridge
缺点:无网络方式体验不佳,资源需要联网下载,主要问题是如何管控安全
小程序开发设计三大原则:
- 开发门槛低:HTML+CSS+JS
- 接近原生体验:资源加载+渲染+页面切换,通过多个WebView切换页面
- 安全管控:独立JS沙箱(开发者只能操作数据,不能控制DOM,DOM由框架处理)
小程序基本架构:
小程序基本语法
类似于前端三大件,如图为字节小程序页面基本组成
相关拓展
跨端框架
常见跨端框架
跨段框架原理
- 编译时:解析生成AST语法树,重新组合生成小程序页面
缺点:转换过程中存在限制,无法完全抹平差异
- 运行时:常用方案,一般使用虚拟DOM,Template实现
缺点:某些场景比原生语法差
三、实践练习例子:
实现番茄时钟
实现代码:
实现效果:
四、课后个人总结:
本节课了解了小程序的发展历程,小程序与Web开发的区别,小程序的出现带来的新的三大价值,学习了小程序的基本开发方式,小程序的基本架构,以及如何跨端开发小程序.通过这门课可以发现小程序和web开发相比有很多相似之处,在很多方面都是共通的,甚至可以通过跨端框架实现多端互通,为以后开发小程序指明了方向.