小程序初踩坑

RyanHoo 發布于2019-08-26 11:53 / 1189人閱讀

摘要：寫在前面一直有在關注小程序，也做過一些，不過一直沒上正式項目，剛好這次公司有小程序的項目就入坑了。是美團剛出的小程序框架，也很不錯，可以直接用的寫法去進行開發，學習成本較低，缺點是剛推出，雖然美團內部有在使用，不過社區還沒起來。

寫在前面

一直有在關注小程序，也做過一些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修復

未完待續。。。

云服務器 GPU云服務器初踩坑小程序小程序小程序附近小程序門店小程序小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107774.html

小程序踩坑記錄

摘要：小程序踩坑記錄小程序現階段缺陷還很多，在安卓手機上的性能也是很糟糕，估計實用性還不高。路由設置必須有序小程序的頁面都必須在注冊，但這不是隨便登記一下就行了，頁面登記的順序一定是有層級關系的。小程序踩坑記錄小程序現階段缺陷還很多，在安卓手機上的性能也是很糟糕，估計實用性還不高。一步一步都是坑，這里作為個人踩坑收集用（內含吐槽），也是經驗分享，歡迎issues討論。框架部分 1、殘念...

lily_wang 2019-08-20 15:41 評論0 收藏0
mpvue實現微信小程序（歡迎踩坑）

摘要：最近剛使用完成了微信小程序的開發，寫點東西，做個記錄。專門用于外鏈跳轉但是外鏈跳轉還是個坑，微信僅能支持跳到在它那邊注冊過的的網址，其他還是不行，暫時沒有找到好的方式看了知乎，它的外鏈直接轉成了文本，不可點擊了。最近剛使用mpvue完成了微信小程序的開發，寫點東西，做個記錄。首先依舊是兩個傳送門：微信小程序文檔:[https://developers.weixin.qq.com/...

jas0n 2019-08-29 16:21 評論0 收藏0
mpvue實現微信小程序（歡迎踩坑）

摘要：最近剛使用完成了微信小程序的開發，寫點東西，做個記錄。專門用于外鏈跳轉但是外鏈跳轉還是個坑，微信僅能支持跳到在它那邊注冊過的的網址，其他還是不行，暫時沒有找到好的方式看了知乎，它的外鏈直接轉成了文本，不可點擊了。最近剛使用mpvue完成了微信小程序的開發，寫點東西，做個記錄。首先依舊是兩個傳送門：微信小程序文檔:[https://developers.weixin.qq.com/...

xuexiangjys 2019-08-23 10:56 評論0 收藏0
mpvue實現微信小程序（歡迎踩坑）

摘要：最近剛使用完成了微信小程序的開發，寫點東西，做個記錄。專門用于外鏈跳轉但是外鏈跳轉還是個坑，微信僅能支持跳到在它那邊注冊過的的網址，其他還是不行，暫時沒有找到好的方式看了知乎，它的外鏈直接轉成了文本，不可點擊了。最近剛使用mpvue完成了微信小程序的開發，寫點東西，做個記錄。首先依舊是兩個傳送門：微信小程序文檔:[https://developers.weixin.qq.com/...

notebin 2019-08-02 11:13 評論0 收藏0
FE.WX-小程序“無聊廣場”游戲前端性能優化與踩坑攻略

摘要：本文主要針對小程序無聊廣場的前端開發內容做總結，記錄常見的一些老生常談的進階手法，對小程序中的動畫音頻等踩坑做出解決方案。背景一個交互不復雜，對刷新頻率和動畫效果要求不高的小游戲，不需要使用canvas主導的解決方案，使用dom操作一樣可以完成。節省了cocos creater的學習成本，值得一試。本文主要針對小程序無聊廣場的前端開發內容做總結，記錄常見的一些老生常談的進階手法，對...

qpal 2019-08-22 18:26 評論0 收藏0