mpvue“踩坑”指南

logo.png

mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，框架整体和vue语法保持一致，整体开发体验良好。但是越往深处走，越会发现一些问题。

1. 同一个页面被多次打开所引发的问题

首先是有这么一个需求，从 主页 -> 我的关注 -> 别人的主页， 主页 这个模块被打开了两次

tim 20180906170054

我拍拍胸脯对产品说：没问题！

5b7642e297f95b96f760e1ebd1a5fe8

这个需求是没毛病的，就是当我们从 别人的主页 -> 我的关注 -> 主页 的时候，我的信息变成了我刚刚打开的那个人的信息，这TM...

c1c9222bc38d90488d68e69edd57ed5

不要慌，有些事情需要我们 “摸索”

4413457d05dbb078781964138ddc0f3

在 mpvue 路由 Page A -> Page A -> Back 的时候，其实数据公用了一个对象，不知道为什么mpvue会这么设计，在官方解决这个问题之前这里引用了 @maimake的解决办法

首先创建一个hack文件 /src/util/Hack.js

const pageDatas = {}

export default {
  install(_Vue) {
    // 添加全局方法或属性
    _Vue.prototype.$isPage = function isPage() {
      return this.$mp && this.$mp.mpType === 'page'
    }
    
    _Vue.prototype.$pageId = function pageId() {
      let pid = null
      try {
        pid = this.$isPage() ? this.$mp.page.__wxWebviewId__ : null
      } catch (e) { }
      return pid
    }
    
    // 注入组件
    _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中引入 /src/main.js

import Vue from 'vue'
import App from './App'
import Hack from './utils/Hack'


Vue.config.productionTip = false
App.mpType = 'app'
Vue.use(Hack)

const app = new Vue(App)
app.$mount()

测试后发现ok了，但是这只是一个临时解决方案，治标不治本，还是希望官方尽快解决。

2. scroll-view 组件的一些问题

其实吧，我并不推荐使用这个组件，也不是mpvue的问题，就是这个组件本身就不太好用。

• 事件触发不了的问题
  在mpvue中使用下面的一些事件的时候是不会触发的
• bindscrolltolower
• bindscrolltoupper
• bindscroll

解决方法你猜是什么？就是把bind去掉，哈哈哈

• scrolltolower
• scrolltoupper
• scroll

然而，当 scroll-view 高度为 100% 的时候 bindscrolltolower 又不执行了，解决方法是给外面的父元素加一些限制

.cat-scroll {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
}

这样就解决了，但但但但但但但但是，这样铺满屏幕后和小程序的下拉刷新冲突了，导致下拉刷新不执行。WTF

c1c9222bc38d90488d68e69edd57ed5

回到我们开头说的不用 scroll-view 我们用别的方法解决。首先我们使用 scroll-view的原因一般就是做一个下拉加载更多么，在小程序中页面全局有一个滚动到底部的事件 onReachBottom 我们只需要在这个事件里面写上拉加载更多就好了，和下拉刷新也不冲突。

export default {
    onPullDownRefresh(){
        //  下拉刷新
    },
    onReachBottom(){
        // 上拉加载更多
    }
}

3. slot 嵌套子模板的问题

在新版本的mpvue中支持了 slot 这个功能，但是我劝大家不要用。问题很多，父子之间传值有各种问题，我也没找到很好的解决办法，希望官方和社区继续完善。

本文同步发表在github https://github.com/Jon-Millent/blog/issues