mpvue寫一個(gè)CPASS小程序的示例

mpvue 是什么

1、一套定位于開(kāi)發(fā)小程序的前端開(kāi)發(fā)框架，核心目標(biāo)是提高開(kāi)發(fā)效率，增強(qiáng)開(kāi)發(fā)體驗(yàn)；
2、框架提供了完整的Vue.js 開(kāi)發(fā)體驗(yàn)，開(kāi)發(fā)者編寫Vue.js代碼，mpvue將其解析轉(zhuǎn)換為小程序并確保其正確運(yùn)行；
3、框架還通過(guò) vue-cli 工具向開(kāi)發(fā)者提供 quick start 示例代碼，開(kāi)發(fā)者只需要執(zhí)行一條簡(jiǎn)單命令，即可獲得運(yùn)行的項(xiàng)目；

小程序開(kāi)發(fā)階段面臨的主要問(wèn)題

1、組件化機(jī)制不夠完善
2、代碼多端復(fù)用能力欠缺
3、小程序框架和團(tuán)隊(duì)技術(shù)棧無(wú)法有機(jī)結(jié)合
4、小程序?qū)W習(xí)成本不夠低

使用Vue.js 開(kāi)發(fā)小程序，帶來(lái)如下開(kāi)發(fā)效率提升

1、H5代碼可以通過(guò)最小修改復(fù)用到小程序；
2、使用Vue.js 組件機(jī)制開(kāi)發(fā)小程序，可實(shí)現(xiàn)小程序和H5組件復(fù)用；
3、技術(shù)棧統(tǒng)一后小程序?qū)W習(xí)成本降低，開(kāi)發(fā)者從H5 轉(zhuǎn)換到小程序不需要更多學(xué)習(xí)；
4、Vue.js 代碼可以讓所有前端直接參與開(kāi)發(fā)維護(hù)

Vue.js 與 小程序 的聯(lián)系

1、一致的工作原理：都是典型的邏輯視圖層框架，邏輯層和視圖層之間的工作方式為：數(shù)據(jù)變更驅(qū)動(dòng)視圖更新；視圖交互觸發(fā)事件，事件響應(yīng)函數(shù)修改數(shù)據(jù)再次觸發(fā)視圖更新。

mpVue 實(shí)現(xiàn)原理

本文是對(duì)CPASS項(xiàng)目的技術(shù)要點(diǎn)和所踩的坑做一些總結(jié)。

項(xiàng)目

一個(gè)提供移動(dòng)辦公場(chǎng)地的小程序平臺(tái)。

使用美團(tuán)mpvue框架， mpvue：1.0.13, mpvue-loader：1.0.15

靜態(tài)資源（除了tabbar圖標(biāo)）放在阿里云oss

組件（頁(yè)面）間通信

四種方式：

1. Vuex狀態(tài)管理（mapActions，mapGetters）
2. 本地緩存（setStorage，getStorage，removeStorage）
3. Bus集中式的事件中間件（$emit，$on，$off）
4. 路由query傳值

這里說(shuō)一下比較少用的第三種通信方式。Bus應(yīng)用于非父子組件通信，利用$emit，$on，$off分別來(lái)分發(fā)、監(jiān)聽(tīng)、取消監(jiān)聽(tīng)。

第一步：在mixins（混合）建一個(gè)文件event-bus.js

import Vue from 'vue';
export default new Vue();

第二步：在需要分發(fā)的組件中引入event-bus，再傳遞分發(fā)事件

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

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

第三步：在需要監(jiān)聽(tīng)的組件中引入event-bus，在created周期去監(jiān)聽(tīng)事件（小程序周期監(jiān)聽(tīng)無(wú)效）,在 beforeDestroy 周期取消監(jiān)聽(tīng)事件

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

 })
},beforeDestroy () {
 // 清除監(jiān)聽(tīng)
 Bus.$off('getParams');
}

swiper選項(xiàng)卡 +  無(wú)限加載

