小程序02 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

接下来，你只需要启动微信开发者工具，引入项目即可预览到你的第一个mpvue小程序。

Vue实例

生命周期

同Vue，但是不会再小程序onReady后再触发vue mounted周期

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

除了Vue本身的生命周期外，mpvue还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的Page，除特殊情况外，不建议使用小程序的生命周期钩子。

app部分：
- onLaunch，初始化
- onShow，当小程序启动，或从后台进入前台显示
- onHide，当小程序从前台进入后台

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

注意：
1. 不要再属性或者回调函数上使用箭头函数
2. 微信小程序的页面的query参数是通过onLoad获取的，mpvue对此进行了优化，直接通过this.$root.$mp.query获取相应的参数数据，其调用需要在onLoad生命周期触发之后使用，比如onShow等，具体生命周期调用顺序，见下图。

模板语法

1. 不支持v-html指令
2. 不支持部分复杂的JavaScript渲染表达式
3. 不支持在template内使用methods中的函数

class与style绑定

绑定class最佳实践：

<p :class="{ active: isActive }">111p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222p>
<p class="static" :class="[activeClass, errorClass]">333p>
<p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555p>

绑定style最佳实践：

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777p>

从性能考虑，建议不要过度依赖此。

此外还可以用computed方法生成class或者style字符串，插入到页面

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

事件

// 事件映射表，左侧为 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'
}

小程序能力所致，bind和catch事件同时绑定时候，只会触发bind,catch不会被触发，要避免踩坑。

事件修饰符:
- .stop的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的catchEventName失效！
- .prevent可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面
- .capture支持 1.0.9
- .self没有可以判断的标识
- .once也不能做，因为小程序没有removeEventListener, 虽然可以直接在handleProxy中处理，但非常的不优雅，违背了原意，暂不考虑

表单组件

建议开发过程中直接使用 微信小程序：表单组件

组件

Vue组件

有且只能使用单文件组件（.vue 组件）的形式进行支持。

详细的不支持列表：
- 暂不支持在组件引用时，在组件上定义click等原生事件、v-show（可用v-if代替）和 class``style等样式属性(例： 样式是不会生效的)，因为编译到 wxml，小程序不会生成节点，建议写在内部顶级元素上。
- Slot（scoped 暂时还没做支持）
- 动态组件
- 异步组件
- inline-template
- X-Templates
- keep-alive
- transition
- class
- style

小程序组件

mpvue可以支持小程序的原生组件，比如：picker,map等，需要注意的是原生组件上的事件绑定，需要以vue的事件绑定语法来绑定，如bindchange="eventName"事件，需要写成@change="eventName"

最佳实践

1. 精简data数据：冗余数据不要挂在data里
2. 优化长列表性能
   
   1. 避免在v-for中嵌套子组件
   2. wx:if和hidden优化肉眼不可见，所以可以尝试通过样式display展示隐藏
3. 合理使用双向绑定，建议使用v-model.lazy优化性能
4. 谨慎直接使用小程序的API

常见问题

如何获取小程序在pageonLoad时候传递的options

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

如何获取小程序在apponLaunch/onShow时候传递的options

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

如何捕获app的onError

由于onError并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在app的根组件上添加名为onError的回调函数即可。如下：

export default {
  // 只有 app 才会有 onLaunch 的生命周期
  onLaunch() {
    // ...
  },
  // 捕获 app error
  onError(err) {
    console.log(err)
  }
}

参考

• http://mpvue.com/mpvue/