小程序框架
### 小程序框架
[小程序框架原理](https://www.jianshu.com/p/b50ed8fc49d6)，目前比较流行的小程序开发框架主要有 [WePY](https://tencent.github.io/wepy/)、[mpvue](https://github.com/Meituan-Dianping/mpvue)、[Taro](https://github.com/NervJS/taro) 三种。各自的安装使用见[WePY安装](https://tencent.github.io/wepy/document.html#/), [mpvue安装](http://mpvue.com/mpvue/quickstart/),[taro安装](https://nervjs.github.io/taro/docs/GETTING-STARTED.html)。
#### 一. [WePY](https://tencent.github.io/wepy/)
##### 介绍
WePY （[github 地址请参见](https://github.com/Tencent/wepy)）(发音: /'wepi/)是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序(类Vue开发风格)。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。相关[开源的组件](https://github.com/aben1188/awesome-wepy)
##### 安装
安装node相关环境（npm会自动安装），全局安装wepy-cli
```
npm install wepy-cli -g
```
##### 使用
直接使用命令的方式创建
```
wepy init standard wepyAppTest
cd wepyAppTest
npm install
# 开启实时编译
wepy build --watch
```
#### 二. [mpvue](http://mpvue.com)
##### 介绍
mpvue （[github 地址请参见](https://github.com/Meituan-Dianping/mpvue)）是一个使用 Vue.js 开发小程序的前端框架(mini program vue.js)。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验
##### 安装
安装node相关环境（npm会自动安装），全局安装vue-cli
```
# 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 全局安装 vue-cli
# 一般是要 sudo 权限的
npm install --global vue-cli
```
##### 使用
直接使用命令的方式创建
```
vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev
```
#### 三. [Taro](https://taro.aotu.io)
##### 介绍
Taro（[github 地址请参见](https://github.com/NervJS/taro)） 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN 等）运行的代码。相关[资料汇总](https://github.com/NervJS/awesome-taro)
##### 安装
安装node相关环境（npm会自动安装），全局安装taro
```
npm install -g @tarojs/cli
```
##### 使用
直接使用命令的方式创建
```
taro init taroTest
```
选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。
微信小程序编译预览及打包（去掉 --watch 将不会监听文件修改，并会对代码进行压缩打包）
```
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
```
`注意`：Taro框架原理是将类react的语法编写小程序，最终经过编译后会生成一个dist编译文件（翻译成原生微信小程序），同时微信原生小程序也可以反编成Taro。
#### 四. WePY,mpvue,Taro三者对比
| - | 原生开发 | WePY | mpvue | Taro |
|:-------------:|:---------------:|:-------------:|:-------------:|:-------------:|
| 提供者 | 微信 | 腾讯开源 |美团开源 |京东凹凸实验室开源 |
| 流行程度 | - | 15.6k star |14.9k star |12.4k star |
| 开发方式 | JS,JSON,WXML,WXSS | 类 Vue 开发，wpy 文件 |Vue 开发方式 |React 开发方式 |
| 是否支持 NPM 包 | 非常规支持 | 支持 |支持 |支持 |
| CSS 预编译器支持 | 不支持 | 支持 |支持 |支持 |
| ES6+ 特性支持 | 开发者工具支持 | 支持 |支持 |支持 |
| 状态管理 | 无 | Redux | Vuex | Redux |
| 生命周期 | 小程序生命周期 | 小程序生命周期 |Vue 的生命周期 |React 的生命周期 |
| 组件支持 | - | - |-|[Taro UI](https://taro-ui.aotu.io/#/) |
#### 参考
1. Taro 多端开发实现原理与项目实战[微信小程序开发入门与技术选型](https://juejin.im/book/5b73a131f265da28065fb1cd/section/5b73e92ce51d456680600665)
2. [小程序第三方框架对比 ( wepy / mpvue / taro )](http://www.cnblogs.com/Smiled/p/9806781.html)
