小程序原理

• 使用两个线程：保证平台安全性，不能让开发者控制 render 线程，控制 render 线程将会造成小程序平台方管控困难
• worker线程： 用户控制
  • 响应 render 线程的事件，并执行小程序业务逻辑。
  • 准备好数据，通过 setData 传到 page 中，由 page 进行渲染。
• render线程：接收数据渲染到页面

TARO

• 官网

  https://taro-ui.jd.com/

• 特点

  • 编译时转换

  • React vue …

  • 一套组件可以在 微信小程序，支付宝小程序，百度小程序，H5 多端适配运行

• 创建项目

  # 使用 npm 安装 CLI
  $ npm install -g @tarojs/cli
  # OR 使用 yarn 安装 CLI
  $ yarn global add @tarojs/cli
  # OR 安装了 cnpm，使用 cnpm 安装 CLI
  $ cnpm install -g @tarojs/cli
  

Remax

• 官网

• 特点

  • 运行时转换:worker 线程维护一棵 vdom tree，然后同步到 render 线程通过 w|axml 来进行渲染。

  • react开发

  • 多平台支持：支持阿里程序、微信小程序(QQ小程序)、头条小程序以及 Web 应用的开发。

• 创建项目

  npx create-remax-app my-app
  cd my-app && npm install
  npm run dev <platform> # 跨平台，如：要在阿里小程序环境运行，则 npm run dev ali
  

  • 案例https://github.com/remaxjs/awesome-remax

WebPY

• 官网

• 特点

  • 类似Vue开发
  • 腾讯出品：小程序最早的框架之一

• 创建项目

  $ npm install @wepy/cli -g # 全局安装 WePY CLI 工具
  $ wepy init standard myproj # 使用 standard 模板初始化项目
  $ cd myproj # 进入到项目目录
  $ npm install # 安装项目依赖包
  $ npm run dev # 监听并且编译项目
  

  • 案例https://github.com/aben1188/awesome-wepy

Kbone

• 特点
  • 运行时转换:worker 线程维护一棵 vdom tree，然后同步到 render 线程通过 w|axml 来进行渲染。

uniapp

参考：小程序多平台同构方案分析-kbone 与 remax