小程序多终端解决方案框架编译原理及开发框架

参考文件：

Taro的官方文档，/taro/blog/2...

mpvue:/mpvue/mpvue...

从时间节点回顾整个多端解决方案框架的流程，我们会发现多端解决方案的愿景非常简单：使用一套DSL，可以“编写一次，运行”，

以下是市面上流行的小程序开发框架

目前小程序多端解决方案最终的对外使用方式可以分为：

小程序的多端解决方案从技术上可以分为三类，第三类（运行时结合编译时解决方案）是目前的主流技术

1、类Vue风格框架的编译原理

Vue DSL 静态编译

Vue的设计风格更接近各个小程序的设计风格，因此Vue DSL静态编译方案相对容易

如下所示

因为小程序在H5环境下基本上可以接受CSS，所以样式部分基本上可以直接平滑的迁移。 转换为 .wxml 文件需要转换 HTML 标记和模板语法。 比如mpvue等，这部分依赖于AST技术，不再详细介绍，实际操作/

Vue 在运行时编译

静态编译主要是Vue单文件组件的编译过程，有些处理会比较困难。

Vue中：通过响应式监听数据变化，触发视图修改，对应小程序，多端方案需要做的就是监听数据变化，调用()方法，触发小程序渲染层的变化。

以 mpvue 为例：mpvue 是 Vue.js 代码的 fork，内置了 Vue 功能，并且增加了对小程序平台的支持

以生成微信小程序为例：

1.初始化：微信小程序平台规定小程序页面中必须有Page()方法。

// 业务方代码 new Vue() {} 
// 经过多端方案转换 Vue.init = () => {    
      Page() // 手动执行微信小程序平台的Page(), 完成初始化处理。 
}
复制代码

2、数据变化：

Vue 基于响应能力来监控数据。 当数据发生变化时，它生成一个新的虚拟节点VNode，然后比较新旧虚拟节点，找到diff，调用小程序API—()方法，更新一份最新数据。 至于渲染部分则交给小程序架构来处理。

3、其他

网易考拉的，将数据结构扁平化，然后调用()可以获得更好的性能。

2. React-like框架的编译时和运行时组合方案

类React小程序多端解决方案存在很多难题，其中之一就是如何将过于灵活的JSX转换为小程序模板？ 由于JSX过于灵活，单纯基于AST技术很难进行一对一的转换。

仔细看下面的代码，使用JSX表达能力实现的Prop模式，如果不运行代码，很难计算出需要表达的视图结果。

function CompParent({children, ...props}) {   
  return typeof children === 'function' ? children(props) : null 
} 
function Comp() {   
 return (     
     <CompParent>
         {props => <div>{props.data}div>}     
     CompParent>   
 ) 
}
复制代码

至此，对于“JSX”转换，React式小程序多端解决方案大致可以分为两种处理方式：

1.强制静态编译类型：指的是Taro1/2，往哪里走

2.运行时处理类型：代表包括：Taro Next、Ant Remax

强制静态变异需要业务用户在编写代码时避免一些编译阶段难以处理的动态编写方式。 归根到底是使用过程中对JSX编写方式的限制

下图是Taro对此的插画

多端框架结合React设计理念

TAG标签：小程序开发