mpvue踩坑记录

最近公司开始做小程序项目，因为之前比较熟悉vue，不太想为小程序专门再去学习他那套语法了，所以找了美团团队开源的mpvue作为解决方案
mpvue具体情况可以看github上面的官方文档：mpvue文档

mpvue原理：大概原理就是他们改动了compile文件，将我们写的vue文件重新编译成wxml等文件，最后的底层实现还是用的小程序语法，mpvue只是能让你使用比较熟悉的vue语法开发而已，所以中间肯定有不少vue和小程序之间的差别需要在开发的时候注意的

下面说说开发过程中会遇到的问题（持续更新中）

页面配置

首先说下页面配置，mpvue的默认页面需要一个xx.vue单页面组件，同时配合上一个main.js文件，也就是说每新建一个页面都需要这样两个文件，而且main.js中的东西基本重复，显得比较冗余

这里推荐一个第三方的插件：mpvue-entry

该插件使得我们新建页面时只需要一个xx.vue文件，并且将页面路由通过一个js文件统一配置（符合vue开发的习惯），不用再放置在main.js中了

特别提醒：该插件的版本请使用0.xx的版本，1.xx的版本与目前的mpvue有冲突

路由转跳

因为小程序与vue的路由机制的差异，所以我们没法使用vue-router来实现路由转跳（因为vue页面转跳后，之前的页面会销毁；小程序在页面转跳后，之前的页面不会被销毁，而是转入后台；）
如果你需要使用类似vue的api来实现（可能有些项目想将已有vue代码直接编译成小程序）
这里推荐一个第三方插件：mpvue-router-patch
不过这个插件只是封装了基本的用法，如果想要使用场景比较复杂可能需要自己封装

生命周期钩子

因为小程序的历史页面不会销毁，所以在生命周期的使用中有需要注意的点

• created：这个钩子是有bug的，所有页面的created函数会在项目加载的时候被一起调用，而且进入页面的时候不会在被调用，所以这个函数基本就不能使用了，用小程序的onLoad钩子代替吧
• mounted：你如果从页面B返回页面A，页面A的mounted钩子不会被触发，因为页面没有被重新加载，如果有需要每次页面展示都要调用的逻辑，使用小程序的onShow代替吧
  其他的钩子暂时还没有尝试过，后续有坑再补上

组件

• 子组件中更新数据后，页面无法进行相应的渲染的情况
  解决方法：在你的data中随便放入一个变量就好了

export default {
    return {
        data () {
            any: ''
        }
    }
}

原因分析：后来发现因为我子组件中的数据数组时从父组件传入的，只在props中接收，data中一直是空的，随后无意中发现只要在data中放入一个变量就能正常更新了；怀疑是不是因为将vue组件编译成小程序组件的过程中，Vue实例的data与小程序Page实例的data同步的时候存在bug

• slot问题
  slot暂时只可以传递固定内容，父组件那边传递变量，子组件中无法进行渲染

// 父组件

    
slot内容

    
{{list.data}}

// 子组件

    

// 页面展示效果

    slot内容
      // 此处无法展示出来

• 使用小程序组件
  使用小程序组件的时候，变量与方法的绑定需要使用vue的方式，比如点击事件，小程序是bindtap="btnClick"，而我们需要使用@click="btnClick"去实现，mpvue文档也有提到；实际尝试下来，基本上方法绑定就把小程序的bind去掉，前面加上@就好

v-for

列表渲染的时候，微信开发者工具中可能会出现双倍的标签，这个据说是开发者工具自身的bug，测试下来暂时不会影响功能

下拉刷新&上拉加载

推荐下拉加载与上拉刷新使用全局的api去实现

export default {
    return {
        data () {}
    },
    onPullDownRefresh () {
        // 下拉刷新
    },
    onReachBottom () {
        // 上拉加载
    }
}

特别注意：

1. 全局的下拉加载需要在配置中设置开启
2. 并且需要在方法中调用wx.stopPullDownRefresh()方法结束下拉动作，不然在真机上面下拉效果无法收起

如果使用scroll-view标签实现，有几个地方需要说明一下：

1. 触发方法需要放到methods中，并且绑定在scroll-view标签上调用
2. 在scroll-view中下拉的时候，无法触发全局的下拉效果，需要自己实现相应的动画（所以建议优先使用全局的方法）
3. 下拉刷新只有在滑动至顶部的时候才会触发，如果你的滚动条已经在标签区域最顶部了，就无法触发下拉方法（这点是最后放弃scroll-view的主要原因，处理起来太麻烦了）

请求

和后端的数据交互，可以使用flyio这个插件：flyio-github
文档在这里：flyio文档
因为该插件兼容多个框架，所以要注意在小程序中的调用方式

import Fly from "flyio/dist/npm/wx"
const fly = new Fly()

特别说明：
这里说下，小程序中所有的传统处理请求的插件，比如axios，$.ajax等等，因为依赖window对象的xmlHttpRequest api，都不可以使用，因为小程序中没有window对象
flyio重写了非浏览器环境的Http Engine，所以实现了多端兼容

拦截器：
开发过程中，经常会需要对请求进行拦截，做统一的处理
flyio一样可以使用拦截器：拦截器文档

配置说明：
需要在后台的可信任域名中配置请求的地址，且只支持https请求
如果是开发调试的情况，可以在开发者工具中，勾选不校验域名，就会绕过检测

数据埋点

使用的腾讯MTA，有天然的小程序支持
下载SDK，根据文档使用就行了：腾讯MTA小程序文档

以上，是我当前使用mpvue的一个阶段总结，后续会持续更新，如果喜欢，不吝点赞，谢谢