成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

小程序初踩坑

RyanHoo / 1261人閱讀

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

寫在前面

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

框架選用

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

下圖為美團(tuán)提供的一張框架對(duì)比圖，具體對(duì)比可以參考下，需要注意的是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()是沒(méi)辦法調(diào)用到的，需要this.methods.funcname()。想把函數(shù)掛載在實(shí)例下，可以直接在class中定義函數(shù)就可以了，與onLoad同級(jí)。
坑二：小程序默認(rèn)頁(yè)

小程序是以config中的pages數(shù)組的第一個(gè)元素作為默認(rèn)頁(yè)的，如果需要更改默認(rèn)頁(yè)則需要更改對(duì)應(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的時(shí)候會(huì)出現(xiàn)黑色的底圖，原因是wx.drawImage無(wú)法直接加載網(wǎng)絡(luò)圖片，需要先使用wx.downloadFile下載文件資源到本地，在回調(diào)函數(shù)里使用tempFilePath進(jìn)行wx.drawImage，或者頁(yè)面初始化時(shí)預(yù)加載，保存tempFilePath。

const ctx = wx.createCanvasContext("myCanvas")

wx.downloadFile({
  url: "https://example.com/audio/123", //僅為示例，并非真實(shí)的資源
  success: function(res) {
    // 只要服務(wù)器有響應(yīng)數(shù)據(jù)，就會(huì)把響應(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，圖片會(huì)出現(xiàn)黑邊

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

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

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

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

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

未完待續(xù)。。。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107774.html

相關(guān)文章

  • 小程序踩坑記錄

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

    lily_wang 評(píng)論0 收藏0

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

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

    jas0n 評(píng)論0 收藏0

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

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

    xuexiangjys 評(píng)論0 收藏0

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

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

    notebin 評(píng)論0 收藏0

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

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

    qpal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<