小程序开发框架mpvue开发文档

什么是mpvue

mpvue 继承自 Vue.js，其技术规范和语法特点与 Vue.js 保持一致。mpvue是一个微信小程序开发框架，他的语法特点和vue是一样的，除了一些微信小程序官方api以外。

如果会vue的宝宝们可能学的快一些。

1.如何快速搭建mpvue项目

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install

# 启动构建
npm run dev

#打包项目
npm run build

项目就跑起来了，这个时候，我们打开微信开发者工具，选择小程序，然后新建一个，项目目录填 我们项目目录下的dist目录 test-wxapp/dist,就可以看到效果了

看了以后，是不是和我们平时创建一个不饿项目基本一样啊

2.项目结构

项目结构主要和vue一样，下面主要将几个重要的文件。

1. mpvue的src目录下和vue一样，也有一个App.vue根组件，App.vue根组件只是一个结构，无具体内容，根组件有对应的main.js文件用于渲染App.vue根组件，即引入App.vue并作为Vue构造函数创建Vue实例，然后mount，还有一个app.json文件，即页面全局配置文件，用于页面的注册、tabBar的注册、全局window样式设置，如:

// app.json 相当于小程序的全局配置，用来配置pages，tabBar等等

{
  "pages": [
    "pages/index/main"
  ],
  "tabBar": {
    ......
  },
  "window": {
    "backgroundColor":"#00BFFF",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "测试",
    "navigationBarTextStyle": "black"
  }
}

// main.js 小程序的入口文件

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

2. mpvue中定义的页面都放在src目录下的pages目录里面，一个页面对应一个文件夹，每个页面文件夹内需要有一个.vue文件和main.js文件，main.js主要做的就是，引入当前页面对应的.vue，然后作为Vue构造函数的参数创建Vue实例并mount，并且main.js的名称不能改变，只能是main。

// page种的main.js

import Vue from 'vue'
import App from './index'

// add this to handle exception
Vue.config.errorHandler = function (err) {
  if (console && console.error) {
    console.error(err)
  }
}

const app = new Vue(App)
app.$mount()

当然，没个pages目录里都可以有自己的json文件，可以设置只正对于当前页面的导航样式，文字等。

在mpvue中，一个页面中的.vue文件的名字虽然可以任意，但是.js和.json文件名字是固定为main的，通常我们.vue文件也是固定使用index.vue，所有一个页面中通常固定包含index.vue、main.js、main.json，通过外层的文件夹来区分不同的页面，而原生小程序中，也是通过外层文件夹来区分不同的页面，但是文件夹中的四个页面的名称可以和外层文件夹相同，也可以不同，但四个文件必须统

3. 每次新增了页面，需要重新启动项目，即重新执行npm run dev.

3.微信小程序基础与常用API

mpvue支持小程序的所有Api。

微信小程序给我们的按钮提供了一些微信开发的能力，其通过给标签添加一个open-type属性，表示要给按钮开放的能力类型，比如getUserInfo，即点击按钮获取用户信息的能力，我们需要在上通过监听getuserinfo事件，mpvue在小程序的基础上进行了封装，需要通过e.mp.detail.userInfo才能获取到用户信息，

页面配置文件

• pages属性，是一个数组，用于定义小程序用到的页面，数组中每一项对应一个页面，即路径+文件名信息，不需要写后缀，在mpvue中所有页面固定使用main，即每个页面下都会有一个main.js，所以在配置pages时，通常为"pages/页面名/main"，位于pages数组第一项表示小程序的初始页面，即小程序运行时显示的页面。

微信小程序设置颜色的时候，只支持十六进制颜色，不支持RGB格式和颜色英文。

• tarBar属性，用于配置窗口底部的tabBar，其属性值为一个对象，主要有color(设置tab未激活状态文字的颜色)、selectedColor(设置tab激活状态的文字颜色)、borderStyle(设置tabBar上边框的颜色，目前只支持black和white)、backgroundColor(设置tab的背景颜色)、list(用于配置tab项，最多可配置5项)，list属性值为一个数组，主要包括text(tab上显示的文字内容)、iconPath(tab处于未激活状态时显示的图标路径)、selectedPath(tab处于激活状态时显示的图标路径)、pagePath(tab被点击时要跳转的页面路径，其属性值为pages中配置的路径)

