成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

mpvue“踩坑”指南

mylxsw / 1149人閱讀

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

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

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

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

這個(gè)需求是沒毛病的，就是當(dāng)我們從 別人的主頁 -> 我的關(guān)注 -> 主頁 的時(shí)候，我的信息變成了我剛剛打開的那個(gè)人的信息，這TM...

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

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

首先創(chuàng)建一個(gè)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()) {
          // 新進(jìn)入頁面
          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í)，備份數(shù)據(jù)
          pageDatas[this.$pageId()] = this.stashPageData()
        }
      },
      
      onShow() {
        if (this.$isPage()) {
          // 如果是后退回來的，拿出歷史數(shù)據(jù)來設(shè)置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了，但是這只是一個(gè)臨時(shí)解決方案，治標(biāo)不治本，還是希望官方盡快解決。

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

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

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

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

bindscrolltolower

bindscrolltoupper

bindscroll

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

scrolltolower

scrolltoupper

scroll

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


    
    

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

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

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

export default {
    onPullDownRefresh(){
        //  下拉刷新
    },
    onReachBottom(){
        // 上拉加載更多
    }
}
3. slot 嵌套子模板的問題

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

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

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

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

相關(guān)文章

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

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

    jas0n 評論0 收藏0

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

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

    xuexiangjys 評論0 收藏0

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

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

    notebin 評論0 收藏0

  • 小程序初踩坑

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

    RyanHoo 評論0 收藏0

  • 美團(tuán)小程序框架mpvue蹲坑指南

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

    AprilJ 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<