小程序开发框架WePY与mpvue

前言

微信小程序原生开发主要有三大元素：框架、组件、API，而小程序开发框架，其主要功能就是将以该框架支持的语法编写的代码编译转换为小程序原生框架所能支持的。

本人曾在生产项目中使用太小程序原生框架开发，后见WePY发展不错，确承认投入生产使用，便在项目设计改版之际，改用WePY编写代码，同时使用代码分包，至于mpvue，只是初步了解，暂未实际使用。如下简单对两个框架作一些对比，以期对选用哪一个框架开发小程序有更多的认识与考量。

WePY

• 一个类Vue开发风格的小程序框架

• 特性：

  • 类Vue开发风格
  • 支持组件化开发
  • 支持NPM
  • 支持Promise, 主动选择是否开启
  • 支持ES2015
  • 编译器：支持less/sass/TypeScript等开发
  • 小程序性能优化
  • 框架大小：24.3k+8.9k
  • wepy-redux数据管理
• 构建与编译工具：wepy-cli，编译配置：wepy.config.js
• 项目目录结构：

├── dist                   小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules           
├── src                    代码编写的目录（该目录为使用WePY后的开发目录）
|   ├── components         WePY组件目录（组件不属于完整页面，仅供完整页面或其余组件引用）
|   |   ├── com_a.wpy      可复用的WePY组件a
|   |   └── com_b.wpy      可复用的WePY组件b
|   ├── pages              WePY页面目录（属于完整页面）
|   |   ├── index.wpy      index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
|   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json           项目的package配置
└── wepy.config.json       项目的编译配置
└── project.config.json    小程序开发工具的配置

WePY原理示意图

请查看其使用手册

![WePY文件编译示意图]()
WePY文件编译示意图

![WePY组件实现示意图]()
WePY组件实现示意图

WePY大概作了这些工做：

• 编译代码为原生框架支持的形式

  • .wpy单文件开发简化文件目录
  • 优化数据绑定语法与性能
  • 优化事件绑定语法与传参
  • 优化代码复用，组件化代替原生的模板
  • 支持less/sass/typescript等，优化开发体验
• 将大部分API promise化
• 支持npm外部依赖，ESLink代码规范等

小结

所以，使用WePY开发小程序，除遵循WePY的语法外，

• 仍可保留原生的开发方式，好比按原生自定义组件的方式开发，WePY会将 .js/.json/.wxml原封不动复制到输出目录下，将.less编译为同名的.wxss
• 对于继承自wepy.app/wepy.page/wepy.component的以.wpy为文件后缀名的，则数据赋值需按照WePY的方式，必要时使用$apply, $nextTick, 而不是用setData, 至于事件绑定语法、API调用，可根据喜爱与需求，保留原生语法 or 使用WePY优化语法

一点经验

• WePY的文档更新会有必定的延迟。

  • 好比1.7.0正式添加$nextTick支持前，是在1.6.1-alphax版本中实现，若需急用，更新到该版本便可，但在文档中是得不到这一信息的，在相关的issue中也不必定会说明要安装哪一个版本；好比wepy-cli 1.7.0版本后，建立项目命令是 wepy init 而不是 wepy new, 输出配置的属性是 target 而不是 output；好比methods中只放视图响应事件，自定义事件需放在其外面，文档是后来才增长说明的。
  • 所以，对于文档中未更新的新的支持，要么耐心等待正式版本发布，要么到相关issue下参与讨论获取最新支持状况；对于文档中亲试有误的地方，多是新版修改了实现；遇到文档未说明的问题，可搜索相关issue.
• 一些新的支持除了wepy-cli需更新版本，项目中的wepy也要相应更新版本，两者版本号通常是对应的，alpha版本除外。
• wepy预留了输出web版本的能力，但至目前为止，还不适合投入生产，毕竟每一个端有每一个端的特性。

mpvue

• 命名意思：mp, nimi program的缩写，mpvue, Vue.js in mini program
• 框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其能够运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

• 特性：

  • 组件化开发
  • 完整Vue.js开发体验，所有.vue单文件组件
  • Vuex数据管理方案
  • webpack构建机制：自定义构建策略、开发阶段hotReload
  • 支持npm
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
  • H5代码转换编译成小程序目标代码能力（可以使用html开发）
• 构建与编译工具：vue-cli，编译配置：build/

• 配套设施

  • mpvue-loader
  • mpvue-webpack-target
  • postcss-mpvue-wxss
  • px2rpx-loader
  • 其余
• 项目目录结构：

