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 又不執行了,解決方法是給外面的父元素加一些限制

<div class="cat-scroll">
    <scroll-view style="height: 100%; width: 100%">
    </<scroll-view>
</div>
.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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 目錄 UI組件 開發框架 實用庫 服務端 輔助工具 應用實例 Demo示例 UI組件 element★13489 ...
    余生社會閱讀 19,994評論 7 233
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • 生活充滿儀式感,每天都有新鮮感。 今年的520,正值狗狗上班我休息的日子,這么重要的日子怎么能錯過呢?!下午獨自踏...
    窗外_6ac6閱讀 355評論 2 2
  • 滿城送玫瑰花的、捧玫瑰花的和抱玫瑰花的,無論是那一類,臉上的笑容都很美。在這美麗的節日最適合表達愛意,送1朵玫瑰代...
    菱520閱讀 199評論 0 0