小順序初踩坑

寫在前面

一向有在關注小遞次，也做過一些demo，不過一向沒上正式項目，恰好此次公司有小遞次的項目就入坑了。項目開闢完，紀錄一下碰到的一些坑吧。

框架選用

框架方面有關注wepy和mpvue，wepy是騰訊內部的框架，宣布時刻較久，社區也較完美，相對穩固。mpvue是美團剛出的小遞次框架，也很不錯，能夠直接用Vue的寫法去舉行開闢，進修本錢較低，瑕玷是剛推出，雖然美團內部有在運用，不過社區還沒起來。項目比較趕，照樣挑選較穩固的wepy了。

下圖為美團供應的一張框架對照圖，詳細對照能夠參考下，須要注重的是wepy現在也能夠用wepy-redux舉行數據管理了。

正文

坑一：wepy methods function

wepy的methods與Vue中的methods運用體式格局不太一樣。wepy的methods重要寄存相應wxml中所捕獲到的事宜的函數，假如想在onLoad或許其他函數中挪用methods中的要領，運用this.funcname()是沒辦法挪用到的，須要this.methods.funcname()。想把函數掛載在實例下，能夠直接在class中定義函數就能夠了，與onLoad同級。

坑二：小遞次默認頁

小遞次是以config中的pages數組的第一個元素作為默認頁的，假如須要變動默認頁則須要變動對應的數組遞次。

{
"pages":[
"pages/index",
"pages/page2"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

坑三：wx.drawImage運用收集圖片

當運用收集圖片舉行wx.drawImage的時刻會湧現黑色的底圖，原因是wx.drawImage沒法直接加載收集圖片，須要先運用wx.downloadFile下載文件資本到當地，在回調函數里運用tempFilePath舉行wx.drawImage，或許頁面初始化時預加載，保留tempFilePath。

const ctx = wx.createCanvasContext('myCanvas')
wx.downloadFile({
url: 'https://example.com/audio/123', //僅為示例，並不是實在的資本
success: function(res) {
// 只需服務器有相應數據，就會把相應內容寫入文件並進入 success 回調，營業須要自行推斷是不是下載到了想要的內容
ctx.drawImage(res.tempFilePath, 0, 0, 150, 100)
ctx.draw()
}
})

坑四：在 微信6.6.1版本，wx.drawImage 當 sy > sHeight 繪製不出圖片

官方bug，已在微信6.6.2修復

const ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage(img, 0, 999, 800, 950, 0, 0, 400, 475) // 湧現黑色底圖


坑五：放大canvas尺寸后初次wx.drawImage，圖片會湧現黑邊

原因是變動canvas尺寸后，canvns還沒重繪完造詣執行了wx.drawImage，所以會湧現圖片繪製不全的狀況。解決方案是運用一張足夠大的畫布，在上面舉行drawIamge，wx.canvasToTempFilePath的時刻輸出圖片大小傳drawImage的寬高。

坑六：invokeCanvasMethod 數據傳輸長度為 1372965 已凌駕最大長度 1048576

需求是操縱三張圖片的imageData舉行合成圖片，然則效果canvasPutImageData的時刻報數據傳輸長度超越最大長度1M，
然則壓縮到1M後圖片質量又很隱約（最大隻要510*510像素）。
解決要領是將imageData經由過程JPEG庫轉成ArrayBuffer，再經由過程wx.arrayBufferToBase64轉成base64，一頓操縱以後終究沒有1MB的限定了，然則操縱數據也不宜過大，不然會致使頁面卡死。

let arrBuffer = new JPEG().encode(resultImgData, 100, true)
let res = `data:image/jpeg;base64,${wx.arrayBufferToBase64(arrBuffer)}`

坑七： iOS 微信6.6.2分享后頁面點擊不相應

官方bug，已在微信6.6.3修復

未完待續。。。