最近公司开始做小程序项目，因为之前比较熟悉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暂时只可以传递固定内容，父组件那边传递变量，子组件中无法进行渲染
// 父组件
<children>
<div>slot内容<div>
<div>{{list.data}}</div>
</children>
// 子组件
<div>
<slot></slot>
<div>
// 页面展示效果
<view>
<view>slot内容</view>
<view></view> // 此处无法展示出来
</view>
- 使用小程序组件
使用小程序组件的时候，变量与方法的绑定需要使用vue的方式，比如点击事件，小程序是bindtap="btnClick"，而我们需要使用@click="btnClick"去实现，mpvue文档也有提到；实际尝试下来，基本上方法绑定就把小程序的bind去掉，前面加上@就好
v-for
列表渲染的时候，微信开发者工具中可能会出现双倍的标签，这个据说是开发者工具自身的bug，测试下来暂时不会影响功能
下拉刷新&上拉加载
推荐下拉加载与上拉刷新使用全局的api去实现
export default {
return {
data () {}
},
onPullDownRefresh () {
// 下拉刷新
},
onReachBottom () {
// 上拉加载
}
}
特别注意：
- 全局的下拉加载需要在配置中设置开启
- 并且需要在方法中调用
wx.stopPullDownRefresh()方法结束下拉动作，不然在真机上面下拉效果无法收起
如果使用scroll-view标签实现，有几个地方需要说明一下：
- 触发方法需要放到
methods中，并且绑定在scroll-view标签上调用 - 在scroll-view中下拉的时候，无法触发全局的下拉效果，需要自己实现相应的动画（所以建议优先使用全局的方法）
- 下拉刷新只有在滑动至顶部的时候才会触发，如果你的滚动条已经在标签区域最顶部了，就无法触发下拉方法（这点是最后放弃scroll-view的主要原因，处理起来太麻烦了）
请求
和后端的数据交互，可以使用flyio这个插件：flyio
因为该插件兼容多个框架，所以要注意在小程序中的调用方式
import Fly from "flyio/dist/npm/wx"
const fly = new Fly()
暂时发现只能请求小程序配置过的域名下的接口
具体的情况等开始接口调试时候再更新
以上，是我当前使用mpvue的一个阶段总结，后续会持续更新，如果喜欢，不吝点赞，谢谢😀
网友评论