微信⼩程序 vs ⽀付宝⼩程序 vs 百度⼩程序

各家⼩程序之间有很多相似的地⽅，例如相似的开发环境，相似的运⾏时渲染内容。

文档索引

微信⽂档：https://developers.weixin.qq.com/miniprogram/dev/api/

百度⽂档：https://smartprogram.baidu.com/docs/develop/api/apilist/

⽀付宝⽂档：https://opendocs.alipay.com/mini/api

相似内容：

• 均有原⽣组件和 webview 中渲染的组件

• ⼤部分配置和项⽬结构（app.json/app.js）都相同， 甚⾄之前出现了⽀付宝⼩程序⽂档直接拷⻉微信⼩程序⽂档的情况。

• 他们都⽀持第三⽅平台，来对⽤户授权的⼩程序进⾏操作。

不同之处：

• 部分 API 内容互不相同（wx/swan/my）

• 不同平台侧重的能⼒不同，⽀付宝侧重商家，百度⼩程序更侧重流量相关获取，微信⼩程序更侧重基础能⼒。

• 只有微信⼩程序⽀持个⼈申请使⽤，百度/⽀付宝仅⽀持企业使⽤。

• 百度的 API ⽂档中，出现了很多 AI 相关的⼩程序 API 来调⽤。

⼩程序之间的差异具体体现在 api 的差异当中，⽬前各家的⼩程序在运⾏时的差异已经⾮常⼩了，底层功能都已经⾮常稳定。书写⼩程序代码的过程中只需要注意对应 API 的使⽤即可。

wepy 、 mpVue 、 remax 、 taro

他们本质都是让⼩程序开发更加友好，或是在⼩程序同构中展示对应的能⼒。

wepy

wepy 是⼀个专注于⼩程序开发的开发框架，通过它我们能更好的组织我们的⼩程序代码。

特点：

类 Vue 开发⻛格

• ⽀持⾃定义组件开发

• ⽀持引⼊ NPM 包

• ⽀持 Promise

• ⽀持 ES2015+ 特性，如 async Functions

• ⽀持多种编译器，Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug

• ⽀持多种插件处理，⽂件压缩，图⽚压缩，内容替换等

• ⽀持 Sourcemap，ESLint 等

• 对⼩程序细节优化，如请求列队，事件优化等

<style lang="less"> @color: #4D926F;
.num {
  color: @color;
}
</style>
<template>
  <div class="container">
    <div class="num" @tap="num++">
      {{num}}
    </div>
    <div>{{text}}</div>
    <input v-model="text"></input>
  </div>
</template>
<config>
{
  usingComponents: { customCompoent:'@/components/customComponent'},
  vendorComponent: 'module:vendorComponent'
}
</config>

总结：

• 使⽤内部的约束来开发⼩程序，最终静态编译为⼩程序⽬录结构

• vue ⻛格，只⽀持微信⼩程序，后期如果想换框架则迁移困难

• v2之后的版本较v1的开发体验有明显提升

源码：

通过 bin/wepy-build.js 执⾏编译，通过⽂件名称判断不同的编译⽅式，不同编译⽅式注册的回调函数core/plugins/parser/ 注册。

mpvue

mpvue 是⼀个通过 vue 进⾏开发，同时⽀持多端的框架。⽬前⽀持 微信、百度、头条和⽀付宝⼩程序。
它与 wepy 虽然同是 vue 进⾏开发，但是之间还是有些区别的，主要体现在它在运⾏时还依赖了部分vue.runtime.js 的代码。

特点

• 保留了 vue.runtime 核⼼⽅法，⽆缝继承了的基础能⼒

• 提供了将 vue 的模板语法转换到⼩程序的 wxml 语法的能⼒

• 修改了 vue 的建构配置，使之构建出符合⼩程序项⽬结构的代码格式： json/wxml/wxss/js ⽂件

源码

mpvue 的源码中，vue 的作者也写了很多，主要也因为这个项⽬也⽤到了很多 vue 运⾏时的东⻄，所以不同于wepy 的编译型， mpvue 除了基本的静态编译，运⾏时还是加⼊了⼀些 vue.runtime.js 中的元素的，在项⽬迁移时会稍稍容易些。