利用微信官方提供的swiper封裝一個(gè)無(wú)限數(shù)據(jù)加載的swiperTab選項(xiàng)卡。

空態(tài)下：

技術(shù)難點(diǎn)：

swiper需要設(shè)置固定高度，觸底 onReachBottom 無(wú)限加載又需要高度。所以需要在swiper標(biāo)簽設(shè)置動(dòng)態(tài)高度 : 。 onLoad 周期獲取單個(gè)list-item的高度。假如所渲染數(shù)據(jù)有n組數(shù)據(jù)，則swiper高度為： swiperHeight = baseHeight * n + 加載提示占位高度 。

// swiper動(dòng)態(tài)設(shè)置高度，list為需要渲染的數(shù)據(jù)
autoHeight(list) {
 let num = list.length;
 // this.loadHeight加載提示語(yǔ)的高度
 let listHeight = this.baseItemHeight * num + this.loadHeight
 this.swiperHeight = Math.max(this.windowHeight, listHeight);
},
// 獲取靜態(tài)高度
calcStaticHeight() {
 return new Promise((resolve) => {
  let self = this;
  let tabListHeight; // 獲取tab高度
  // 獲取除去tabList高度，全屏高度（空態(tài)狀態(tài)時(shí)需要）
  wx.createSelectorQuery().select('#tab-list').fields({
   size: true
  }, function (res) {
   tabListHeight = res.height
   wx.getSystemInfo({
    success: function(resp) {
     self.windowHeight = resp.windowHeight - tabListHeight
    }
   })
  }).exec()
  // 獲取單個(gè)item高度
  wx.createSelectorQuery().select('#base-item').fields({
   size: true
  }, function (res) {
   self.baseItemHeight = res.height
   resolve()
  }).exec()
 })
}

如果頻繁切換swiper會(huì)導(dǎo)致卡死，是因?yàn)橛|摸滑動(dòng)swiper和點(diǎn)擊選項(xiàng)卡時(shí)賦值swiperIndex都會(huì)觸發(fā)swiper bindchange 事件，這里做了判斷處理。

// 滑動(dòng)切換
swiperTab (e) {
 // 如果是觸摸滑動(dòng)切換
 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);
  }
 }
},
// 點(diǎn)擊切換
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

實(shí)現(xiàn)兩種定位方式：點(diǎn)擊定位，按住右側(cè)字母indexList滑動(dòng)定位。

技術(shù)難點(diǎn)：按住右側(cè)indexList滑動(dòng)定位，獲取字母indexList的上邊距 offsetTop ，按住滑動(dòng)時(shí)獲取手指距離屏幕頂部的距離 clientY， 手指移動(dòng)距離為 moveY=clientY-offsetTop， 具體實(shí)現(xiàn)如下：

// 索引定位(滑動(dòng)開(kāi)始) @touchstart="handlerStart"
handlerStart (e) {
 this.targetIndex = e.mp.target.id
},
// 索引定位(滑動(dòng)過(guò)程) @touchmove="handlerMove"
handlerMove(e) {
 let keyList = this.keyList;
 // 手指滑動(dòng)垂直距離
 let moveY = e.mp.touches[0].clientY;
 let rY = moveY - this.offsetTop;
 if (rY >= 0) {
  // apHeight為字母表indexList中單個(gè)字母塊高度，計(jì)算結(jié)果向上取整
  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設(shè)置border-radius=50%有時(shí)候在真機(jī)會(huì)變形（排除flex布局的影響）。

wxml不支持復(fù)雜邏輯，如模版字符串，字符串截取等等。

text設(shè)置行高的時(shí)候會(huì)出現(xiàn)樣式異常，替換成view便可解決此問(wèn)題。

wx.showLoading和wx.showToast的屬性title不可為空，線上會(huì)報(bào)錯(cuò)，影響js執(zhí)行。

總結(jié)

本文只是簡(jiǎn)單講一下項(xiàng)目中涉及到的幾處技術(shù)要點(diǎn)，歡迎交流。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。