mpvue采坑事项(一)



  • 在最近的两个月内,我们小组开发了一款名为《帮芒校园》的小程序,其前端代码框架是使用mpvue。在本文中,我将会简要说一说在使用mpvue来开发小程序是的几个坑,帮助大家。

    使用mpvue来实现小程序前端的流程:

    1. 先在vscode中安装vue-cli脚手架以及对mpvue的相关配置,下载《微信web开发者工具》;
    2. 在vscode中编写前端代码;
    3. 在控制台中输入npm run dev在本地文件夹中生成dist的相关文件,小程序的代码就在dist/wx/中;
    4. 打开《微信web开发者工具》,找到wx文件夹,打开测试

    在实现上述流程后,就可以在《微信web开发者工具》上面跑了。由此看出mpvue的功能就是将vue转化为小程序原生语言,再在上面跑。我们应该都清楚,对于工具翻译出来的原生语言,远不及直接采用原生语言运行的快,并且在转化过程中还会遇到许许多多的问题。开头谈了这么多,我现在来数落一些现在发现的一些mpvue的坑。

    • 生命周期钩子
      因为小程序的历史页面不会销毁,所以在生命周期的使用中有需要注意的点
      mpvue中的created不是按需加载,而是一次性把所有页面的created都加载。在vue中,created是按需加载,当我们进入某个页面,才会加载当前的created,在mpvue中,所有页面的created都是在页面渲染的一开始都一起加载出来
      created:这个钩子是有bug的,所有页面的created函数会在项目加载的时候被一起调用,而且进入页面的时候不会在被调用,所以这个函数基本就不能使用了,用小程序的onLoad钩子代替吧
      mounted:你如果从页面B返回页面A,页面A的mounted钩子不会被触发,因为页面没有被重新加载,如果有需要每次页面展示都要调用的逻辑,使用小程序的onShow代替吧
      解决方法:使用mounted生命周期
      弊端:小程序生命周期的onLoad,用户进入B页面,会触发onLoad,然后返回A页面,再进入B页面,不会触发onLoad,而mounted是用户每次进入页面, 都会执行,无论是否点击返回,反正各有利弊吧

    • 新增页面
      新增页面需要npm run build。因为 webpack 编译的文件是由配置的 entry 决定的,新增的页面并没有添加进 entry,所以需要手动 npm run dev 一下,考虑不是高频操作,所以还可以忍受。

    • html元素数组遍历中出现 should hava explicit keys 错误
      在数组的遍历中,一定要加上key,不然会一直报错,很烦的。
      正常的代码:<div v-for="(value,index) in imglise" :key="index">

    • 尺寸适配
      在<sytle>标签中书写的px或是rpx都会编译成rpx
      但是在元素中直接插入style内联样式则不会编译rpx为px,那么就会有显示尺寸上就有问题


 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

Looks like your connection to Dian was lost, please wait while we try to reconnect.