小程序初踩坑

寫在前面

一直有在關注小程序，也作過一些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同級。

<template>
    <button @tap="function1"></button>
</template>

<script>
    import wepy from 'wepy';
        
    export default class Page extends wepy.page {
    
        methods = {
            function1() {
                console.log('function 1');
            }
        };
        
        function2() {
            console.log('function 2');
        }
    
        onLoad() {
            this.methods.function1();
            this.function2();
        };
    }

</script>

坑二：小程序默認頁

小程序是以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修復

未完待續。。。