mpvue“踩坑”指南

mylxsw 發(fā)布于2019-08-23 11:50 / 1129人閱讀

摘要：首先我們使用的原因一般就是做一個下拉加載更多么，在小程序中頁面全局有一個滾動到底部的事件我們只需要在這個事件里面寫上拉加載更多就好了，和下拉刷新也不沖突。下拉刷新上拉加載更多嵌套子模板的問題在新版本的中支持了這個功能，但是我勸大家不要用。

mpvue是一個使用 Vue.js 開發(fā)小程序的前端框架。框架基于 Vue.js 核心，框架整體和vue語法保持一致，整體開發(fā)體驗良好。但是越往深處走，越會發(fā)現(xiàn)一些問題。 1. 同一個頁面被多次打開所引發(fā)的問題

首先是有這么一個需求，從主頁 -> 我的關注 -> 別人的主頁，主頁這個模塊被打開了兩次

我拍拍胸脯對產(chǎn)品說：沒問題！

這個需求是沒毛病的，就是當我們從 別人的主頁 -> 我的關注 -> 主頁的時候，我的信息變成了我剛剛打開的那個人的信息，這TM...

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

在 mpvue 路由 Page A -> Page A -> Back 的時候，其實數(shù)據(jù)公用了一個對象，不知道為什么mpvue會這么設計，在官方解決這個問題之前這里引用了 @maimake的解決辦法

首先創(chuàng)建一個hack文件 /src/util/Hack.js

const pageDatas = {}

export default {
  install(_Vue) {
    // 添加全局方法或?qū)傩?    _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()) {
          // 退出頁面，刪除數(shù)據(jù)
          delete pageDatas[this.$pageId()]
          this.$needReloadPageData = true
        }
      },
      
      onHide() {
        if (this.$isPage()) {
          // 將要隱藏時，備份數(shù)據(jù)
          pageDatas[this.$pageId()] = this.stashPageData()
        }
      },
      
      onShow() {
        if (this.$isPage()) {
          // 如果是后退回來的，拿出歷史數(shù)據(jù)來設置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()

測試后發(fā)現(xiàn)ok了，但是這只是一個臨時解決方案，治標不治本，還是希望官方盡快解決。

2. scroll-view 組件的一些問題

其實吧，我并不推薦使用這個組件，也不是mpvue的問題，就是這個組件本身就不太好用。

事件觸發(fā)不了的問題

在mpvue中使用下面的一些事件的時候是不會觸發(fā)的

bindscrolltolower

bindscrolltoupper

bindscroll

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

scrolltolower

scrolltoupper

scroll

然而，當 scroll-view 高度為 100% 的時候 bindscrolltolower 又不執(zhí)行了，解決方法是給外面的父元素加一些限制

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

這樣就解決了，但但但但但但但但是，這樣鋪滿屏幕后和小程序的下拉刷新沖突了，導致下拉刷新不執(zhí)行。WTF

回到我們開頭說的不用 scroll-view 我們用別的方法解決。首先我們使用 scroll-view的原因一般就是做一個下拉加載更多么，在小程序中頁面全局有一個滾動到底部的事件 onReachBottom 我們只需要在這個事件里面寫上拉加載更多就好了，和下拉刷新也不沖突。

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

3. slot 嵌套子模板的問題

在新版本的mpvue中支持了 slot 這個功能，但是我勸大家不要用。問題很多，父子之間傳值有各種問題，我也沒找到很好的解決辦法，希望官方和社區(qū)繼續(xù)完善。

本文同步發(fā)表在github https://github.com/Jon-Millen...

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97539.html

mpvue實現(xiàn)微信小程序（歡迎踩坑）

摘要：最近剛使用完成了微信小程序的開發(fā)，寫點東西，做個記錄。專門用于外鏈跳轉(zhuǎn)但是外鏈跳轉(zhuǎn)還是個坑，微信僅能支持跳到在它那邊注冊過的的網(wǎng)址，其他還是不行，暫時沒有找到好的方式看了知乎，它的外鏈直接轉(zhuǎn)成了文本，不可點擊了。最近剛使用mpvue完成了微信小程序的開發(fā)，寫點東西，做個記錄。首先依舊是兩個傳送門：微信小程序文檔:[https://developers.weixin.qq.com/...

jas0n 2019-08-29 16:21 評論0 收藏0
mpvue實現(xiàn)微信小程序（歡迎踩坑）

摘要：最近剛使用完成了微信小程序的開發(fā)，寫點東西，做個記錄。專門用于外鏈跳轉(zhuǎn)但是外鏈跳轉(zhuǎn)還是個坑，微信僅能支持跳到在它那邊注冊過的的網(wǎng)址，其他還是不行，暫時沒有找到好的方式看了知乎，它的外鏈直接轉(zhuǎn)成了文本，不可點擊了。最近剛使用mpvue完成了微信小程序的開發(fā)，寫點東西，做個記錄。首先依舊是兩個傳送門：微信小程序文檔:[https://developers.weixin.qq.com/...

xuexiangjys 2019-08-23 10:56 評論0 收藏0
mpvue實現(xiàn)微信小程序（歡迎踩坑）

摘要：最近剛使用完成了微信小程序的開發(fā)，寫點東西，做個記錄。專門用于外鏈跳轉(zhuǎn)但是外鏈跳轉(zhuǎn)還是個坑，微信僅能支持跳到在它那邊注冊過的的網(wǎng)址，其他還是不行，暫時沒有找到好的方式看了知乎，它的外鏈直接轉(zhuǎn)成了文本，不可點擊了。最近剛使用mpvue完成了微信小程序的開發(fā)，寫點東西，做個記錄。首先依舊是兩個傳送門：微信小程序文檔:[https://developers.weixin.qq.com/...

notebin 2019-08-02 11:13 評論0 收藏0
小程序初踩坑

摘要：寫在前面一直有在關注小程序，也做過一些，不過一直沒上正式項目，剛好這次公司有小程序的項目就入坑了。是美團剛出的小程序框架，也很不錯，可以直接用的寫法去進行開發(fā)，學習成本較低，缺點是剛推出，雖然美團內(nèi)部有在使用，不過社區(qū)還沒起來。寫在前面一直有在關注小程序，也做過一些demo，不過一直沒上正式項目，剛好這次公司有小程序的項目就入坑了。項目開發(fā)完，記錄一下遇到的一些坑吧。框架選用框...

RyanHoo 2019-08-26 11:53 評論0 收藏0
美團小程序框架mpvue蹲坑指南

摘要：這個是我們約定的額外的配置這個字段下的數(shù)據(jù)會被填充到頂部欄的統(tǒng)一配置美團汽車票同時，這個時候，我們會根據(jù)的頁面數(shù)據(jù)，自動填充到中的字段。美團小程序框架mpvue(花名：沒朋友)蹲坑指南第一次接觸小程序大概是17年初,當時小程序剛剛內(nèi)側(cè),當時就被各種限制折騰的死去活來的,單向綁定,沒有promise,請求數(shù)限制,包大小限制,各種反人類,...反正我是感受到了滿滿的惡意.最近接到一個工...

AprilJ 2019-08-22 16:01 評論0 收藏0