一：踩坑之路

前段時間公司(si)要求做了一個微信小程(cheng)序(xu)，現(xian)在(zai)趁著還算空(kong)閑，總結一下(xia)小程(cheng)序(xu)中所遇到的問題(ti)。

有微信(xin)提供的(de)文檔接口和開(kai)發者(zhe)工具，完成起來總(zong)是(shi)感(gan)覺那(nei)么暢快，但是(shi)在手(shou)機上預覽后，總(zong)是(shi)會有這樣那(nei)樣的(de)問題(ti)：

1、背(bei)景圖片(pian)的問題(ti)

　　微信要求打包(bao)的小(xiao)程(cheng)序(xu)不(bu)超過1M，也(ye)(ye)許是出于這個原因，微信不(bu)允許用本地圖(tu)(tu)(tu)片(pian)(pian)，但(dan)可以使用image標簽來展示圖(tu)(tu)(tu)片(pian)(pian)，或者將背景圖(tu)(tu)(tu)轉為base64，也(ye)(ye)或者用圖(tu)(tu)(tu)片(pian)(pian)網絡地址也(ye)(ye)可以，將圖(tu)(tu)(tu)片(pian)(pian)存到(dao)服(fu)務(wu)器(qi)上(shang)，但(dan)是每次(ci)圖(tu)(tu)(tu)片(pian)(pian)有修改(gai)都要重(zhong)新上(shang)傳，如此(ci)也(ye)(ye)是很(hen)麻(ma)煩；base64圖(tu)(tu)(tu)片(pian)(pian)編碼如果(guo)圖(tu)(tu)(tu)片(pian)(pian)大的話編碼會很(hen)長，但(dan)是這種(zhong)也(ye)(ye)算方(fang)面些；

2、圖(tu)片(pian)問(wen)題(ti)：一般頁(ye)面背景(jing)(jing)圖(tu)選(xuan)擇用png格式的圖(tu)片(pian)，但是(shi)在小程序中，一般格式的圖(tu)片(pian)作為(wei)背景(jing)(jing)圖(tu)會很(hen)模糊，所以選(xuan)擇了矢量圖(tu)svg來作為(wei)背景(jing)(jing)圖(tu)base64轉碼；

3、數據接(jie)口：小(xiao)程序規定接(jie)口必須(xu)是https的請(qing)求(qiu)(qiu)，必須(xu)在小(xiao)程序的管理后臺配置好請(qing)求(qiu)(qiu)域(yu)名(ming)，上傳域(yu)名(ming)，開(kai)發工具可以是http；

4、頁面之間的跳轉(zhuan)(zhuan)(zhuan)：小程序的頁面跳轉(zhuan)(zhuan)(zhuan)有wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack四種(zhong)跳轉(zhuan)(zhuan)(zhuan)方式，同時規定跳轉(zhuan)(zhuan)(zhuan)不能(neng)超過(guo)5層；跳轉(zhuan)(zhuan)(zhuan)的實(shi)現通過(guo)bindtap點(dian)擊事件或(huo)組件navigator

1. <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁打開(kai)</navigator>

但是連續點(dian)擊(ji)的(de)話頁面會(hui)進行多次(ci)跳轉，這時(shi)候我的(de)解決辦法是判斷(duan)僅讓點(dian)擊(ji)一次(ci)執行操(cao)作；

5、文本(ben)框(kuang)的默(mo)認(ren)提示(shi)(shi)文字：當光標到文本(ben)框(kuang)內，獲取焦(jiao)點時，默(mo)認(ren)提示(shi)(shi)文字會閃(shan)動，這個沒有去解決(jue)；

6、文(wen)本框設置為密(mi)碼框時(shi)：當文(wen)本框為密(mi)碼框時(shi)，type="text"，手機鍵盤第一次輸入數字(zi)(zi)后閃動到(dao)字(zi)(zi)母鍵盤，這個(ge)沒(mei)有去解決(jue)；

7、按(an)鈕(niu)的(de)點擊效果(guo)：文檔中提示當(dang)hover-class="none"時(shi)，沒有點擊效果(guo)，但是并不(bu)是如此；當(dang)button按(an)鈕(niu)設(she)置(zhi)為鏤(lou)空(kong)時(shi)，仍然有效果(guo)的(de)出現，因此不(bu)設(she)置(zhi)鏤(lou)空(kong)就可以了(le)；

8、消(xiao)息提(ti)示框類(lei)型：小程序只提(ti)供了兩(liang)種消(xiao)息提(ti)示框類(lei)型：success、loading；對于有些(xie)需要提(ti)示的地方總是不(bu)合(he)時(shi)宜，因此(ci)就(jiu)自己寫(xie)了一個；

9、小(xiao)(xiao)程序的(de)布(bu)局(ju)：布(bu)局(ju)用了rpx布(bu)局(ju)，基本適應了大部分手機(ji)(ji)的(de)大小(xiao)(xiao)，但是小(xiao)(xiao)屏手機(ji)(ji)就需要特別適應；

10、錄(lu)音(yin)功能：小程序的(de)錄(lu)音(yin)格式是silk的(de)，在其他播放(fang)控件(jian)上是不能播放(fang)的(de)，wx.playVoice是可(ke)以播放(fang)本地緩存錄(lu)音(yin)文(wen)件(jian)的(de)；所以上傳錄(lu)音(yin)文(wen)件(jian)必(bi)須(xu)要進(jin)行轉碼，這個(ge)我們(men)是有(you)后臺進(jin)行轉碼處(chu)理的(de)。

二：坑點合集

分享者：o2team，原文地址

