• 小程序原理笔记


      小程序的本质还是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的数据渲染出来(其中利用了小程序的自定义模板特性)。

  • 相关阅读:
    Dot Net WinForm 控件开发 (七) 为属性提下拉式属性编辑器
    WinForm 程序的界面多语言切换
    c#遍历HashTable
    Dot Net WinForm 控件开发 (三) 自定义类型的属性需要自定义类型转换器
    Dot Net WinForm 控件开发 (六) 为属性提供弹出式编辑对话框
    Dot Net WinForm 控件开发 (一) 写一个最简单的控件
    Dot Net WinForm 控件开发 (四) 设置属性的默认值
    Dot Net WinForm 控件开发 (二) 给控件来点描述信息
    Dot Net WinForm 控件开发 (八) 调试控件的设计时行为
    Dot Net WinForm 控件开发 (五) 复杂属性的子属性
  • 原文地址:https://www.cnblogs.com/flamestudio/p/12946041.html
Copyright © 2020-2023  润新知