页面配置配置相对于全局主配置文件来说要简单得多，在页面配置文件中只能配置窗口的样式属性，即只能配置全局配置文件中的window属性中的内容，页面配置文件中配置的内容会覆盖掉全局配置文件中window中相同的配置，以决定当前页面的窗口表现，

小程序页面与Vue生命周期

小程序给页面提供了onLoad(页面加载)、onShow(页面显示，但还未渲染完成)、onReady(页面渲染完成)、onHide(页面隐藏)、onUnload(页面卸载)，mpvue将小程序提供的页面生命周期和vue的生命周期结合在了一起，也就是说使用mpvue开发小程序，可以同时使用小程序的生命周期和vue的生命周期，其顺序为: beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted。即Vue首先实例化然后页面开始加载、显示、渲染，页面渲染完成后Vue实例开始挂载。

但是，我们一般使用vue的生命周期，除了特殊情况以外可以使用小程序的生命周期，大多数情况都使用vue的生命周期。

导航到某个页面

导航到某个页面，就是太专到某个页面，使用的是先程序的API，它会保留当前页面，左上角会自带一个退回按钮，点击可以返回上一个页面，和浏览器的返回一样，但是这个API不能够跳转tabbar，其使用的是 wx.navigateTo({})

wx.navigateTo({
    url: "../myLesson/main" // 导航到我的课程页面，目标页面自带返回按钮，点击可返回之前的页面,找的必须是main.js文件
});

还有更多api，例如动态改变导航栏标题，本地缓存，轮播图插件等等，可以阅读微信开放文档

4.事件处理

几乎全部支持vue的事件处理 官方文档：事件处理

// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

在 input 和 textarea 中 change 事件会被转为 blur 事件。

5.表单控件绑定

几乎全部支持vue表单控件，建议开发中直接使用微信小程序：表单组件

1. 使用原生组件时，原生bindchange无法触发，无法获取选择值

 <view class="section">
   <view class="section__title">省市区选择器</view>
   <picker mode="region" bindchange="bindRegionChange" :value="region" :custom-item="customItem">
     <view class="picker">
       当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
     </view>
   </picker>
 </view>

2. 使用select时，默认显示被修改，无法正常select

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

这种情况，select 兼容不是很好，请直接使用 picker 组件。

<template>
  <div>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view class="picker">
        当前选择：{{array[index]}}
      </view>
    </picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      array: ['A', 'B', 'C']
    }
  },
  methods: {
    bindPickerChange (e) {
      console.log(e)
    }
  }
}

</script>

表单元素 radio 用 radio-group 组件进行代替

<template>
  <div>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked"/> {{item.value}}
      </label>
    </radio-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {name: 'USA', value: '美国'},
        {name: 'CHN', value: '中国', checked: 'true'},
        {name: 'BRA', value: '巴西'},
        {name: 'JPN', value: '日本'},
        {name: 'ENG', value: '英国'},
        {name: 'TUR', value: '法国'}
      ]
    }
  },
  methods: {
    radioChange (e) {
      console.log('radio发生change事件，携带value值为：', e.target.value)
    }
  }
}

</script>

6.常见问题

1. 如何获取小程序在 跳转页面传递的 options ？

在所有 页面 的组件内可以通过 this.$mp.query 进行获取。例如：

<script>
  export default {
    props: ['item', 'index'],
    methods: {
      toDetail: function() {
        wx.navigateTo({
          url: '/pages/detail/main?index=' + this.index
        })
      }
    }
  }
</script>

获取：

beforeMount() {
    let index = this.$mp.query.index
    console.log(index)
},

2. 如何获取小程序在 app onLaunch/onShow 时候传递的 options ?

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

3. 如何捕获 app 的 onError ?

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },

   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}

今天先说到这里，如果文章对你有帮助，点个赞，多多提意见。

mpvue实例，请点击GitHub拉取完整代码