微信小程序原生开发 和 wepy 、 mpvue 对比

微信小程序原生开发 和 wepy 、 mpvue 对比

参考资料1

参考资料2

三者的开发文档以及介绍

• 原生开发小程序文档：点此进入
• wepy开发文档：点此进入
  • github地址
• mpvue开发文档：点此进入
  • github地址

三者简单的对比：

以下简单概括三者区别

	微信小程序	mpvue	wepy
语法规范	小程序开发规范	VueJs开发规范	类Vue开发规范
标签集合	小程序标签	html标签+小程序标签	小程序标签
样式标签	wxss	sass,less,postcss	sall,less,styus
组件化	无组件化机制	VueJs组件规范	自定义组件规范
多端服用	不可复用	支持转换为H5	支持转换为H5
自动构建	本身无自动构建	webpack构建	框架内自动构建
上手成本	全新学习	熟悉VueJs即可	VueJs和wepy
集中数据管理	不支持	使用Vuex实现	wepy-redux数据管理

小程序支持的是WXML + WxSS + JS这样的组合，所以，wepy和mpvue都是将文件构建到dist目录，转换为小程序支持的文件类型，然后将微信开发者工具指向dist目录下，进行调式开发的，并且两者都提供了热更新。

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大概做了这些工作：

• 编译代码为原生框架支持的形式
  • .wpy单文件开发简化文件目录
  • 优化数据绑定语法与性能
  • 优化时间绑定语法与性能
  • 优化代码复用，组件化代理原生的模板
  • 支持less/sass/typescript等，优化开发体验
• 将大部分API promise化
• 支持npm外部依赖，ESLink代码规范等

小结

因此，使用WePY开发小程序，出遵循WePY的语法外，

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

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
  • movue-webpack-target
  • postcss-movue-wxss
  • px2rpx-loader
  • 其他

• 项目目录结构

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

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:movue重写weui
• web端与小程序如何代码复用？
  • 对于一般的容易转化的html标签，如div/p/ul/li等可以直接适应，让mpvue的编译器帮你完成转换，但对于如picker/checkbox/radio/switch/slider/progress/icon等这些与html标签不能简单对应的小程序原生组件，mpvue的建议是按小程序原生组件的用法，只不过事件绑定与变量动态赋值的语法要按mpvue的写法(mpvue使用手册有涉及，请别踩坑)
  • 基于上一点，Web端UI复用其实也只是局限于那些容易转换的标签，对于差异化较大的UI是需要按每个端的特性做修改的
  • 小程序的组件默认样式是weui风格，因此小程序一些组件与api功能，比如toast/loading/modal/actionsheet/picker，WEb端可以截住weui.js来完成
  • 小程序许多API，Web端可对应使用微信的js-sdk

特性对比

	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
Web H5支持	已上线H5页面转小程序，更改小部分平台差异代码和webpack配置可运行	可输出web版本，暂不适合投入生产	不支持