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