假(jia)如你(ni)有(you)其中的解決方(fang)法或思路，歡迎回復在這里！

input 組(zu)件

placeholder 文(wen)字與 input 的值(zhi)重疊(die)

暫(zan)無解決方(fang)案

獲(huo)取(qu)焦點(dian)(dian) 和(he)(he) 失(shi)去焦點(dian)(dian) 時，光標(biao)和(he)(he)文(wen)字跳動

暫無解決方案(an)

當 input 設置為居中對齊時(shi)，光標會出(chu)現(xian)在奇怪的位置

暫無解決方(fang)案(an)

bindconfirm 事(shi)件在失去焦點時也會觸(chu)發，類似(si)于 blur（微信版本 6.5.3）

暫(zan)無解決方案

對 input 做動(dong)畫(hua)時，如(ru)果是獲取焦點狀態，會失效

暫無(wu)解決(jue)方案(an)，因為 input 在獲(huo)取(qu)焦(jiao)點時是 native 組件，失去(qu)焦(jiao)點后改回

web 組件  type 為 idcard, digit 時并不是(shi)調用數字鍵盤

暫無(wu)解決方案，目前起作用的只有(you) number

scroll-view 組(zu)件

安卓下列表較長時滾(gun)動白屏

目測是渲染性能的問題(ti)

動(dong)態渲(xuan)染列(lie)表內容的時候(hou)，滾動(dong)條回到頂部

手動設置 scrollTop 值，組(zu)件自己并不(bu)會自動更新這個(ge)值

image 組件(jian)

image 標簽(qian)的 url 需(xu)要(yao)添加協議

添加協議頭

調試(shi)

控制臺(tai)輸出錯(cuo)誤信(xin)息(xi)不(bu)正確，如 語法錯(cuo)誤 等(deng)會輸出錯(cuo)誤指向文(wen)件(jian)頂部(bu)，而不(bu)是出錯(cuo)的(de)位置

暫無解決(jue)方案

系統錯誤 {“baseresponse":{"errcode":-80002,"errmsg”:””}}`

無權限?

某些情況下(xia) wxml 面板空白

暫無解決方案

某些奇怪的原因導致真機出現 $gwx 錯誤

檢查 wx:key 是否配置(zhi)正確

樣式

nth-child、nth-of-type 不支持

單獨(du)使用(yong) class 控制

元素設(she)置為(wei) inline-block時(shi)，調試工具(ju) 與 真(zhen)機表(biao)現(xian)不一致，調試工具(ju)有(you)間隔(ge)，真(zhen)機無間隔(ge)

設(she)置 font-size:0

navigator 標簽 display: flex; 失(shi)效

暫無解決方案

hidden 指(zhi)令值(zhi)為 true 時無效

手動設置樣式(shi)控制，因為某些(xie)情(qing)況(kuang)下，微(wei)信的 display: none 的權(quan)重比較低，會被覆(fu)蓋

background-iamge在真(zhen)機環境下，無法使用相對(dui)路徑的圖片(pian)

可(ke)以使(shi)用 base64 或者外鏈，也可(ke)以使(shi)用 image 組件替(ti)代

clip-path 在安卓機上(shang)性能消耗嚴重，與(yu) scroll-view 一起使用時，會導(dao)致 scroll-view 滾(gun)動嚴重卡頓

使用別的(de)樣(yang)式替換 clip-path

API

已拉起(qi)的鍵盤無法(fa)收(shou)起(qi)，wx.hideKeyboard() 方法(fa)無效

暫無解決方案(an)

快(kuai)速點擊(ji)導致頁面(mian)重(zhong)復(fu)打開

暫無解決(jue)方案

onReachBottom 被重復觸發

改用 scroll-view 或者 手動節流

Modal 彈窗中的內(nei)容(rong)無法換行

自定義彈窗組(zu)件(jian)

wx.request 只(zhi)支持(chi) UTF8 編碼

轉換編碼

wx.previewImage 不(bu)會使用(yong)Image 組件已(yi)經加載過的圖片緩存

暫無解決方案

兼容性

安(an)卓(zhuo)下目前沒有分享功能(neng)

暫無解決方案

scroll-view 使(shi)用(yong) flex 布(bu)局，使(shi)用(yong) flex: 1 撐起高度時，安卓下 scroll-view 會對下方元素造成不可見的遮擋

可(ke)再設置 height: calc(100% - xxx px); 進(jin)行兼(jian)容(rong)

安卓下(xia)使(shi)用(yong)的是(shi) X5 內(nei)核(he)，所以很多特性無法使(shi)用(yong)，比如(ru) Promise、Object.assign、Array.prototype.includes 等等

單獨引入 polyfill  其(qi)他(ta)

require 只(zhi)能引入(ru) .js 文(wen)件(jian)，沒有文(wen)件(jian)后(hou)綴或者后(hou)綴不是.js 會(hui)在最后(hou)補上 ‘.js’

暫(zan)無解決(jue)方(fang)案

wxml 和(he) wxss 文件(jian)引(yin)入文件(jian)可以使(shi)用絕對路(lu)徑，以當前應用程序的目錄為根目錄，js 文件(jian)不(bu)行

暫無(wu)解決方案

模板中出現的某些特(te)殊(shu)符號（如(ru) word 中插(cha)入的符號）導致模板渲染失敗

替換(huan)符號 或者(zhe) 使用變量

通(tong)過 querystring 方式(shi)進行(xing)頁面傳(chuan)值的(de)時候，內容包含(han) % 會解碼錯誤

將 % 進行 URL 編碼(ma)為 %25，微信會自動解碼(ma)