成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小程序初踩坑

RyanHoo / 1223人閱讀

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

寫在前面

一直有在關(guān)注小程序，也做過一些demo，不過一直沒上正式項目，剛好這次公司有小程序的項目就入坑了。項目開發(fā)完，記錄一下遇到的一些坑吧。

框架選用

框架方面有關(guān)注wepy和mpvue，wepy是騰訊內(nèi)部的框架，發(fā)布時間較久，社區(qū)也較完善，相對穩(wěn)定。mpvue是美團剛出的小程序框架，也很不錯，可以直接用Vue的寫法去進(jìn)行開發(fā)，學(xué)習(xí)成本較低，缺點是剛推出，雖然美團內(nèi)部有在使用，不過社區(qū)還沒起來。項目比較趕，還是選擇較穩(wěn)定的wepy了。

下圖為美團提供的一張框架對比圖，具體對比可以參考下，需要注意的是wepy目前也可以用wepy-redux進(jìn)行數(shù)據(jù)管理了。

正文 坑一：wepy methods function

wepy的methods與Vue中的methods使用方式不太一樣。wepy的methods主要存放響應(yīng)wxml中所捕獲到的事件的函數(shù)，如果想在onLoad或者其他函數(shù)中調(diào)用methods中的方法，使用this.funcname()是沒辦法調(diào)用到的，需要this.methods.funcname()。想把函數(shù)掛載在實例下，可以直接在class中定義函數(shù)就可以了，與onLoad同級。
坑二：小程序默認(rèn)頁

小程序是以config中的pages數(shù)組的第一個元素作為默認(rèn)頁的，如果需要更改默認(rèn)頁則需要更改對應(yīng)的數(shù)組順序。

{
  "pages":[
    "pages/index",
    "pages/page2"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
坑三：wx.drawImage使用網(wǎng)絡(luò)圖片

當(dāng)使用網(wǎng)絡(luò)圖片進(jìn)行wx.drawImage的時候會出現(xiàn)黑色的底圖，原因是wx.drawImage無法直接加載網(wǎng)絡(luò)圖片，需要先使用wx.downloadFile下載文件資源到本地，在回調(diào)函數(shù)里使用tempFilePath進(jìn)行wx.drawImage，或者頁面初始化時預(yù)加載，保存tempFilePath。

const ctx = wx.createCanvasContext("myCanvas")

wx.downloadFile({
  url: "https://example.com/audio/123", //僅為示例，并非真實的資源
  success: function(res) {
    // 只要服務(wù)器有響應(yīng)數(shù)據(jù)，就會把響應(yīng)內(nèi)容寫入文件并進(jìn)入 success 回調(diào)，業(yè)務(wù)需要自行判斷是否下載到了想要的內(nèi)容
    ctx.drawImage(res.tempFilePath, 0, 0, 150, 100)
    ctx.draw()
  }
})
坑四：在 微信6.6.1版本，wx.drawImage 當(dāng) sy > sHeight 繪制不出圖片

官方bug，已在微信6.6.2修復(fù)

const ctx = wx.createCanvasContext("myCanvas")
ctx.drawImage(img, 0, 999, 800, 950, 0, 0, 400, 475) // 出現(xiàn)黑色底圖
坑五：放大canvas尺寸后首次wx.drawImage，圖片會出現(xiàn)黑邊

原因是更改canvas尺寸后，canvns還沒重繪完成就執(zhí)行了wx.drawImage，所以會出現(xiàn)圖片繪制不全的情況。解決方案是使用一張足夠大的畫布，在上面進(jìn)行drawIamge，wx.canvasToTempFilePath的時候輸出圖片大小傳drawImage的寬高。

坑六：invokeCanvasMethod 數(shù)據(jù)傳輸長度為 1372965 已經(jīng)超過最大長度 1048576

需求是操作三張圖片的imageData進(jìn)行合成圖片，但是結(jié)果canvasPutImageData的時候報數(shù)據(jù)傳輸長度超出最大長度1M，
但是壓縮到1M后圖片質(zhì)量又很模糊（最大只有510*510像素）。
解決方法是將imageData通過JPEG庫轉(zhuǎn)成ArrayBuffer，再通過wx.arrayBufferToBase64轉(zhuǎn)成base64，一頓操作之后終于沒有1MB的限制了，但是操作數(shù)據(jù)也不宜過大，不然會導(dǎo)致頁面卡死。

let arrBuffer = new JPEG().encode(resultImgData, 100, true)
let res = `data:image/jpeg;base64,${wx.arrayBufferToBase64(arrBuffer)}`
坑七： iOS 微信6.6.2分享后頁面點擊不響應(yīng)

官方bug，已在微信6.6.3修復(fù)

未完待續(xù)。。。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107774.html

相關(guān)文章

  • 小程序踩坑記錄

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

    lily_wang 評論0 收藏0

  • mpvue實現(xiàn)微信小程序（歡迎踩坑）

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

    jas0n 評論0 收藏0

  • mpvue實現(xiàn)微信小程序（歡迎踩坑）

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

    xuexiangjys 評論0 收藏0

  • mpvue實現(xiàn)微信小程序（歡迎踩坑）

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

    notebin 評論0 收藏0

  • FE.WX-小程序“無聊廣場”游戲前端性能優(yōu)化與踩坑攻略

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

    qpal 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<