【青训营】小程序技术全解

71 阅读3分钟

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

一、本堂课重点内容:

  • 发展历程
  • 业务价值
  • 技术解析
  • 相关拓展

二、详细知识点介绍:

发展历程

image.png

image.png

image.png

image.png

业务价值

与web的区别

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

三大价值

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

技术解析

小程序原理

简单开发方式 : WebView + JsBridge

缺点:无网络方式体验不佳,资源需要联网下载,主要问题是如何管控安全

小程序开发设计三大原则:

  • 开发门槛低:HTML+CSS+JS
  • 接近原生体验:资源加载+渲染+页面切换,通过多个WebView切换页面
  • 安全管控:独立JS沙箱(开发者只能操作数据,不能控制DOM,DOM由框架处理)

小程序基本架构:

image.png

小程序基本语法

类似于前端三大件,如图为字节小程序页面基本组成 image.png

相关拓展

跨端框架

常见跨端框架 image.png

跨段框架原理

  • 编译时:解析生成AST语法树,重新组合生成小程序页面

image.png 缺点:转换过程中存在限制,无法完全抹平差异

  • 运行时:常用方案,一般使用虚拟DOM,Template实现

image.png 缺点:某些场景比原生语法差

三、实践练习例子:

实现番茄时钟

实现代码: image.png

image.png

image.png

image.png 实现效果:

image.png

四、课后个人总结:

本节课了解了小程序的发展历程,小程序与Web开发的区别,小程序的出现带来的新的三大价值,学习了小程序的基本开发方式,小程序的基本架构,以及如何跨端开发小程序.通过这门课可以发现小程序和web开发相比有很多相似之处,在很多方面都是共通的,甚至可以通过跨端框架实现多端互通,为以后开发小程序指明了方向.

五、引用参考:

bytedance.feishu.cn/file/boxcnR…