mpvue开发微信小程序踩坑笔记

1. 在列表page点击进入详情页面时，用mounted()方法 去获取数据去展示数据，但是有些数据需要在onShow()方法中调用，因为mpvue框架问题，所以在返回的时候如果不将data中定义的数据清除的话，再次点击进入详情页面的话，还是会显示第一次进入详情页的数据，可以在methods中写一个初始化数据的方法

  initData() {
    this.videoFlag = false //是否显示视频
    this.classDes = {}
    this.promotionData = {}
    this.activeIndex = 0
    this.classDetailData = null
    this.classId = null
    this.isShow = false
    this.networkType = 'wifi'
    this.classVideoData = {}
 }
复制代码

需要在onUnload()函数中调用这个方法，这样才能保证下次进来会展示新的数据，这个问题只在mpvue框架会出现，在原生小程序中是不会出现的。mpvue的子元素生命周期很混乱，如果我们在频繁的更换页面详情得时候，会出现子元素数据不变缓存的问题，我们需要在onHide()中将传递给子元素的数据重置，然后在onShow()的时候在给赋值就可以了。

2. 在请求数据的时候，我们选用flyio.js来进行数据的请求获取，所以我们会对请求方法进行二次封装，在封装的时候我们会加入一个微信原生提供的loading方法（wx.showLoading()）方法用于在请求接口时的等待显示，使用户体验会更好。这样做在其他请求页面请求接口还好，但是在列表页面下拉加载时，

onPullDownRefresh() {
  this.refreshClassList();
},
refreshClassList() {
  wx.request({
    success: res => {
      ...
      wx.hideLoading();
      wx.stopPullDownRefresh();
    }  
  })
}
复制代码

由于小程序提供下拉刷新方法，所以使用原生的下拉刷新方法，但是下拉回弹的动画总是会过度回弹，导致顶部元素被遮挡，同时多次下拉会有几率触发页面卡下来的bug，通过查找，确认是两个loading共用导致，小程序的下拉刷新有顶部动画效果，所以下拉刷新时不需要做wx.showLoading的提示，最终在封装得请求中去掉了wx.showLoading()方法，在列表页面使用微信自带的下拉loading。

3. 微信小程序在最新版将不再提供默认弹出授权窗口，需要用户去点击触发才能弹出授权窗口，经过商讨，我们决定在添加一个授权页面，在app.vue的onLaunch()方法中判断是否授权，如果没有授权将跳到授权页面，点击按钮进行授权，反之，则继续执行正常操作，这个地方还有一个坑，就是分享出去的页面逻辑里面不要再去判断授权，要不然会弹出两个授权页面。
4. 我们在写组件的时候，往往会用到slot插槽，但是在嵌套组件中使用slot插槽无法正常显示渲染，最终在mpvue的Issues中找到解决办法，要在mpvue@1.0.11，mpvue-template-compiler@1.0.11，mpvue-loader@1.0.13的环境下嵌套组件的slot才可以正常使用。目前已降级到指定版本，暂时没有发现bug。
5. 在项目中有用到城市联级选择的情景，当时选用mpvue-picker插件来开发，因为联动需要循环，第一级或者第二级改变都需要遍历一遍数组，省市可能数据量比较大，然后就出现了卡顿，所以弃用，然后又找到了mpvue-citypicker，这个插件将citypicker单独出来，改变了城市数据结构，没有出现卡顿现象。但是这个插件里面的城市列表跟公司的城市不对应，返回的数据也不是我们想要的。所以我把它的原始数据给替换成了公司所需要的城市数据，并返回业务所需要的数据。考虑到这个小程序是多人开发，然后把这个插件整合了一下，发到了npm包上，供大家下载使用，npm包名为mpvue-citypicker-ht
6. 小程序分享朋友圈功能，首先请求后端生成的小程序码（生成小程序码需要access token，后端生成比较方便），要使用小程序码的图片路径，如果直接使用的话使用canvas是画不上去的，必须要通过wx.downloadFile这个api先把图片下载到本地，拿到临时路径

