关于mpvue的开发指南(暗坑无数)

我大概是从2018年开始开发小程序,原生开发,wepy开发,mpvue,uni-app开发到后面的云开发,
weUI,vant UI小程序的的大厂框架基本都上手用过,虽说不上是技术一流,经验老道也算得上了,
去年双十一写了篇小程序开发总结,到了今年又快双十一了,我。。。还是单身

首先在开始这篇博客之前,希望大家已经对小程序API有个较为清楚的了解,最好有实际开发经验,同时对于VUE的语法也比较熟悉,那么我相信这篇博客至少在刚开发mpvue中能帮助不少

  • 页面跳转

    前一篇博客,我也提到了mpvue中支持小程序所有的API,如果大家熟悉小程序api的页面跳转的方法,无非是(wx.navigateTo\wx.redirectTo\switchTab),分别对应跳转非tabBar的页面,没有返回的页面,tabBar的页面。
    淡然既然导航篇特别提出跳转篇,也是考虑到更加熟悉vue语法的童鞋们,在项目搭建完成后,我们还需要安装依赖

    npm i mpvue-router-patch
    

    这是在 mpvue 中使用 vue-router 兼容的路由写法,具体的安装使用方法参见一下网址:
    https://github.com/F-loat/mpvue-router-patch

    我们在小程序只需要做个微调即可

    // 字符串
    router.push('/pages/news/detail')
    
    // 对象
    router.push({ path: '/pages/news/detail' })
    
    // 带查询参数,变成 /pages/news/detail?id=1
    router.push({ path: '/pages/news/detail', query: { id: 1 } })
    
    // 切换至 tabBar 页面
    router.push({ path: '/pages/news/list', isTab: true })
    
    // 重启至某页面,无需指定是否为 tabBar 页面,但 tabBar 页面无法携带参数
    router.push({ path: '/pages/news/list', reLaunch: true })
    
  • 获取页面跳转的值

    讲完了了页面跳转,自然要讲一下,我们一般页面跳转都是要传值的,那我们如何获取页面跳转的值呢?下面介绍的两种方法都可使用

    1、延用小程序的方式(必须在onload或者onshow周期中使用)

      onShow (options) {
    
          let id = options.id
    
      }
    

    2、使用vue的方式获取页面的原始数据

      this.$root.$mp.query
    
  • 使用vant组件

    我在前篇博客中提到了vant UI组件中的导入方法,但是在vant-weapp的官方文档中的具体用法是使用wxml的语法,所以我们不能直接照搬使用:

    1、数据的绑定方式

    原生小程序,在标签内绑定数据的方式

    value="{{value}}"
    

    由于我们使用的事mpvue,所以我们需要改成

    v-bind:value="value"
    //或者
    :value="value"
    

    2、事件的绑定方式

    原生小程序使用方式

    bind:click="onClick"
    

    mpvue 使用方式

    @click="onClick"
    

    3、交互组件的引用

    vant中像notify这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json中引入;另一个是方法的引入,需要在vue文件中import引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。

    import Notify from '@/../static/vant/notify/notify' //@是mpvue的一个别名,指向src目录
    

    4、获取 event 事件对象中值

    值得注意的是,mpvue中获取event值与原生小程序有所不同。举例:

    onChange(event){ // 获取表单组件filed的值
    console.log(event.mp.detail) // 注意加入mp
    }
    

    5、监听方式的变更
    mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。

    可以改成驼峰式的监听名。

    eg: 我在field组件中就遇到这个问题,我的做法是:

    // static/vant/field/index.js
    
    this.$emit('click-icon');
    
    // 修改为:
    
    this.$emit('clickIcon');
    
  • 从vant 到 vant-weapp的迁移改变

    1、v-model

    看多mpvue的童鞋们都知道,在小程序里所有的 BOM/DOM 都不能用,在vue迁移当中v-modal的命令全部需要改成监听时间通过监听输入来绑定value值

    2、v-html
    如果以上问题不是最痛疼的,那么关于富文本解析一定是大家要注意的了,之前小程序中解析富文本我们需要安装插件wxParse来解析,现在我们并不需要这么麻烦,小程序API给出了最佳的解决方案并不需要我们安装其他的多余的插件

    <rich-text :nodes="goods.product_detail_template.header"></rich-text>
    

    如此即可在小程序中解析我们嵌有DOM Nodes的段落

  • 报错的处理方式

    一般的报错报错都可以通过一下流程处理。

    1、是否打开了微信开发者工具中的ES6转ES5功能。
    2、仔细检查代码和比对文档,看看是否有使用不当的地方。
    3、重新编译npm run dev或删掉dist目录重新npm run dev
    4、重启或更新微信开发者工具。

    在添加UI组件后,报页面丢失,TypeError: Cannot read property 'index' of undefined
    1、新建的页面,没有重新打包
    2、添加的组件路径有问题,路径错误或者是重复添加
    很多使用mpvue的开发者必然也对vue的语法熟悉且很可能已经是vue + vant的技术栈的选择者,为了节省开发的时间来提高效率,需要将项目区做个迁移,在此之前,就要了解vue 转移到 mpvue 应该做出那些改变

空口无凭,有下图为证