一：踩坑之路

前段時間公司要求做了一個微信小程序，現(xiàn)在趁著還算空閑，總結(jié)一下小程序中所遇到的問題。

有微信提供的文檔接口和開發(fā)者工具，完成起來總是感覺那么暢快，但是在手機上預(yù)覽后，總是會有這樣那樣的問題：

1、背景圖片的問題

　　微信要求打包的小程序不超過1M，也許是出于這個原因，微信不允許用本地圖片，但可以使用image標(biāo)簽來展示圖片，或者將背景圖轉(zhuǎn)為base64，也或者用圖片網(wǎng)絡(luò)地址也可以，將圖片存到服務(wù)器上，但是每次圖片有修改都要重新上傳，如此也是很麻煩；base64圖片編碼如果圖片大的話編碼會很長，但是這種也算方面些；

2、圖片問題：一般頁面背景圖選擇用png格式的圖片，但是在小程序中，一般格式的圖片作為背景圖會很模糊，所以選擇了矢量圖svg來作為背景圖base64轉(zhuǎn)碼；

3、數(shù)據(jù)接口：小程序規(guī)定接口必須是https的請求，必須在小程序的管理后臺配置好請求域名，上傳域名，開發(fā)工具可以是http；

4、頁面之間的跳轉(zhuǎn)：小程序的頁面跳轉(zhuǎn)有wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack四種跳轉(zhuǎn)方式，同時規(guī)定跳轉(zhuǎn)不能超過5層；跳轉(zhuǎn)的實現(xiàn)通過bindtap點擊事件或組件navigator

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

但是連續(xù)點擊的話頁面會進行多次跳轉(zhuǎn)，這時候我的解決辦法是判斷僅讓點擊一次執(zhí)行操作；

5、文本框的默認(rèn)提示文字：當(dāng)光標(biāo)到文本框內(nèi)，獲取焦點時，默認(rèn)提示文字會閃動，這個沒有去解決；

6、文本框設(shè)置為密碼框時：當(dāng)文本框為密碼框時，type="text"，手機鍵盤第一次輸入數(shù)字后閃動到字母鍵盤，這個沒有去解決；

7、按鈕的點擊效果：文檔中提示當(dāng)hover-class="none"時，沒有點擊效果，但是并不是如此；當(dāng)button按鈕設(shè)置為鏤空時，仍然有效果的出現(xiàn)，因此不設(shè)置鏤空就可以了；

8、消息提示框類型：小程序只提供了兩種消息提示框類型：success、loading；對于有些需要提示的地方總是不合時宜，因此就自己寫了一個；

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

10、錄音功能：小程序的錄音格式是silk的，在其他播放控件上是不能播放的，wx.playVoice是可以播放本地緩存錄音文件的；所以上傳錄音文件必須要進行轉(zhuǎn)碼，這個我們是有后臺進行轉(zhuǎn)碼處理的。

二：坑點合集

分享者：o2team，原文地址

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

input 組件

placeholder 文字與 input 的值重疊

暫無解決方案

獲取焦點 和 失去焦點 時，光標(biāo)和文字跳動

暫無解決方案

當(dāng) input 設(shè)置為居中對齊時，光標(biāo)會出現(xiàn)在奇怪的位置

暫無解決方案

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

暫無解決方案

對 input 做動畫時，如果是獲取焦點狀態(tài)，會失效

暫無解決方案，因為 input 在獲取焦點時是 native 組件，失去焦點后改回

web 組件  type 為 idcard, digit 時并不是調(diào)用數(shù)字鍵盤

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

scroll-view 組件

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

目測是渲染性能的問題

動態(tài)渲染列表內(nèi)容的時候，滾動條回到頂部

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

image 組件

image 標(biāo)簽的 url 需要添加協(xié)議

添加協(xié)議頭

調(diào)試

控制臺輸出錯誤信息不正確，如 語法錯誤 等會輸出錯誤指向文件頂部，而不是出錯的位置

暫無解決方案

系統(tǒng)錯誤 {“baseresponse":{"errcode":-80002,"errmsg”:””}}`

無權(quán)限?

某些情況下 wxml 面板空白

暫無解決方案

某些奇怪的原因?qū)е抡鏅C出現(xiàn) $gwx 錯誤

檢查 wx:key 是否配置正確

樣式

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

單獨使用 class 控制

元素設(shè)置為 inline-block時，調(diào)試工具 與 真機表現(xiàn)不一致，調(diào)試工具有間隔，真機無間隔

設(shè)置 font-size:0

navigator 標(biāo)簽 display: flex; 失效

暫無解決方案

hidden 指令值為 true 時無效

手動設(shè)置樣式控制，因為某些情況下，微信的 display: none 的權(quán)重比較低，會被覆蓋

background-iamge在真機環(huán)境下，無法使用相對路徑的圖片

可以使用 base64 或者外鏈，也可以使用 image 組件替代

clip-path 在安卓機上性能消耗嚴(yán)重，與 scroll-view 一起使用時，會導(dǎo)致 scroll-view 滾動嚴(yán)重卡頓

使用別的樣式替換 clip-path

API

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

暫無解決方案

快速點擊導(dǎo)致頁面重復(fù)打開

暫無解決方案

onReachBottom 被重復(fù)觸發(fā)

改用 scroll-view 或者 手動節(jié)流

Modal 彈窗中的內(nèi)容無法換行

自定義彈窗組件

wx.request 只支持 UTF8 編碼

轉(zhuǎn)換編碼

wx.previewImage 不會使用Image 組件已經(jīng)加載過的圖片緩存

暫無解決方案

兼容性

安卓下目前沒有分享功能

暫無解決方案

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

可再設(shè)置 height: calc(100% - xxx px); 進行兼容

安卓下使用的是 X5 內(nèi)核，所以很多特性無法使用，比如 Promise、Object.assign、Array.prototype.includes 等等

單獨引入 polyfill  其他

require 只能引入 .js 文件，沒有文件后綴或者后綴不是.js 會在最后補上 ‘.js’

暫無解決方案

wxml 和 wxss 文件引入文件可以使用絕對路徑，以當(dāng)前應(yīng)用程序的目錄為根目錄，js 文件不行

暫無解決方案

模板中出現(xiàn)的某些特殊符號（如 word 中插入的符號）導(dǎo)致模板渲染失敗

替換符號 或者 使用變量

通過 querystring 方式進行頁面?zhèn)髦档臅r候，內(nèi)容包含 % 會解碼錯誤

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