小程序技术全解 | 青训营笔记

125 阅读2分钟

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

01 发展历程

核心数据

image-20220823153702291

小程序生态

image-20220823153717339

02 业务价值

与Web的区别

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

三大价值

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

03 技术解析

小程序原理

第三方开发应用最简单最方便的方式:WebView + JSBridge

  • 开发门槛低
    • HTML + JS + CSS
  • 接近原生的使用体验
    • 资源加载 + 渲染 + 页面切换
  • 能够保证安全可控
    • 独立JS沙箱

04 相关拓展

跨端框架

复杂应用构建,一次开发可以跨多端

remaxtaromegalompvueuni-app
语法reactReact/VueVueVueVue
厂家蚂蚁金服京东网易美团Hbuilder

跨端框架原理

编译时

编译时方案有个天然的缺陷, 不论是React和vue等各种框架,它们的用法都十分多样,而且会不断添加新的特性,而小程序本身确有很多的限制,那么在转换过程中,很多特性没有办法进行转换,所以就要给框架的书写代码的时候加上很多限制,这背离了我们的初衷,所有现在更多的方案采用运行时的方案

运行时

运行时的方案能够实现主要依赖这两个部分,一个是虚拟DOM,一个Template组件