“小程序是一个不需要下载安装就可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下即可打开应用。
也体现了用完即走的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载 ”
——张小龙
这是张小龙用小程序内测时发在朋友圈的一段话对小程序进行了定义。
小程序凭借免安装，即开即用，用完就走等优势，加之小程序基于微信坐拥10亿用户，使得许多商户入驻小程序，它将线上与线下结合极大地促进了新零售的消费模式。总之小程序的发展前景是很可观很值得看好。
目前小程序开发主要有三种方式，原生微信小程序、mpvue和wepy微信小程序开发框架等，下图是三个开发框架的对比
/
微信小程序
mpvue
wepy
语法规范
小程序
开发规范
Vuejs
开发规范
类vue
开发规范
标签集合
小程序
标签
Html标签+
小程序标签
小程序标签
样式规范
wxss
sass,less
postcss
sass,less
slyus
组件化
无组件化
机制
vue.js
组件规范
自定义组件规范
多端复用
不可复用
支持
替换为h5
支持
替换为h5
自动构建
本身无
自动构建
Webpack
构建
框架内置自动构建
上手成本
全新学习
熟悉Vuejs
即可
Vuejs和wepy
集中
数据管理
不支持
使用vuex
实现
不支持
mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于Vue.js 核心，mpvue 修改了 Vue.js 的runtime 和compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。开源当天收获六千七百个star。
mpvue使得同一套代码能同时运行在小程序和web端，能够实现多端复用，如果你已经有vue的开发经验， mpvue开发小程序是一个很不错的选择，无需学习原生的小程序语法就能快速上手。
下面将介绍如何使用mpvue快速开发一个微信小程序
开发环境：nodejs + vue-cli + 微信开发者工具
vue-cli是vue提供的一个官方的脚手架，使用如下命令：vue init mpvue/mpvue-quickstart my-project快速创建一个基于mpvue-quickstart模板项目， 进入my-project执行npm install 和npm run dev后，会生成一个dist目录，其中是小程序相关的代码，最后将my-project目录导入微信开发者工具，一个mpvue项目就启动了。
运行效果如下图所示：
项目代码结构如下图所示：
其中pages目录下面是小程序的页面，每个页面的目录结构都是类似的包含一个vue单文件组件和一个main.js文件，可以很方便的使用组件化的方式开发小程序。
Vue的生命周期和小程序的生命周期在mpvue中是兼容的，但是推荐使用vue生命周期，因为小程序的生命周期在其他端如web端是没有相关生命周期的，如小程序onLaunch可以用vue的created代替，但是有些生命周期是小程序独有的如onPullDownRefresh，这时只能使用小程序自带的生命周期函数。
下面是一个小程序页面的完整代码实例，在pags目录下面建立一个文件夹，包含一个welcome.vue和main.js文件。
运行效果如下图：
更多内容请参考官方文档：http://mpvue.com/mpvue/
12
联系客服
