小程序原理笔记

  小程序的本质还是WebView, 只是部分组件使用了原生组件,比如下面的TabBar和上面的NavigationBar。但是既然也是WebView,为什么官方还宣称说小程序比h5更媲美原生体验呢?

因为相比传统h5做了很多的优化。首先我们都知道默认情况下浏览器页面是单线程的,也就是js的执行会阻塞页面渲染,这也就是为什么建议把script标签放到body的最后。而小程序把js逻辑抽离出来了,

相当于一个worker线程,因此小程序中执行的js并不影响页面渲染的性能,小程序中的worker线程和UI渲染线程是通过底层的JSBridge去通信的。因为小程序页面和Vue差不多,是动态的,会绑定一些动态变量,

所以需要worker端把数据传到渲染线程。

  小程序我们写的是wxml,而既然小程序的运行环境是webview,那wxml肯定最终还是要变成html,而html里面我们都知道并没有小程序的那些标签像view、text这些。这里是通过exparser实现的,本质就相当于WebComponents里面的shadow dom,就是自定义组件。,但是我们不能直接将wxml编译成html,原因还是因为上面所说的有动态数据,因此wxml编译成的是js,通过wcc(微信官方的编译器)可以把wxml编译成js,而后通过$gwx方法可以得到一个用于创建虚拟dom的方法,那么只需要把对应的data传给该方法,就可以生成虚拟dom,最后虚拟dom的dom diff之类的工作是由小程序基础库去做的,这里我们就不必关心了。

同样的道理,我们写的wxss也只能编译成js,因为小程序里面提供了rpx,也就是响应式的大小,类似于px2rem的原理,而要实现响应式肯定还得执行js,获取屏幕dpr,屏幕宽度之类的。

  小程序的开发效率比较低,怎么提效呢?因此又出现了多种小程序框架。而这些框架大概分为三种,一种是纯编译时框架,第二种是半编译半运行时,第三种是纯运行时框架。

第一种的代表就是腾讯官方的wepy,以及京东的taro 1.x,这种就是要构建AST,词法分析语法分析,好处是性能高,因为编译完成以后就是原生的小程序代码,和我们原生开发小程序性能一样,缺点就是官方要做大量的适配,如果js框架出现了新语法,这边也要去做对应的处理最终转换成原生小程序代码,而且作为开发者很多用法也是受限的,比如react hooks,如果taro不做适配你就用不了。

第二种代表是mpvue,半编译是说它也要把vue里面的template编译成wxml,而半运行就是说最终小程序里面是有Vue的运行时的,小程序的事件都会代理到vue里面的事件处理,而vue里面的data更新也要通过setData的方式同步到真正的PageData。这样vue只负责数据的处理,不负责页面渲染。

第三种代表是阿里的remax和腾讯官方的Kbone,这种好处就是react或vue的所有语法特性(不是绝对,但相比纯编译时框架要好的多)都可以使用,因为最终运行的就是vue和react运行时。而这种mvvm框架不管是vue和react,底层肯定都是要操作dom的,也就是document.xxxxx,而小程序里面是没有dom环境的,那么我们就自己搞一套适配器,模拟出dom api供vue、react调用,模拟出来的dom api是对虚拟dom的操作而非真实dom,最后再通过wxml把虚拟dom的数据渲染出来(其中利用了小程序的自定义模板特性)。

小程序原理笔记

上一篇:基于Titanium爬取微信公众号历史文章列表


下一篇:微信小程序中短信验证码登录全流程及代码