mpvue開發項目總結(從0到上線)

1.簡言

爲期一個半月的小程序開發，其中夾雜其餘項目的功能迭代，跌跌撞撞的將項目完成了，今天中秋節放假前一天，以此來記錄下這次打怪升級的心得與分享其中遇到花費時間的問題。

由於這次開發的是一個類電商項目，從先發佈一個上線一個招募頁招募用戶，在開發文章頁面，文章詳情，商品詳情，sku聯動，建立訂單，綁定銀行卡，建立customer,購買支付，訂單列表(所有，未付款，已發貨，已收貨)，訂單詳情，物流詳情，用戶信息，地址管理，成立團隊，分享與發佈到朋友圈推廣等。不想原生小程序的結構目錄複雜，數據綁定不方便，惟一的好處只用踩官方小程序的坑，因此考慮使用美團的mpvue，查找文檔可使用在mpve的基礎上更接近vue風格開發，不用寫個vue頁面還要在寫個main.js配置小程序json配置，路由和配置寫在一塊兒，而且幫你作了flyio和攔截器的封裝和經常使用方法的封裝，能夠根據你的業務架構在此基礎上更改你的框架。使用下圖的倒數第二個，傳送門：mpvue-cli (感謝spencer1994對社區作出的貢獻)

2.將在mpvue-simple-cli的基礎上更改本身的業務結構，封裝本身的方法和組件，添加本身的常量與封裝方法。

 將本身項目分享，只有簡單的三個test頁面demo，沒有一點業務代碼，封裝的方法有些保留，能夠分享，UI使用有贊mpvue-zanu，感興趣能夠簡單看一下，但願對你有一些幫助，本人只是一個工做不久的小白，寫的代碼有點kou jiao，望見諒。

項目地址：mpvue-project

3.記錄下在開發中遇到的坑吧以及解決辦法，小問題不作記錄，但願有遇到一樣問題的小夥伴能及時解決，或者有更讚的方法但願給我指正。

1.mpvue生命週期問題以及小程序生命週期，mpveue created每一個頁面都會加載一次，其他方法只會進來執行一次，若是須要更新頁面可使用小程序的onShow。

2.tabBar只能使用本地圖片,不能使用網絡圖片，建議81px x 81px,跳轉到帶tabBar對應的頁面只能使用wx.switchTab,而且不能傳參數，可使用vuex，如登陸狀態。

3.改版後使用wx.getUserInfo()再也不彈出受權彈窗，使用wx.getSetting，成功回調裏判斷是否受權過用戶信息 。可使用button組件彈出受權彈窗。

<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo" class="fun-btn">使用微信登陸</button>

4.同一路由切換，會保留上一個頁面的數據，如這個issue(https://github.com/Meituan-Dianping/mpvue/issues/140),能夠在加載時使用下面方法，先將數據恢復爲默認數據。

onLoad (options){
  Object.assign(this, this.$options.data()) // 解決相同保留上一個頁面的數據 （https://github.com/Meituan-Dianping/mpvue/issues/300）  
}

5.手機線上video在ios上黑屏或賺菊花，安卓正常。看到社區上記錄了關於全部小程序video的問題(https://developers.weixin.qq.com/community/develop/doc/0006e2923d09c0fc88d6aea965b800)，也沒有發現有人給出解決方法，通過調查時由於七牛雲的路徑中帶中文，所以admin後臺上傳視頻不要有中文，微信api下載圖片路徑也不能有中文,不然也下載不了，會有轉碼問題。

6.在寫遮罩層和彈出框會出現觸摸穿透和滾動穿透，可使用touchMove.stop和touchend.stop

<scroll-view :scroll-y="hideModal"  @touchmove.stop="moveStop" >
    //滾動內容 hideModal是否彈出彈出框
</scroll-view>
<!-- 底部彈出框 -->
<div class="modals" v-if="!hideModal" @touchmove.stop="moveStop" @touchend.stop="moveStop">

7.分享到朋友圈，微信小程序不提供api，只能經過canvas而後在保存圖片到手機，可使用wx.getSystemInfo獲取設備信息，根據寬高來自使用，由於手機dpi不一樣，由於可能不止畫一張圖片，若是使用wx.getImageInfo嵌套的話會一個一個請求依次進行，導出加載慢白屏時間多，所以只有將微信小程序api promise化異步加載，網上有人說使用bluebird,發如今mpvue會報以下錯誤，所以業內推薦使用es6-promise,而且使體積更小。

 

 import Promise from 'es6-promise' // 業內推薦使用es6-promise (bluebird會報錯，而且es6-promise比bluebird體積小三倍)

const wxGetImageInfo = this.wxPromisify(wx.getImageInfo)

fly.all([
        wxGetImageInfo({
          src: 'https://xxxx.png'
        }),
        wxGetImageInfo({
          src: 'https://xxxxxx.jpeg'
        }),
        wxGetImageInfo({
          src: 'https://xxxx.jpg'
        })
      ]).then(function (res) {}) 

wxPromisify(fn) {
        return function (obj = {}) {
          return new Promise((resolve, reject) => {
            obj.success = function (res) {
              resolve(res)
            }

            obj.fail = function (res) {
              reject(res)
            }

            fn(obj)
          })
        }
      },       

8.分享到朋友圈，生成二維碼，只能是線上發佈程序，而且A與C方案有10萬條限制，可使用B方案。

9.在mpvue封裝vue組件的時候不推薦將要雙向綁定的input封裝到組件中,我試過不少辦法，雖然解決了父子組件間雙向綁定通信問題，但一直解決不了光標閃爍問題，影響體驗，花了必定時間以後沒有再嘗試解決，就沒有封裝Input到其中。

10.注意小程序頁面跳轉的幾個方法，注意棧的問題，使用wx.navigateTo和wx.redirecTo會有頁面計入棧，雖然能夠傳參數更新頁面，可是支付成功後到訂單詳情返回後會到下單頁面，但願到購買商品頁面，如美團外賣邏輯，所以在選擇地址後使用wx.navigateBack，可是返回到上一頁面又不能添加參數更細地址，所以使用eventBus解決地址數據更新，選擇地址頁面使用event.emit(''AddressDataChanged,address),

下單頁面監聽事件，更改數據，event.on('AddressDataChanged',this, function(newAddress){})

// event.js(eventBus)
let events = {}

function on(name, self, callback) {
  var tuple = [self, callback]
  var callbacks = events[name]
  if (Array.isArray(callbacks)) {
    callbacks.push(tuple)
  } else {
    events[name] = [tuple]
  }
}

function remove(name, self) {
  var callbacks = events[name]
  if (Array.isArray(callbacks)) {
    events[name] = callbacks.filter((tuple) => {
      return tuple[0] !== self
    })
  }
}

function emit(name, data) {
  var callbacks = events[name]
  if (Array.isArray(callbacks)) {
    callbacks.map((tuple) => {
      var self = tuple[0]
      var callback = tuple[1]
      callback.call(self, data)
    })
  }
}

exports.on = on
exports.remove = remove
exports.emit = emit

10. map、video、canvas、camera、live-player、live-pusher等組件index問題，可使用cover-view

 11.其中a9cdn-replacer.js與a9cdn-uploader.js 是咱們老大寫的一鍵將圖片hash值而且上傳到七牛雲，須要配置，具體參考github：七牛雲圖片上傳

　

-----原創文章，©版權全部，轉載請註明標明出處：http://www.cnblogs.com/doinbean