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

凉子木
57 阅读3分钟

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

01.发展历程

发展历程

image.png

image.png

image.png

核心数据

image.png

小程序生态

image.png

02.业务价值

与WEB的区别

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

三大价值

  • 渠道价值

    • 由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流，如美团和美团优选微信小程序带来的流量占比分别是40%和80%

  • 业务探索价值

    • 相比原生APP来说，小程序的开发难度和成本都降低的很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探索新的业务价值

  • 数字升级价值

    • 线下到线上如何做？从轻消费类的快餐、茶饮到地产汽车等大宗消费，小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广。

03.技术解析

小程序原理

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

webview我们可以简单理解为app内置的浏览器，我们可以在app内展示网页，但是除了web本省，我们想让开发者能够通过js调用更多app上的功能怎么办 App上的功能比如打开相机，打开地图等，这些单靠web api本身做不到，这就需要泳道我们的jsbridege了，顾名思义jsbridege就是js和native代码之间的桥梁，让两者能够沟通相互调用，实现jsbridge的方式有很多，如代码注入，url拦截等。总之它的作用就是让js和native代码能够相互沟通和调用。

那么我们这种方式有没有什么问题？——有！ 无网络的情况体验不佳， 网页切换体验不佳

如何管控保证安全？ 看下这段代码。

image.png 所以到这里我们的web方案有一些走不通，那么我们需要设计一种新的方案，来解决我们这些问题，这个方案需要有如下特点

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

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

image.png

在浏览器中，当js操作频繁的时候我们的动画就会卡顿，因为他们是在同一进程中的，我们这种结构将js和渲染分离顺带解决了这个问题。 这样的通信结构，决定了小程序的性能问题在数据传递。

image.png

小程序语法

image.png

实现番茄时钟

image.png

image.png

image.png

image.png

04.相关拓展

跨端框架

目前的小程序跨端框架主要为了解决两个问题

  • 复杂应用构建
  • 一次开发可以跨多端 image.png

跨端框架原理

编译时

ast语法树

image.png

image.png

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

运行时

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

image.png

image.png 缺点：因为要传递虚拟dom的各种属性到渲染层，在一些场景下相比小程序原生语法性能会更差

avatar
文章
阅读
粉丝