快速了解 mpvue 开发小程序

一、概念

mpvue是 美团修改了 vue.js的 runtime和 compiler使其可以运行在小程序环境中，从而引入了整套 Vue.js开发体验的小程序框架。

 

二、优化细节

1、实例生命周期

不同于vue的是我们会在小程序 onReady 后，再去触发 vue mounted 生命周期

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

 

2、模板语法

几乎全支持 官方文档：模板语法，但需要注意的是：

（1）组件：由于要预编译出 wxml，只能使用单文件组件（.vue 组件）的形式进行支持，不支持：动态组件，异步组件，自定义 render，inline-template，X-Templates，<script type="text/x-template">字符串模版，Slot（scoped 暂时还没做支持）。

（2）不要在选项属性或回调上使用箭头函数，.eg：

 //箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())

（3） 页面内可以通过 this.$root.$mp.query（需要在 onLoad生命周期触发之后使用）获取小程序在 page onLoad 时候传递的 options（如：query参数等）。组件内通过** this.$root.$mp.appOptions**获取小程序在 app的 onLaunch/onShow 时候传递的 options，.eg：

  //pages/list/index.vue
methods:{
      toNewsDetail(item) {
        let url = `/pages/newsDetail/main?newsId=${item.id}`;
        wx.navigateTo({url})
      }
}

//pages/detail/index.vue

  onReady() {
      this.getNewsDetail({
        id: this.$root.$mp.query.newsId//获取URL传来的参数
      });
  },

（4）mpvue 可以支持小程序的原生组件，建议开发过程中直接使用 微信小程序：表单组件，.eg：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange"><!--需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"-->
    <view class="picker">
      当前选择: {{date}}
    </view>
</picker>

（5）列表渲染，嵌套列表渲染，必须指定不同的索引。示例：

<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>

（6）事件处理器

列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>bind 和 catch 事件（.stop阻止冒泡）同时绑定时，只触发 bind ,catch 不会被触发。小程序里没有键盘事件(键盘修饰符)，默认(.prevent)事件，removeEventListener(.once)事件，.self没有可以判断的标识.capture（ 1.0.9支持）使用捕获

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

（7）因为编译到 wxml，小程序不会生成节点，暂不支持在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class、 style 等样式属性。

<!--不生效，建议写在内部顶级元素上-->
<card class="class-name"> </card>
<card :style="{height:10+'px'}"> </card>
<card @click="clickFun"> </card>
<card v-show="showIf"> </card>//可用 v-if 代替

（8）不支持在 template 内使用 部分复杂的 JavaScript 渲染表达式，methods 中的函数，过滤器，v-html指令。我们会把 template 中的 {{}}双花括号的部分，直接编码到 wxml 文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === > < [] .，剩下的还待完善。

<!-- 这种就不支持，建议写 computed -->
<p>{{ message.split('').reverse().join('') }}</p>

<!-- 但写在 @event 里面的表达式是都支持的，因为这部分的计算放在了 vdom 里面 -->
<ul>
    <li v-for="item in list">
        <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
    </li>
</ul>

（9）不支持keep-alive、transition

（10）不支持 官方文档：Class 与 Style 绑定中的 classObject和 styleObject语法。可以用 computed 方法生成 class 或者 style 字符串，从性能考虑，建议不要过度使用

<template>
    <!-- 支持 -->
    <div class="container" :class="computedClassStr"></div>
    <div class="container" :class="{active: isActive}"></div>

    <!-- 不支持 -->
    <div class="container" :class="computedClassObject"></div>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

3、注意事项

（1）开启单个页面的“下拉刷新”，你需要在该页面文件夹中建一个.json文件，在.json文件中配置

{
  "enablePullDownRefresh":true
}

（2）如果你先全局注册store，你需要先在src/main里添加在注册到vue实例中：

Vue.prototype.$store = store

（3）底部导航的图片你需要放在static文件夹下，否则不会正常显示

（3）精简 data 数据。冗余数据不要挂在 data 里，所有在 data/props/computed 中的数据，每次变更都会从微信小程序的 JSCore 进程，通过 setData 序列化成字符串后发送到 JSRender 进程。所以，如果你的数据量巨大的时候，会导致页面非常卡顿。

（4） 优化长列表性能

避免在 v-for 中嵌套子组件，这样可以优化大部分部分 setData 时的冗余数据。通过实践发现 wx:if 和 hidden 的优化肉眼不可见，所以或许可以试试直接通过样式 display 来展示和隐藏。

（5）建议使用 v-model.lazy绑定方式以优化性能，v-model在老基础库下输入框输入时可能存在光标重设的问题。

（6）如果你有小程序和H5复用代码的需要，业务代码需要保持对 WEB Vue.js的兼容性，建议不要在代码中直接调用小程序API，更好的选择是通过桥接适配层屏蔽两端差异。

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

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

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

 

二、使用

通过 Vue.js命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：

npm install --global vue-cli//全局安装vue-cli，如果你已安装@vue/cli，你需要拉取2.x模板：npm install -g @vue/cli-int
vue init mpvue/mpvue-quickstart <project name>//创建一个基于 mpvue-quickstart 模板的新项目
cd my-project //进入项目目录
npm install //安装依赖
npm run dev //启动构建