小程序多端开发框架

发表于

小程序与web开发区别

小程序由于采用双线程机制,视图层通过一个webview用于页面渲染,但是小程序屏蔽了DOM,BOM接口,自定义了一套组件规范,逻辑层通过jsCore线程负责对代码进行解析,通过setData方法和页面通信,做到渲染和执行分离。
而浏览器端元素显示的基本单位就是DOM元素,所以web代码无法直接运行在小程序端。


小程序运行环境

主流解决方法

静态编译转换（代表 uni-app/taro/rax）

静态编译是目前主流的跨端解决方法,其思路是在构建打包时,将一种结构化语言(框架规定)转换成另一种结构化语言(如小程序wxml)。

这样做的前提是,框架本身实现了一套基础的组件库,同时,为了抹平多端的接口差异,更进一步实现了一套统一api库,用于处理接口请求,数据本地缓存,路由切换等等

运行时兼容(代表 kbone/rax/remax)

kbone通过模拟DOM接口,生成语法树,然后转换成小程序的dom树,最终渲染

如何理解两者,下面看代码,有点SSR和spa渲染的意思在里面

这是源代码

1
2
3
<div>
   这是一段话
</div>

静态编译转换:

1
<view>这是一段话</view>

编译时转换

1
2
3
4
5
6
7
8
9
10
11
12
// 先解析语法,生成AST语法树,然后通过 miniprogram-element 模块生成对应的小程序dom树
h = function () {
          var e = this,
            t = e.$createElement,
            n = e._self._c || t
          return n('div', { staticClass: 'cnt' }, [
            n('Header'),
            n('div', [
              n('div', [e._v('这是一段话')])]),
            e._m(0),
            n('Footer')], 1)
        }

实际wxml文件,只有一个element空标签,内部的元素都是动态生成出来的

1
2
3
4
<element wx:if="{{pageId}}" class="{{bodyClass}}" style="{{bodyStyle}}" data-private-node-id="e-body" data-private-page-id="{{pageId}}" >
       <!--下面是动态生成的 并不在实际的静态文件里 这里只是示例-->
        <view>这是一段话</view>
</element>

kbone 体验

缺点

  • 编译速度慢(个人感觉是有点卡,看小程序开发者工具log是每次修改代码都重新执行了npm构建)
  • 原始依赖体积不小

  • 没有统一的api,所以需要判断环境变量,如下面代码

    1
    2
    3
    4
    5
    6
    if (process.env.isMiniprogram) {
      wx.navigateBack() // 这里需要调用微信的后退api
    }
    // 在taro/uni-app 中,都可以用统一api去实现
    uni.navigateBack
    Taro.navigateBack

  • 运行时方案必然会有性能损失

运行时编译优点

  • 支持更为完整的前端框架特性(如v-html 指令,filter特性)
  • 如果已有h5端的代码,那么迁移到小程序端就比较方便
  • 小程序运行时,可以直接使用小程序的特性,如内置组件(辩证看待)
  • 由于是通过在客户端生成wxml相关代码,所以性能肯定是不如静态代码
框架 初始包大小 自研组件库 社区生态(2020/3/24) 跨端范围 状态管理 维护团队
kbone 505kb 无 无 微信小程序,h5 根据选择的DSL框架,可自主选择 微信个人开发者
uni-app 280kb 有 丰富(1389物料) 5大程序,h5,native vuex Dcloud公司
taro 207kb 有 较丰富(89物料) 5大程序,h5,native redux/mobx/dav 京东Auto实验室