欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

mpvue寫一個CPASS小程序的示例

 更新時間:2018年09月04日 10:43:28   作者:Kellercai  
這篇文章主要介紹了mpvue寫一個CPASS小程序的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

mpvue 是什么

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

小程序開發(fā)階段面臨的主要問題

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

使用Vue.js 開發(fā)小程序,帶來如下開發(fā)效率提升

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

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

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

mpVue 實現(xiàn)原理

本文是對CPASS項目的技術(shù)要點和所踩的坑做一些總結(jié)。

項目

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

使用美團mpvue框架, mpvue:1.0.13, mpvue-loader:1.0.15

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

組件(頁面)間通信

四種方式:

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

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

第一步:在mixins(混合)建一個文件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)聽的組件中引入event-bus,在created周期去監(jiān)聽事件(小程序周期監(jiān)聽無效),在 beforeDestroy 周期取消監(jiān)聽事件

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

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

swiper選項卡 +  無限加載

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

空態(tài)下:

技術(shù)難點:

swiper需要設(shè)置固定高度,觸底 onReachBottom 無限加載又需要高度。所以需要在swiper標簽設(shè)置動態(tài)高度 :style="{height: swiperHeight + 'px'}" 。 onLoad 周期獲取單個list-item的高度。假如所渲染數(shù)據(jù)有n組數(shù)據(jù),則swiper高度為: swiperHeight = baseHeight * n + 加載提示占位高度 。

// swiper動態(tài)設(shè)置高度,list為需要渲染的數(shù)據(jù)
autoHeight(list) {
 let num = list.length;
 // this.loadHeight加載提示語的高度
 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)時需要)
  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會導(dǎo)致卡死,是因為觸摸滑動swiper和點擊選項卡時賦值swiperIndex都會觸發(fā)swiper bindchange 事件,這里做了判斷處理。

// 滑動切換
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

實現(xiàn)兩種定位方式:點擊定位,按住右側(cè)字母indexList滑動定位。

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

// 索引定位(滑動開始) @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中單個字母塊高度,計算結(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%有時候在真機會變形(排除flex布局的影響)。

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

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

wx.showLoading和wx.showToast的屬性title不可為空,線上會報錯,影響js執(zhí)行。

總結(jié)

本文只是簡單講一下項目中涉及到的幾處技術(shù)要點,歡迎交流。

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式

    vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式

    這篇文章主要介紹了vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • VUE JS 使用組件實現(xiàn)雙向綁定的示例代碼

    VUE JS 使用組件實現(xiàn)雙向綁定的示例代碼

    本篇文章主要介紹了VUE JS 使用組件實現(xiàn)雙向綁定,詳細的介紹了vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊,具有一定的參考價值,有興趣的可以了解一下。
    2017-01-01
  • Vue-cli中post請求發(fā)送Json格式數(shù)據(jù)方式

    Vue-cli中post請求發(fā)送Json格式數(shù)據(jù)方式

    這篇文章主要介紹了Vue-cli中post請求發(fā)送Json格式數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue.nextTick純干貨使用方法詳解

    Vue.nextTick純干貨使用方法詳解

    這篇文章主要為大家介紹了Vue.nextTick使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • 詳解Vue的列表渲染

    詳解Vue的列表渲染

    這篇文章主要為大家介紹了Vue的列表渲染,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • vue、react等單頁面項目應(yīng)該這樣子部署到服務(wù)器

    vue、react等單頁面項目應(yīng)該這樣子部署到服務(wù)器

    這篇文章主要介紹了vue、react等單頁面項目應(yīng)該這樣子部署到服務(wù)器,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • vue+Ant?Design進度條滑塊與input聯(lián)動效果實現(xiàn)

    vue+Ant?Design進度條滑塊與input聯(lián)動效果實現(xiàn)

    最近接到這樣一個需求滑塊進度與輸入框為一致,默認值為80,最小不能小于30,最大為100,怎么實現(xiàn)這個聯(lián)動效果呢,下面小編給大家分享下基于vue+Ant?Design進度條滑塊與input聯(lián)動效果的實現(xiàn),感興趣的朋友跟隨小編一起看看吧
    2022-12-12
  • Vue keepAlive頁面強制刷新方式

    Vue keepAlive頁面強制刷新方式

    這篇文章主要介紹了Vue keepAlive頁面強制刷新方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 基于Vue+ElementUI的省市區(qū)地址選擇通用組件

    基于Vue+ElementUI的省市區(qū)地址選擇通用組件

    這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • vue實現(xiàn)右上角時間顯示實時刷新

    vue實現(xiàn)右上角時間顯示實時刷新

    這篇文章主要為大家詳細介紹了vue實現(xiàn)右上角時間顯示實時刷新,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10

最新評論