小程序技术总结|青训营笔记

127 阅读2分钟

这是我参与

「第四届青训营」笔记创作活动的第15天

关于小程序

小程序是无需安装即可启动的应用,实现 [随时使用、无需安装] 的理念
开发门槛相对较低,能实现简单应用功能,对用户而言也能减少内存占用空间和使用成本

发展历程

  • 2017:
    • 1月:微信小程序正式发布
    • 3月:面对个人开发者开放
    • 9月支付宝小程序开放,小程序成为业务竞争的关键
    • 12月:小程序开始进入市场爆发阶段
  • 2018:
    • 1月:小程序已经能被用户便捷访问,开始被大量使用
    • 4月开始:各大厂商纷纷布局小程序

直到现今2022年,'小' 程序的功能已逐渐变得十分强大,能够 【看视频、直播、购物、游戏】 甚至是APP中拥有的所有功能

生态数据

小程序的发展速度是十分快的

image.png

基本涉及各大厂家

image.png

业务价值

与WEB页面的区别:

  • 如同一般应用一样,有着同一版本管理,固定的语法
  • 平台能够控制各个功能入口,如二维码、链接、文章内嵌等;入口管理也能带来更好的用户体验
  • 基于特殊架构,流畅度比WEB好,页面跳转体验更优秀

三大主要价值:

  • 渠道价值:由于小程序的便携性,能够被大量的使用,为许多应用场景导流
  • 业务探索价值:与普通APP相比,小程序开发难度和成本低,能够快速试错,探索更多的利用价值
  • 数字升级价值:从线下到线上更加方便,提供良好的容错空间

关于开发

基本技术栈:HTML + CSS + JavaScript
小程序是多webview组成的,能保留每次切换前的页面,降低使用成本

安全管控:
不能直接操作DOM,依靠关系数据流来根据数据渲染页面

image.png

扩展

跨端框架: 为了适配不同的环境,复杂的应用构建

image.png

编译

ast(语法抽象树) 将任一对象分解,提取对应的块进行转换
但无法完全抹平差异,不同框架的特性不同,无法完全进行转换

image.png

运行

主要依赖 虚拟DOM & Template组件

传递虚拟DOM的各种属性到渲染层,组合Template生产渲染撒啊啊

image.png