本文是對CPASS專案的技術要點和所踩的坑做一些總結。
專案
一個提供移動辦公場地的小程式平臺。
使用美團mpvue框架，mpvue：1.0.13,mpvue-loader：1.0.15
靜態資源（除了tabbar圖示）放在阿里雲oss
元件（頁面）間通訊
四種方式：
- Vuex狀態管理（mapActions，mapGetters）
- 本地快取（setStorage，getStorage，removeStorage）
- Bus集中式的事件中介軟體（$emit，$on，$off）
- 路由query傳值
這裡說一下比較少用的第三種通訊方式。Bus應用於非父子元件通訊，利用$emit，$on，$off分別來分發、監聽、取消監聽。
第一步：在mixins（混合）建一個檔案event-bus.js
import Vue from 'vue';
export default new Vue();複製程式碼第二步：在需要分發的元件中引入event-bus，再傳遞分發事件
import Bus from '@/mixins/event-bus'
// 需要傳遞給兄弟元件的值
let params = {
***
}
Bus.$emit('getParams', params)
複製程式碼第三步：在需要監聽的元件中引入event-bus，在created週期去監聽事件（小程式週期監聽無效）,在beforeDestroy 週期取消監聽事件
import Bus from '@/mixins/event-bus'
created () {
// 監聽事件
Bus.$on('getParams', params => {
// to do something
})
},beforeDestroy () {
// 清除監聽
Bus.$off('getParams');
}複製程式碼swiper選項卡 + 無限載入
利用微信官方提供的swiper封裝一個無限資料載入的swiperTab選項卡。
空態下：
技術難點：
swiper需要設定固定高度，觸底onReachBottom無限載入又需要高度。所以需要在swiper標籤設定動態高度:style="{height: swiperHeight + 'px'}"。onLoad週期獲取單個list-item的高度。假如所渲染資料有n組資料，則swiper高度為：swiperHeight = baseHeight * n + 載入提示佔位高度。
// swiper動態設定高度，list為需要渲染的資料
autoHeight(list) {
let num = list.length;
// this.loadHeight載入提示語的高度
let listHeight = this.baseItemHeight * num + this.loadHeight
this.swiperHeight = Math.max(this.windowHeight, listHeight);
},
// 獲取靜態高度
calcStaticHeight() {
return new Promise((resolve) => {
let self = this;
let tabListHeight; // 獲取tab高度
// 獲取除去tabList高度，全屏高度（空態狀態時需要）
wx.createSelectorQuery().select('#tab-list').fields({
size: true
}, function (res) {
tabListHeight = res.height
wx.getSystemInfo({
success: function(resp) {
self.windowHeight = resp.windowHeight - tabListHeight
}
})
}).exec()
// 獲取單個item高度
wx.createSelectorQuery().select('#base-item').fields({
size: true
}, function (res) {
self.baseItemHeight = res.height
resolve()
}).exec()
})
}複製程式碼如果頻繁切換swiper會導致卡死，是因為觸控滑動swiper和點選選項卡時賦值swiperIndex都會觸發swiperbindchange事件，這裡做了判斷處理。
// 滑動切換
swiperTab (e) {
// 如果是觸控滑動切換
if (e.mp.detail.source === 'touch') {
if (this.currentTab === e.mp.detail.current) {
return false;
} else {
this.currentTab = e.mp.detail.current
this.isLoading = false
this.allLoaded = false
this.pageNum = 1
this.loadTips = '上拉載入更多'
this.getDataList(this.loadTips);
}
}
},
// 點選切換
clickTab (tab) {
if (this.currentTab === tab) {
return false;
} else {
this.currentTab = tab
this.allLoaded = false
this.pageNum = 1
this.loadTips = '上拉載入更多'
this.getDataList(this.loadTips);
}
},複製程式碼scroll-view封裝indexList
實現兩種定位方式：點選定位，按住右側字母indexList滑動定位。
技術難點：按住右側indexList滑動定位，獲取字母indexList的上邊距offsetTop，按住滑動時獲取手指距離螢幕頂部的距離clientY，手指移動距離為moveY=clientY-offsetTop，具體實現如下：
// 索引定位(滑動開始) @touchstart="handlerStart"
handlerStart (e) {
this.targetIndex = e.mp.target.id
},
// 索引定位(滑動過程) @touchmove="handlerMove"
handlerMove(e) {
let keyList = this.keyList;
// 手指滑動垂直距離
let moveY = e.mp.touches[0].clientY;
let rY = moveY - this.offsetTop;
if (rY >= 0) {
// apHeight為字母表indexList中單個字母塊高度，計算結果向上取整
let index = Math.ceil((rY - this.apHeight) / this.apHeight);
if (index >= 0 && index < keyList.length) {
this.targetIndex = keyList[index];
}
} else {
this.targetIndex = keyList[0]
}
},複製程式碼坑
view或者text設定border-radius=50%有時候在真機會變形（排除flex佈局的影響）。
wxml不支援複雜邏輯，如模版字串，字串擷取等等。
text設定行高的時候會出現樣式異常，替換成view便可解決此問題。
wx.showLoading和wx.showToast的屬性title不可為空，線上會報錯，影響js執行。
總結
本文只是簡單講一下專案中涉及到的幾處技術要點，歡迎交流。
打一波廣告：