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

一、整個頁面覆蓋的自定義彈窗，滑動彈窗中的內容，頁面內容也會滑動。若是快速滾動彈窗，頁面內容和彈窗中的內容有時會錯亂。這個問題大多出如今蘋果手機上，相似事件事件穿透的效果。

自定義彈窗截圖以下：

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

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

wxml截圖：

注意：加上這個事件後，對側滑效果有所影響，若是須要側滑切換頁面，建議使用其餘方法。

二、使用了fixed定位的元素，會出現隨頁面滾動而移動的現象。社區中的說法大概是：這個是由於小程序架構的緣由致使 scroll 事件有必定的延遲，最終使 fixed 的改變不夠及時致使的。
解決辦法：在fixed定位的元素上，添加樣式：transform: translate3d(0, 0, 0);

三、使用canvas繪製分享圖，有的時候繪製錯誤，致使整張分享圖空白。
折中解決辦法：隱藏canvas，使用html結構，從新渲染分享圖。這樣方便找出究竟是哪裏繪製錯誤卻是整張圖繪製不出來，也會有更好的交互效果。還有一點好處，若是分享圖只有一屏的內容，能夠直接截圖分享（若是是蘋果，不支持截長圖）。

注意：若是分享圖中並無大量的動態內容，並不建議使用這種折中方案。由於這須要維護兩套代碼，並且當html結構渲染出來的時候，canvas可能還未繪製完畢或者繪製錯誤，會誤導用戶操做。

截圖：

四、開發者工做模擬小程序不一樣進入場景，好比：掃描二維碼，長按識別二維碼的啓動參數處理。

解決辦法：應該經過encodeURIComponent來編碼啓動參數，在當前頁面獲取頁面參數的時候，再經過decodeURIComponent來解碼。
截圖：

代碼截圖：

注意：區別於encodeURI和decodeURI的編解碼，encodeURIComponent和decodeURIComponent的組合使用範圍更廣。encodeURI對在 URI 中具備特殊含義的 ASCII 標點符號，不會進行轉義的：;/?:@&=+$,#, 而encodeURIComponent會轉義這些。趕上encodeURI不會轉義的標點符號，URI會直接被截取掉。

隨記：最近，太陽再也不流浪；最近，想碰見更好的本身~