快速了解 mpvue 开发小程序

1、概念

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

2、优化细节

一、实例生命周期

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

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

二、模板语法

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

（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>

三、注意事项

（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)
   }
}

2、使用

经过 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 //启动构建

若是使用vue cli 3先拉取 2.x 模板（详情参考本人博客：https://my.oschina.net/wangnian/blog/2051369）：

而后：安装npm包，运行