wx.getImageInfo({
          src: _this.GenerateQrcode,
          success: function(res) {
            const background = '/static/canvas/canvas.png'
            const GenerateQrcode_s = res.path
            console.log(GenerateQrcode_s)
            wx
              .createSelectorQuery()
              .select('.box')
              .boundingClientRect(function(rect) {
                const {
                  user,
                  title,
                  price,
                  teacher,
                  configs1,
                  configs2,
                  content,
                  message
                } = _this.friendCircleParam
                const shareModule = wx.createCanvasContext('shareCanvas')
                const { width, height } = rect
                const canvas_w = width * wx.getSystemInfoSync().windowWidth / 400 // 375
                const canvas_h = height * wx.getSystemInfoSync().windowWidth / 380
                const centerX = canvas_w / 2
                const rpx = _this.rpxchange // rpx

                // 初始化 canvas宽度
                _this.shareCanvasWidth = `width:${canvas_w}px;height:${canvas_h}px;`
                // 绘制背景
                shareModule.drawImage(background, 0, 0, canvas_w, canvas_h)
                // 绘制分享人
                shareModule.setTextAlign('center')
                shareModule.setFontSize(rpx(24))
                shareModule.setFillStyle('#FFFFFF')
                shareModule.fillText(user, centerX, rpx(48 + 24 + 6))
                // 绘制文案
                shareModule.setFontSize(rpx(60))
                shareModule.setFillStyle('#FCE9A7')
                shareModule.fillText(title, centerX, rpx(106 + 36 + 16))
                // 绘制价格
                shareModule.setFontSize(rpx(28))
                shareModule.setFillStyle('#FFFFFF')
                shareModule.fillText(price, centerX, rpx(216 + 28))
                shareModule.setStrokeStyle('#fff')

                shareModule.beginPath();
                shareModule.arc(rpx(210) + rpx(20), rpx(210) + rpx(20), rpx(20), Math.PI, Math.PI * 3 / 2);
                shareModule.lineTo(rpx(200) - rpx(20) + rpx(210), rpx(210));
                shareModule.arc(rpx(200) - rpx(20) + rpx(210), rpx(20) + rpx(210), rpx(20), Math.PI * 3 / 2, Math.PI * 2);
                shareModule.lineTo(rpx(200) + rpx(210), rpx(48) + rpx(210) - rpx(20));
                shareModule.arc(rpx(200) - rpx(20) + rpx(210), rpx(48) - rpx(20) + rpx(210), rpx(20), 0, Math.PI * 1 / 2);
                shareModule.lineTo(rpx(20) + rpx(210), rpx(48) +rpx(210));
                shareModule.arc(rpx(20) + rpx(210), rpx(48) - rpx(20) + rpx(210), rpx(20), Math.PI * 1 / 2, Math.PI);
                shareModule.closePath();
                // shareModule.strokeRect(rpx(220), rpx(200), rpx(200), rpx(20))
                // shareModule.fillText(price, centerX, rpx(220 + 38))
                // 绘制描述
                shareModule.font = `bold ${rpx(36)}px PingFangSC-Semibold`
                shareModule.setFillStyle('#000')
                _this.drawText(
                  shareModule,
                  content,
                  centerX,
                  rpx(340 - 42),
                  canvas_w * 0.9,
                  rpx(50)
                )
                // 绘制老师
                shareModule.font = `normal ${rpx(24)}px PingFangSC-Semibold`
                shareModule.setFillStyle('#888888')
                // shareModule.fillText(teacher, centerX, rpx(410 + 24 + 6))
                _this.drawText(
                  shareModule,
                  teacher,
                  centerX,
                  rpx(410 - 60),
                  canvas_w * 0.7,
                  rpx(30)
                )
                // 绘制中间提示文案
                shareModule.font = `normal ${rpx(26)}px PingFangSC-Semibold`
                shareModule.setFillStyle('#FF6d73')
                shareModule.fillText(configs1, centerX, rpx(450 + 54 + 6))
                shareModule.font = `normal ${rpx(26)}px PingFangSC-Semibold`
                shareModule.setFillStyle('#FF6d73')
                shareModule.fillText(configs2, centerX, rpx(480 + 74 + 6)) shareModule.drawImage(_this.GenerateQrcode, centerX, rpx(584), rpx(252), rpx(250))
                console.log(_this.GenerateQrcode)
                shareModule.drawImage(
                  GenerateQrcode_s,
                  canvas_w * 0.3,
                  rpx(594),
                  rpx(200),
                  rpx(200)
                )
                // 长按识别小程序码，一起省钱！
                shareModule.setFontSize(rpx(26))
                shareModule.setFillStyle('#Afafaf')
                shareModule.fillText(message, centerX, rpx(824 + 28 + 8))
                // line
                shareModule.stroke()
                shareModule.draw()
                wx.hideLoading()
              })
              .exec()
          },
          fail: function(err) {
            wx.hideLoading()
            wx.showToast({
              title: '生成失败，请重新尝试',
              icon: 'none',
              duration: 3000,
              mask: true
            })
          }
        })
复制代码

_this.GenerateQrcode是从后台活动的小程序二维码，如果需要背景图的话，需要在本地保存一张图片当做背景图。切记不能使用线上图片，不起作用。 识别图片跳转到小程序相关页面时，需要在生成图片传递需要的参数，参数要在scene中传递。但是有些页面需要多个参数才可以打开，但是scene中只能传递一个参数，所以我们将参数用一个特殊符号拼接起来，比如

   var par = `${this.$root.$mp.query.activityId}_${
          this.$root.$mp.query.classId
        }_${this.$root.$mp.query.isLive}`
        
        this.GenerateParam = {
          // 小程序二维码参数
          scene: par,
          page: `pages/activityInfo/components/activityDetail`,
          width: 250,
          auto_color: false,
          line_color: { r: '236', g: '66', b: '76' },
          is_hyaline: true
        }
