小程序開發中的那些小坑

最近專門作小程序開發中，跟你們分享下遇到那些不得不處理的小坑，歡迎指正

1.小程序用 WxParse 在手機上不能正確解析 html 代碼並顯示

解決辦法：

這個是 wxparse 代碼的一個 bug，在一些特殊的手機裏面，在 wxparse/html2json.js 中的第 112 和 119 行，都有一個 console.dir 這個函數的使用，把這個函數註釋掉，內容就能夠正常顯示出來了。

2.小程序textarea組件問題

• 小程序textarea組件字數限制問題

  解決辦法：
       <view class="title content">
           <image src="/images/icon/import.png"></image>
           <text>內容：</text>
           <textarea name="content" maxlength='-1'></textarea>
         </view>

• scroll-view 中不能使用 textarea 組件。swiper和swiper-item是繼承scroll-view的,因此在他們裏面使用textarea的時候會出現很奇怪的現
  象，好比placeholder錯位。

  解決方法：用view組件替換swiper組件，用微信小程序的wx.animation()實現點擊切換效果
  
   除此以外，  在 scroll-view 中也不能使用 map、canvas、video 組件。不然會出現不少奇怪的現象

3.input組件的問題：

• placeholder 文字與 input 的值重疊 暫無解決方法

• 獲取焦點 和 失去焦點 時，光標和文字跳動 暫無解決方法

• 當 input 設置爲居中對齊時，光標會出如今奇怪的位置 暫無解決方法

• bindconfirm 事件在失去焦點時也會觸發，相似於 blur 暫無解決方法

• 對 input 作動畫時，若是是獲取焦點狀態，會失效 暫無解決方案，由於 input 在獲取焦點時是
  native 組件，失去焦點後改回 web 組件

• type 爲 idcard, digit 時並非調用數字鍵盤 暫無解決方案，目前起做用的只有 number

• 在input聚焦期間，不能作css動畫，不然input中的placeholder會錯位，若是動畫和聚焦都想要的話，那麼能夠在動畫完成以後，再設置聚焦

4.new Date跨平臺兼容性問題：

在Andriod使用new Date(「2018-05-30 00:00:00」)木有問題，可是在ios下面識別不出來。

由於IOS下面不能識別這種格式，須要用2018/05/30 00:00:00格式。可使用正則表達式對作字符串替換，將短橫替換爲斜槓。

var iosDate= date.replace(/-/g, '/');

5.wx.getUserInfo()接口更改問題：

微信小程序最近被吐槽最多的一個更改，就是用戶使用wx.getUserInfo（開發和體驗版）時不會彈出受權，正式版不受影響。如今受權方式是須要引導用戶點擊一個受權按鈕，而後再彈出受權。

• 解法很長，請參考:

  微信小程序不支持wx.getUserInfo受權的解決方法
  連接描述

• 微信小程序不支持wx.getUserInfo受權的解決方法

  getUserInfo兼容解決方案

  *只有在調試模式下，才能發送數據到本身的正式服務器
  其實，只要注意配置合法域名，這個問題就解決了。有的時候，由於一上來就開發，忘記掉去配置域名。後來發現數據無法出去，可能半天沒想來忘記配置了！*

  沒法獲取UnionID的問題

  部分小程序沒法獲取UnionId緣由
  給產品經理講技術：微信的openid和unionid

  login獲取UID必須知足兩個條件：
  
  把小程序和公衆號都綁定在開放平臺；用戶必須已經關注公衆號。
  用wx.getUserInfo獲取知足一個條件：把小程序和公衆號都綁定在開放平臺；

6.wx.getSystemInfoSync獲取windowHeight不許確：

主要緣由在於獲取是時機，wx.getSystemInfoSync是在頁面初始化的時候就計算了，基本上能夠理解爲是屏幕高度。因此，最好的方法是使用異步接口，而且在onReady函數中調用。

onReady() {
  wx.getSystemInfo({
    success({windowHeight}) {
      // todo
    }
  });
}

7.圖片本地資源名稱，儘可能使用小寫命名：

在解決iPhone X適配時，底部多餘部分使用圖片時

<image src="/imgs/iphoneX.png" mode="aspectFill">
路徑是 src='imgs/iphoneX.png'></image>

發如今pc IDE上面能夠顯示出來，可是真機調試時，圖片找不到，

而後將圖片名稱改成iphonex.png真機調試就能夠了

<image src="/imgs/iphonex.png" mode="aspectFill"></image>

8.小程序轉發

默認狀況下，咱們須要點擊小程序右上角的...才能看到轉發，這樣並不能對用戶起到引導做用，一般的作法是使用一個button，而且設置open-type爲share，這樣就能夠經過按鈕啓動分享。

可是原生按鈕很難看，咱們能夠設置一個圖片，在wxml內的代碼通常以下

<button open-type="share"><image src="/images/icon-share.png"></image></button>

固然須要經過wxss將button的樣式去掉，背景、邊框等等，代碼以下

button {
    padding:0;
    margin:0 auto;
    width:70rpx;
    height:70rpx;
    display:block;
    border:0;
    background: transparent;
}
button::after {
    border:0; 
}

注意：尤爲是對 button::after 要進行設置，不然按鈕的邊框是沒法去掉的。