小程序開(kāi)發(fā)中的那些小坑

jerryloveemily 發(fā)布于2019-08-26 12:11 / 642人閱讀

摘要：解決方法用組件替換組件，用微信小程序的實(shí)現(xiàn)點(diǎn)擊切換效果除此之外，在中也不能使用組件。接口更改問(wèn)題微信小程序最近被吐槽最多的一個(gè)更改，就是用戶使用開(kāi)發(fā)和體驗(yàn)版時(shí)不會(huì)彈出授權(quán)，正式版不受影響。

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

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

解決辦法：

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

2.小程序textarea組件問(wèn)題

小程序textarea組件字?jǐn)?shù)限制問(wèn)題

   解決辦法：
     
         
         內(nèi)容：

scroll-view 中不能使用 textarea 組件。swiper和swiper-item是繼承scroll-view的,所以在他們里面使用textarea的時(shí)候會(huì)出現(xiàn)很奇怪的現(xiàn)
象，比如placeholder錯(cuò)位。

 解決方法：用view組件替換swiper組件，用微信小程序的wx.animation()實(shí)現(xiàn)點(diǎn)擊切換效果

 除此之外，  在 scroll-view 中也不能使用 map、canvas、video 組件。否則會(huì)出現(xiàn)很多奇怪的現(xiàn)象

3.input組件的問(wèn)題：

placeholder 文字與 input 的值重疊暫無(wú)解決方法

獲取焦點(diǎn) 和失去焦點(diǎn) 時(shí)，光標(biāo)和文字跳動(dòng) 暫無(wú)解決方法

當(dāng) input 設(shè)置為居中對(duì)齊時(shí)，光標(biāo)會(huì)出現(xiàn)在奇怪的位置暫無(wú)解決方法

bindconfirm 事件在失去焦點(diǎn)時(shí)也會(huì)觸發(fā)，類似于 blur 暫無(wú)解決方法

對(duì) input 做動(dòng)畫(huà)時(shí)，如果是獲取焦點(diǎn)狀態(tài)，會(huì)失效暫無(wú)解決方案，因?yàn)?input 在獲取焦點(diǎn)時(shí)是
native 組件，失去焦點(diǎn)后改回 web 組件

type 為 idcard, digit 時(shí)并不是調(diào)用數(shù)字鍵盤暫無(wú)解決方案，目前起作用的只有 number

在input聚焦期間，不能做css動(dòng)畫(huà)，否則input中的placeholder會(huì)錯(cuò)位，如果動(dòng)畫(huà)和聚焦都想要的話，那么可以在動(dòng)畫(huà)完成之后，再設(shè)置聚焦

4.new Date跨平臺(tái)兼容性問(wèn)題：

在Andriod使用new Date(“2018-05-30 00:00:00”)木有問(wèn)題，但是在ios下面識(shí)別不出來(lái)。

因?yàn)镮OS下面不能識(shí)別這種格式，需要用2018/05/30 00:00:00格式?？梢允褂谜齽t表達(dá)式對(duì)做字符串替換，將短橫替換為斜杠。

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

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

微信小程序最近被吐槽最多的一個(gè)更改，就是用戶使用wx.getUserInfo（開(kāi)發(fā)和體驗(yàn)版）時(shí)不會(huì)彈出授權(quán)，正式版不受影響?，F(xiàn)在授權(quán)方式是需要引導(dǎo)用戶點(diǎn)擊一個(gè)授權(quán)按鈕，然后再?gòu)棾鍪跈?quán)。

解法很長(zhǎng)，請(qǐng)參考:

微信小程序不支持wx.getUserInfo授權(quán)的解決方法
鏈接描述

微信小程序不支持wx.getUserInfo授權(quán)的解決方法

 getUserInfo兼容解決方案

*只有在調(diào)試模式下，才能發(fā)送數(shù)據(jù)到自己的正式服務(wù)器
其實(shí)，只要注意配置合法域名，這個(gè)問(wèn)題就解決了。有的時(shí)候，因?yàn)橐簧蟻?lái)就開(kāi)發(fā)，忘記掉去配置域名。后來(lái)發(fā)現(xiàn)數(shù)據(jù)沒(méi)法出去，可能半天沒(méi)想來(lái)忘記配置了！*

無(wú)法獲取UnionID的問(wèn)題
部分小程序無(wú)法獲取UnionId原因
給產(chǎn)品經(jīng)理講技術(shù)：微信的openid和unionid

login獲取UID必須滿足兩個(gè)條件：

把小程序和公眾號(hào)都綁定在開(kāi)放平臺(tái)；用戶必須已經(jīng)關(guān)注公眾號(hào)。
用wx.getUserInfo獲取滿足一個(gè)條件：把小程序和公眾號(hào)都綁定在開(kāi)放平臺(tái)；

6.wx.getSystemInfoSync獲取windowHeight不準(zhǔn)確：

主要原因在于獲取是時(shí)機(jī)，wx.getSystemInfoSync是在頁(yè)面初始化的時(shí)候就計(jì)算了，基本上可以理解為是屏幕高度。所以，最好的方法是使用異步接口，并且在onReady函數(shù)中調(diào)用。

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

7.圖片本地資源名稱，盡量使用小寫命名：

在解決iPhone X適配時(shí)，底部多余部分使用圖片時(shí)


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

發(fā)現(xiàn)在pc IDE上面可以顯示出來(lái)，但是真機(jī)調(diào)試時(shí)，圖片找不到，

然后將圖片名稱改為iphonex.png真機(jī)調(diào)試就可以了

8.小程序轉(zhuǎn)發(fā)

默認(rèn)情況下，我們需要點(diǎn)擊小程序右上角的...才能看到轉(zhuǎn)發(fā)，這樣并不能對(duì)用戶起到引導(dǎo)作用，通常的做法是使用一個(gè)button，并且設(shè)置open-type為share，這樣就可以通過(guò)按鈕啟動(dòng)分享。

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



當(dāng)然需要通過(guò)wxss將button的樣式去掉，背景、邊框等等，代碼如下

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