mpvue是一個使用 Vue.js 開發(fā)小程序的前端框架些楣。框架基于 Vue.js 核心悼瓮，框架整體和vue語法保持一致戈毒，整體開發(fā)體驗良好。但是越往深處走横堡，越會發(fā)現(xiàn)一些問題埋市。
1. 同一個頁面被多次打開所引發(fā)的問題
首先是有這么一個需求，從 主頁 -> 我的關(guān)注 -> 別人的主頁命贴， 主頁 這個模塊被打開了兩次
我拍拍胸脯對產(chǎn)品說：沒問題道宅！
這個需求是沒毛病的，就是當我們從 別人的主頁 -> 我的關(guān)注 -> 主頁 的時候胸蛛，我的信息變成了我剛剛打開的那個人的信息污茵，這TM...
不要慌，有些事情需要我們 “摸索”
在 mpvue 路由 Page A -> Page A -> Back 的時候葬项，其實數(shù)據(jù)公用了一個對象泞当，不知道為什么mpvue會這么設(shè)計，在官方解決這個問題之前這里引用了 @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ù)來設(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了嚷量，但是這只是一個臨時解決方案陋桂，治標不治本，還是希望官方盡快解決蝶溶。
2. scroll-view 組件的一些問題
其實吧嗜历，我并不推薦使用這個組件，也不是mpvue的問題，就是這個組件本身就不太好用梨州。
- 事件觸發(fā)不了的問題
在mpvue中使用下面的一些事件的時候是不會觸發(fā)的 bindscrolltolowerbindscrolltoupperbindscroll
解決方法你猜是什么痕囱？就是把bind去掉，哈哈哈
scrolltolowerscrolltoupperscroll
然而暴匠，當 scroll-view 高度為 100% 的時候 bindscrolltolower 又不執(zhí)行了咐蝇，解決方法是給外面的父元素加一些限制
<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;
}
這樣就解決了，但但但但但但但但是巷查，這樣鋪滿屏幕后和小程序的下拉刷新沖突了，導(dǎo)致下拉刷新不執(zhí)行抹腿。WTF
回到我們開頭說的不用 scroll-view 我們用別的方法解決岛请。首先我們使用 scroll-view的原因一般就是做一個下拉加載更多么，在小程序中頁面全局有一個滾動到底部的事件 onReachBottom 我們只需要在這個事件里面寫上拉加載更多就好了警绩，和下拉刷新也不沖突崇败。
export default {
onPullDownRefresh(){
// 下拉刷新
},
onReachBottom(){
// 上拉加載更多
}
}
3. slot 嵌套子模板的問題
在新版本的mpvue中支持了 slot 這個功能，但是我勸大家不要用肩祥。問題很多后室，父子之間傳值有各種問題，我也沒找到很好的解決辦法混狠，希望官方和社區(qū)繼續(xù)完善岸霹。
本文同步發(fā)表在github https://github.com/Jon-Millent/blog/issues
