mpvue寫一個CPASS小程序

時間 2019-11-17

標籤 mpvue 一個 cpass 程序简体版

原文原文鏈接

本文是對CPASS項目的技術要點和所踩的坑作一些總結。vue

項目

一個提供移動辦公場地的小程序平臺。小程序

使用美團mpvue框架，mpvue：1.0.13,mpvue-loader：1.0.15緩存

靜態資源（除了tabbar圖標）放在阿里雲ossbash

組件（頁面）間通訊

四種方式：微信

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，再傳遞分發事件flex

import Bus from '@/mixins/event-bus'

// 須要傳遞給兄弟組件的值
let params = { 
    ***
}
Bus.$emit('getParams', params)

複製代碼

第三步：在須要監聽的組件中引入event-bus，在created週期去監聽事件（小程序週期監聽無效）,在beforeDestroy 週期取消監聽事件ui

import Bus from '@/mixins/event-bus'
created () {
  // 監聽事件
  Bus.$on('getParams', params => {
    // to do something

  })
},beforeDestroy () {
  // 清除監聽
  Bus.$off('getParams');
}複製代碼

swiper選項卡 + 無限加載

利用微信官方提供的swiper封裝一個無限數據加載的swiperTab選項卡。this

空態下：

技術難點：

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]
  }
},複製代碼