一：踩坑之路

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

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

1、背景圖片的問題

微信要求打包的小程序不超過1M，也許是出于這個原因，微信不允許用本地圖片，但可以使用image標簽來展示圖片，或者將背景圖轉(zhuǎn)為base64，也或者用圖片網(wǎng)絡地址也可以，將圖片存到服務器上，但是每次圖片有修改都要重新上傳，如此也是很麻煩;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

在當前頁打開

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

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

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

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

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

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

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

二：坑點合集

分享者：o2team，原文地址

假如你有其中的解決方法或思路，歡迎回復在這里!

input 組件

placeholder 文字與 input 的值重疊

暫無解決方案

獲取焦點 和 失去焦點 時，光標和文字跳動

暫無解決方案

當 input 設置為居中對齊時，光標會出現(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)容的時候，滾動條回到頂部

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

image 組件

image 標簽的 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 控制

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

設置 font-size:0

navigator 標簽 display: flex; 失效

暫無解決方案

hidden 指令值為 true 時無效

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

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

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

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

使用別的樣式替換 clip-path

API

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

暫無解決方案

快速點擊導致頁面重復打開

暫無解決方案

onReachBottom 被重復觸發(fā)

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

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

自定義彈窗組件

wx.request 只支持 UTF8 編碼

轉(zhuǎn)換編碼

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

暫無解決方案

兼容性

安卓下目前沒有分享功能

暫無解決方案

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

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

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

單獨引入 polyfill

其他

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

暫無解決方案

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

暫無解決方案

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

替換符號 或者 使用變量

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

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