mpvue

mpvue是一个使用 Vue.js 开发小程序的前端框架。

一、主要特性：

• 彻底的组件化开发能力：提高代码复用性
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

 

二、快速开始：

环境先决条件：

• node > v8.9.0
• npm > 5.6.0

1、需要全局安装 vue-cli

npm install --global vue-cli@2.9  // 官方示例，但无法完成（失败）
npm install -g @vue/cli-init    // 最终成功命令（推荐官方示例失败时使用）

2、创建一个基于 mpvue-quickstart 模板的项目：

vue init mpvue/mpvue-quickstart <项目名称>

接着是一系列配置请求。。。

3、安装依赖，运行

cd <项目名称>
npm install
npm run dev

4、开发者工具中导入小程序项目

以上命令执行后在根目录多了一个dist文件夹，该文件夹存放编译后的文件，在文件中可以看到有一个wx文件夹，该文件夹为微信小程序内容，可在微信开发者工具中导入项目预览。

我们知道，mpvue是多端开发的，即可以编译到多平台小程序，如：支付宝、百度、今日头条。

那么为什么只编译了微信的呢？我们可以从package.json中文件看到：

"scripts": {
    "dev:wx": "node build/dev-server.js wx",
    "start:wx": "npm run dev:wx",
    "build:wx": "node build/build.js wx",
    "dev:swan": "node build/dev-server.js swan",
    "start:swan": "npm run dev:swan",
    "build:swan": "node build/build.js swan",
    "dev:tt": "node build/dev-server.js tt",
    "start:tt": "npm run dev:tt",
    "build:tt": "node build/build.js tt",
    "dev:my": "node build/dev-server.js my",
    "start:my": "npm run dev:my",
    "build:my": "node build/build.js my",
    "dev": "node build/dev-server.js wx",
    "start": "npm run dev",
    "build": "node build/build.js wx",
    "lint": "eslint --ext .js,.vue src"
  },

配置中可以看到，执行 npm run dev 编译的是wx,我们如果想要运行编译其他平台的可以通过命令指定，如：

npm run dev:my   // 支付宝
npm run dev:swan  // 百度
npm run dev:tt   // 今日头条

打包发行：

npm run build:my   // 支付宝
npm run build:swan  // 百度
npm run build:tt   // 今日头条

 

三、生命周期：

1、除了 mounted 在小程序的 onReady() 后触发，其他与 Vue 一致。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed

2、mpvue同时支持小程序的 生命周期：

app 部分：

• onLaunch，初始化
• onShow，当小程序启动，或从后台进入前台显示
• onHide，当小程序从前台进入后台

page 部分：

• onLoad，监听页面加载
• onShow，监听页面显示
• onReady，监听页面初次渲染完成
• onHide，监听页面隐藏
• onUnload，监听页面卸载
• onPullDownRefresh，监听用户下拉动作
• onReachBottom，页面上拉触底事件的处理函数
• onShareAppMessage，用户点击右上角分享
• onPageScroll，页面滚动
• onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）

 

四、API

小程序api调用前缀，如：微信的 wx.showToast()、支付宝的 my.showToast()，在mpvue中统一以 mpvue 代替。如：mpvue.showToast()

 

五、注意（与Vue官方文档的差异）

1、模板语法

不支持 v-html，小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。

2、不支持复杂的 JavaScript 表达式，如：

list.split()

建议使用 computed

3、不支持函数：

不支持在 template 内使用 methods 中的函数

4、暂不支持在组件上使用 Class 与 Style 绑定

5、列表渲染必须有索引，示例如下：

<template>
    <ul v-for="(item, index) in list">
        <li v-for="(item2, itemIndex) in item">
            {{item2.value}}
        </li>
    </ul>
</template>

6、表单组件

 表单组件可以直接使用微信小程序的组件，如：picker、radio。

7、小程序 page onLoad() 传递数据

mpvue 通过 this.$root.$mp.query 获取小程序中的 onLoad() 中可接受的 options数据。

8、小程序 app onLaunch/onShow() 传递数据

mpvue 通过 this.$root.$mp.appOptions 获取小程序 app onLaunch/onShow() 传递的数据。

 

tips：mpvue 几乎与 Vue 官方一致，所以此处仅记录不同处。

 

 

参考官网文档：http://mpvue.com/

注：个人笔记，仅供参考，请参考官方文档。