小程序開發中的那些小坑

CODING 發布于2019-08-29 16:25 / 2399人閱讀

摘要：解決方法用組件替換組件，用微信小程序的實現點擊切換效果除此之外，在中也不能使用組件。接口更改問題微信小程序最近被吐槽最多的一個更改，就是用戶使用開發和體驗版時不會彈出授權，正式版不受影響。

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

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

解決辦法：

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

2.小程序textarea組件問題

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

   解決辦法：
     
         
         內容：

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適配時，底部多余部分使用圖片時


路徑是 src="imgs/iphoneX.png">

發現在pc IDE上面可以顯示出來，但是真機調試時，圖片找不到，

然后將圖片名稱改為iphonex.png真機調試就可以了

8.小程序轉發

默認情況下，我們需要點擊小程序右上角的...才能看到轉發，這樣并不能對用戶起到引導作用，通常的做法是使用一個button，并且設置open-type為share，這樣就可以通過按鈕啟動分享。

但是原生按鈕很難看，我們可以設置一個圖片，在wxml內的代碼一般如下



當然需要通過wxss將button的樣式去掉，背景、邊框等等，代碼如下

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

注意：尤其是對 button::after 要進行設置，否則按鈕的邊框是無法去掉的。

GPU云服務器云服務器小程序開發開發小程序開發小程序開發開發制作福州小程序開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113728.html

小程序開發中的那些小坑

摘要：解決方法用組件替換組件，用微信小程序的實現點擊切換效果除此之外，在中也不能使用組件。接口更改問題微信小程序最近被吐槽最多的一個更改，就是用戶使用開發和體驗版時不會彈出授權，正式版不受影響。最近專門做小程序開發中，跟大家分享下遇到那些不得不處理的小坑，歡迎指正 1.小程序用 WxParse 在手機上不能正確解析 html 代碼并顯示解決辦法：這個是 wxparse 代碼的一個...

jerryloveemily 2019-08-26 12:11 評論0 收藏0
小程序開發中的那些小坑

摘要：解決方法用組件替換組件，用微信小程序的實現點擊切換效果除此之外，在中也不能使用組件。接口更改問題微信小程序最近被吐槽最多的一個更改，就是用戶使用開發和體驗版時不會彈出授權，正式版不受影響。最近專門做小程序開發中，跟大家分享下遇到那些不得不處理的小坑，歡迎指正 1.小程序用 WxParse 在手機上不能正確解析 html 代碼并顯示解決辦法：這個是 wxparse 代碼的一個...

Achilles 2019-08-02 11:14 評論0 收藏0
小程序開發注意事項

摘要：在小程序開發中，遇到的一些小坑。在小程序的文件中的里面，不支持復雜的表達式，目前支持簡單的三元運算算數運算邏輯判斷字符串運算數據路徑運算。是小程序的一套腳本語言，可以結合，一起構建頁面。不能調用小程序提供的接口。不能作為組件的事件回調。在小程序開發中，遇到的一些小坑。 1. 輪番圖 swiper autoplay=false 不會生效，依然會輪番。因為他會把false當作字符串處理...

geekzhou 2019-08-23 11:39 評論0 收藏0
小程序開發中的那些坑

摘要：二小程序的圖片只支持的，后臺接口不能傳或否則有些安卓機會不兼容在微信開發者工具中，可勾選不校驗合法域名業務域名版本以及證書規則即可用，但是在實體里并沒有這個選項，所以建議開發時就用路徑。前言最近小程序特別火，不用安裝，即開即用，用完就走。省流量，省安裝時間等等優勢吸引了大量用戶，幾乎所有大廠的APP都有小程序版本。我廠也有開發，所以我也加入了開發小程序的隊伍，開發中的那些注意點和各...

gself 2019-08-26 17:44 評論0 收藏0
說說微信小程序開發的那些坑

摘要：微信小程序最后的頁面大部分都頁，所以一些在上不支持的特性，在小程序里面也是有問題的，不過我們還是可以使用強大的進行轉換。微信小程序開發難，難于坑特別多本文首發于http://www.jianshu.com/p/7173... 坑一：Content-type問題坑指數：★★★★★ showImg(https://segmentfault.com/img/remote/1460000...

sushi 2019-08-21 15:09 評論0 收藏0