最近公司开始做小程序项目,因为之前比较熟悉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-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的一个阶段总结,后续会持续更新,如果喜欢,不吝点赞,谢谢
作者:小pxu
链接:https://www.jianshu.com/p/635714eabcbc