×

mpvue踩坑记录

96
小pxu
2018.05.13 15:07* 字数 1718

最近公司开始做小程序项目,因为之前比较熟悉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 () {
        // 上拉加载
    }
}

特别注意:

  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的一个阶段总结,后续会持续更新,如果喜欢,不吝点赞,谢谢😀

前端技术
Web note ad 1