├── build                  编译配置
├── config                 编译配置
├── dist                   小程序运行代码目录（该目录由编译生成）
├── node_modules           
├── src                    开发目录
|   ├── components         组件目录
|   |   ├── com_a.vue      组件a
|   |   └── com_b.vue      组件b
|   ├── pages              页面目录
|   |   ├── index          index页面（默认会在src/main.js主入口生成pages配置，路径为pages/index/main）
            ├── index.vue  由其入口文件编译main.js后，生成index/main.js、index/main.wxml和index/main.wxss文件
            ├── main.js     页面默认入口文件（config属性会编译为页面配置文件index/main.json）
|   |   └── other           other页面（默认会在src/main.js主入口生成pages配置，路径为pages/other/main）
            ├── index.vue  由其入口文件编译main.js后，生成other/main.js、other/main.wxml和other/main.wxss文件
            ├── main.js    页面默认入口文件（config属性会编译为页面配置文件other/main.json）
|   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── static                 静态文件，会直接被复制到dist/下
└── package.json           项目的package配置
└── project.config.json    小程序开发工具的配置

一点疑问：

• 页面目录结构上感受不如WePY简洁，每一个页面源代码由两个文件组成，且默认其入口文件命名为main.js, 若换其余命名的话，须要修改编译配置 build/webpack.base.conf.js
• 为何不借鉴小程序原生开发方式，同一页面的文件命名相同，这样在目录上能够根据喜爱选择减小一层；若如此，需修改编译配置pages/下的js文件默认为入口页面，但这样必须保证pages/下的js文件均为页面入口文件；或者增长一个entry/目录，用于存放页面入口文件，但分包又如何支持？
• pages页面路径感受仍是用户本身配置的好，不要自动生成

mpvue原理

• mpvue 保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力
• mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力
• 修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件

小结

• mpvue与WePY不一样，除将代码编译为原生框架所支持的外，还支持使用html标签，所以能够增长代码复用性，比较适合须要Web端、小程序端等多端支持的项目，尤为是已有Vuejs实现的Web端的产品，须要快速开发一个小程序版本的需求场景；且该开发团队更熟悉Vue.js。
• 熟悉mpvue, 能够看看 mpvue-weui: mpvue重写weui

• Web端与小程序如何代码复用？

  • 对于通常的容易转换的html标签，如div/p/ul/li等能够直接使用，让mpvue的编译器帮你完成转换，但对于如picker/checkbox/radio/switch/slider/swiper/progress/icon等这些与html标签不能简单对应的小程序原生组件，mpvue的建议是按小程序原生组件的用法，只不过事件绑定与变量动态赋值的语法要按mpvue的写法（mpvue使用手册有涉及，请别踩坑）
  • 基于上一点，Web端UI复用其实也只是局限于那些容易转换的标签，对于差别化较大的UI,是须要按每一个端的特性作修改的
  • 小程序的组件默认样式是weui风格，所以，小程序一些组件与api功能，好比toast/loading/modal/actionsheet/picker，Web端能够借助weui.js来完成
  • 小程序许多API，Web端可对应使用微信的js-sdk

疑问

mpvue的最主要的功能，是Web端与小程序一致的开发体验，以及尽量地实现UI复用，但据我目前的了解，UI复用也只是一些简单的容易转换的UI，差别化较大的仍是须要各端各自实现的，那么，所谓的一套代码跑多端的目的并无达到，从这个角度来看，mpvue跟WePY的功能实际上是同样的；

因此，mpvue最大的不一样，其实在于彻底的Vuejs开发体验吧？

特性对比

	mpvue	WePY	原生开发
开发风格	单文件组件	类Vue风格	每一个页面由4个同名文件组成
组件化支持	支持，Vue单文件组件	支持，同时可兼容原生自定义组件	模板(template)，自定义组件
外部依赖npm	支持	支持	不支持
原生API Promise化	基本不支持，请求能够选用fly	大部分API均支持，选用	无，为回调函数
优化		优化了setData，npm资源不引用则不会占用体积	setData不可太频繁使用，需控制图片资源大小，第三方资源不用需及时清理
less/sass/es6/typescript/eslint等	均支持	均支持	支持es6
自动化构建	vue-cli, webpack	wepy-cli
数据统一管理	vuex, 选用	wepy-redux, 选用	全局数据globalData, Storage
框架体积	无说明	压缩后 24.3KB, +8.9KB 可以使用 Promise 和 Async Function	无
web H5支持	已上线H5页面转小程序，更改小部分平台差别代码和 webpack配置可运行	可输出web版本，暂不适合投入生产
理想状态：一套代码跑多端	WEB、小程序（微信和支付宝）、Native（借助weex）	Web, 小程序	各端有各端特性，需处理差别化

附

• WePY文档

  • 使用手册
  • API文档
  • github地址

• mpvue文档

  • 介绍
  • 使用手册
  • 项目建构文档
  • 常见问题
  • github地址