复制代码

在对应的页面

onLoad(options) {
      var that = this
      
      if (options.scene) {
        that.scene = decodeURIComponent(options.scene)
        var arr = that.scene.split('_')
        that.getPara = arr
        console.log('value', arr)
      }
    },
复制代码

用split()方法将参数分割成数组，在去拿对应的参数就可以了

7.mpvue在npm run build的后在ios低版本8， 9中会如下的错：

Page[pages/index/main] not found. May be caused by: 1.forgot to add page route in app.json. 2.Invoking Page{} in async task.

thirdScriptError
sdk uncaught third error
SyntaxError
line:16045,column:0,SynataxError:Unexpected keyword 'const'. Const declarations are not supported in strict mode. Stack:
复制代码

报这个错得原因是因为我们的项目安装了mpvue-wxparse这个插件，因为微信小程序不能像vue一样用v-html解析带有html标签的数据，所以我们安装了这个插件。解决这个报错的方法是在webpack.base.conf.js文件中把

{
        test: /\.js$/,
        include: resolve('src'),
        use: [
          'babel-loader',
          {
            loader: '@f-loat/mpvue-loader',
            options: {
              checkMPEntry: true
            }
          },
        ]
      },
复制代码

替换成

{ 
        test: /\.js$/,
        include: [resolve('src'), resolve('test'), /mpvue-wxparse/], 
        use: [ 
          'babel-loader', 
          { 
            loader: '@f-loat/mpvue-loader',
            options: { 
              checkMPEntry: true 
            } 
          }, 
        ] 
      }
复制代码

就可以成功的解决这个bug了。

8. 真机和模拟器的问题总结

• input 标签中设置为placeholder属性，缩进样式text-indent在模拟器中失效，在真机上可以的，但是value值是不起作用的，只能用padding-left来进行缩进了
• 测试过程中，域名为http格式的请求，在模拟器下可以正常运行，在真机中必须打开调试才能看到效果
• 由于video组件调用的是客户端创建的原生组件，它的层级是最高的，模拟器中不会出现这个问题，而真机中会覆盖其他的内容，要使用对应的cover-view标签或者cover-image标签

9. 定时器问题 在有些页面需要进行倒计时效果，再离开页面的时候一定要把定时器清除干净，不然会影响性能，再次进入页面的时候时间也会乱跳

10.页面连续点击之后跳转多次详情页面问题 在使用wx.navigateTo()方法跳转时，会有complete这个回调方法， 可以设置一个flag，默认为true,在点击的时候，将flag设置为false，然后在这个complete这个回调里再将flag设置为true，这样可以有效避免快速连续点击跳转多次详情页问题。还有一种是需要在点击的时候调接口做判断是否跳转，这种的情况用上述方法是不能解决的，目前想到的解决办法就是在调接口的时候加个loading，mark设置尾true，mark属性就是为了显示透明蒙层，防止触摸穿透

11.同路由跳转问题 在同一个路由下跳转，例如课程详情页跳转到另一个课程详情页时，在点击返回按钮时，数据还是停留在第二个详情页，这是mpvue存留的bug，暂时没人修复，只能通过以下代码去解决。 在utils里创建一个initData.js的文件，内容为：

const pageDatas = {}

export default {
  install(_Vue) {
    // 添加全局方法或属性
    _Vue.prototype.$isPage = function isPage() {
      return this.$mp && this.$mp.mpType === 'page'
    }

    _Vue.prototype.$pageId = function pageId() {
      return this.$isPage() ? this.$mp.page.__wxWebviewId__ : null
    }

    // 注入组件
    _Vue.mixin({

      methods: {
        stashPageData() {
          return { data: { ...this.$data } }
        },
        restorePageData(oldData) {
          Object.assign(this.$data, oldData.data)
        },
      },

      onLoad() {
        if (this.$isPage()) {
          // 新进入页面
          Object.assign(this.$data, this.$options.data())
        }
      },

      onUnload() {
        if (this.$isPage()) {
          // 退出页面，删除数据
          delete pageDatas[this.$pageId()]
          this.$needReloadPageData = true
        }
      },

      onHide() {
        if (this.$isPage()) {
          // 将要隐藏时，备份数据
          pageDatas[this.$pageId()] = this.stashPageData()
        }
      },

      onShow() {
        if (this.$isPage()) {
          // 如果是后退回来的，拿出历史数据来设置data
          if (this.$needReloadPageData) {
            const oldData = pageDatas[this.$pageId()]

            if (oldData) {
              this.restorePageData(oldData)
            }
            this.$needReloadPageData = false
          }
        }
      },

    })
  },
}
复制代码

在main.js˙中引入一下就可以了。

import initData from '@/utils/initData';
Vue.use(initData)
复制代码

切记如果引入这段js，就不要再onShow()方法里获取数据了，要在mounted()方法中获取数据，这样才能解决上述bug