微信小程序開發(fā)中遇到的問題及解決辦法（一）

pakolagij 發(fā)布于2019-08-23 15:56 / 2497人閱讀

摘要：社區(qū)中的說法大概是這個(gè)是因?yàn)樾〕绦蚣軜?gòu)的原因?qū)е率录幸欢ǖ难舆t，最終使的改變不夠及時(shí)導(dǎo)致的。折中解決辦法隱藏，使用結(jié)構(gòu)，重新渲染分享圖。

1、整個(gè)頁面覆蓋的自定義彈窗，滑動(dòng)彈窗中的內(nèi)容，頁面內(nèi)容也會(huì)滑動(dòng)。如果快速滾動(dòng)彈窗，頁面內(nèi)容和彈窗中的內(nèi)容有時(shí)會(huì)錯(cuò)亂。這個(gè)問題大多出現(xiàn)在蘋果手機(jī)上，類似事件事件穿透的效果。

自定義彈窗截圖如下：

解決辦法：再最外層元素上添加事件：catch:touchmove="notDo"
事件代碼：

  /**
   * @desc not do
   */
  notDo: function () {
    // not do
  }

wxml截圖：

注意：加上這個(gè)事件后，對(duì)側(cè)滑效果有所影響，如果需要側(cè)滑切換頁面，建議使用其他方法。

2、使用了fixed定位的元素，會(huì)出現(xiàn)隨頁面滾動(dòng)而移動(dòng)的現(xiàn)象。社區(qū)中的說法大概是：這個(gè)是因?yàn)樾〕绦蚣軜?gòu)的原因?qū)е?scroll 事件有一定的延遲，最終使 fixed 的改變不夠及時(shí)導(dǎo)致的。
解決辦法：在fixed定位的元素上，添加樣式：transform: translate3d(0, 0, 0);

3、使用canvas繪制分享圖，有的時(shí)候繪制錯(cuò)誤，導(dǎo)致整張分享圖空白。
折中解決辦法：隱藏canvas，使用html結(jié)構(gòu)，重新渲染分享圖。這樣方便找出到底是哪里繪制錯(cuò)誤倒是整張圖繪制不出來，也會(huì)有更好的交互效果。還有一點(diǎn)好處，如果分享圖只有一屏的內(nèi)容，可以直接截圖分享（如果是蘋果，不支持截長圖）。

注意：如果分享圖中并沒有大量的動(dòng)態(tài)內(nèi)容，并不建議使用這種折中方案。因?yàn)檫@需要維護(hù)兩套代碼，而且當(dāng)html結(jié)構(gòu)渲染出來的時(shí)候，canvas可能還未繪制完畢或者繪制錯(cuò)誤，會(huì)誤導(dǎo)用戶操作。

截圖：

4、開發(fā)者工作模擬小程序不同進(jìn)入場(chǎng)景，比如：掃描二維碼，長按識(shí)別二維碼的啟動(dòng)參數(shù)處理。

解決辦法：應(yīng)該通過encodeURIComponent來編碼啟動(dòng)參數(shù)，在當(dāng)前頁面獲取頁面參數(shù)的時(shí)候，再通過decodeURIComponent來解碼。
截圖：

代碼截圖：

注意：區(qū)別于encodeURI和decodeURI的編解碼，encodeURIComponent和decodeURIComponent的組合使用范圍更廣。encodeURI對(duì)在 URI 中具有特殊含義的 ASCII 標(biāo)點(diǎn)符號(hào)，不會(huì)進(jìn)行轉(zhuǎn)義的：;/?:@&=+$,#, 而encodeURIComponent會(huì)轉(zhuǎn)義這些。遇上encodeURI不會(huì)轉(zhuǎn)義的標(biāo)點(diǎn)符號(hào)，URI會(huì)直接被截取掉。

隨記：最近，太陽不再流浪；最近，想遇見更好的自己~