例如在 platforms/mp/compiler/wx 中，加⼊了编译和解析微信⼩程序部分的⽅法。

在旁边的 runtime 中，实现了⼀系列的 diff/events/⽣命周期等等功能。

总结

注意：目前mpvue由于遗留问题太多，并且长期处于不维护状态，已不太推荐使用，开源社区基本已经放弃了该框架。

remax

remax 是由阿⾥推出的⼀款⼩程序制作框架，能同时运⾏在微信⼩程序/⽀付宝⼩程序/字节跳动⼩程序当中。

特性：

• 使⽤ react 的⻛格和⽅式来进⾏⼩程序的开发使⽤
• Remax 把代码转换到多个⼩程序平台。
• 完整的 TypeScript ⽀持。

export default class IndexPage extends React.Component {
  // ⻚⾯组件的 didMount 触发时机是在 onLoad 的时候
  componentDidMount() {
    console.log('IndexPage load')
  }

  onShow() {
    console.log('IndexPage show')
  }

  render() {
    return <View>Hello world!</View>
  }
}

源码

相⽐于其他框架，remax 使⽤静态编译的部分就⽐较少，他主要应对的就是运⾏时的⼯作。

假如使⽤其他静态编译类型的框架，对于以下情况就会有⼼⽆⼒：

render() {
    const child = <View>Hello remax!</View>;
    return <View>Hello world! {child} </View>;
}

render() {
    return <View>Hello world! <View>Hello remax!</View> </View>;
}

因为这⾥的内部 child 是通过 js 来控制的，静态编译⼤部分情况下不会分析到具体组件和 UI 与变量之间的联系，⼤部分框架只是使⽤⼀个简单的 xml 库来结构分析，所以这种变量在运⾏时决定 UI 就⽆法实现。

而 remax 不会有这样的问题，他在运⾏时实现了⼀套类似react-dom ，唯⼀有区别的是把 react-dom ⾥⾯与document，window 有关的内容都替换成了⼩程序⾥已有的内容，这样实现了⼀套 react-reconciler。

import ReactReconciler from 'react-reconciler'
let reconciler = ReactReconciler({
  createInstance(type) {
    return document.createElement(type)
    // 替换为⼩程序内部⽅法即可实现实例的创建
  },
  appendChild(parent, child) {
    parent.appendChild(child)
  },
  removeChild(parent, child) {
    parent.removeChild(child)
  },
  insertBefore(parent, child, before) {
    parent.insertBefore(child, before)
  },
})

taro

taro可谓是大名鼎鼎的小程序开发框架，⽬前⽀持微信/百度/⽀付宝/百度⼩程序和 h5，⽬前⽀持的平台最多，也在持续维护的⼀个框架平台。它也是⼀套遵循 React语法规范的 多端开发解决⽅案。通过 Taro 的编译⼯具，将源代码分别编译出可以在不同端（微信/百度/⽀付宝/字节跳动/QQ/京东⼩程序、快应⽤、H5、React-Native 等）运⾏的代码。

特性

• ⽀持使⽤ npm/yarn 安装管理第三⽅依赖

• ⽀持使⽤ ES7/ES8 甚⾄更新的 ES 规范，⼀切都可⾃⾏配置

• ⽀持使⽤ CSS 预编译器，例如 Sass 等

• ⽀持使⽤ Redux 进⾏状态管理

• ⽀持使⽤ MobX 进⾏状态管理

• ⼩程序 API 优化，异步 API Promise 化等等

源码

它是⼀个静态编译的框架，所以也就是说我们最终的代码都是已经编译为能直接在平台中运⾏的了，所以主要的⼯作对于 taro 来说是在编译阶段进⾏。

对于微信⼩程序的转译，我们只需要关注 taro- tarnsformer-wx 即可，在 index.ts 中，通过 ts 和 babel 将编译的结果进⾏分析，将分析到的 AST 结构进⾏处理， 通过不同的 AST 结果执⾏不同的操作。

执⾏完成之后，通过 parseJSXChildren 等解析⽅法，将 jsx 转化为 wxml。