前段時間公司要求做了一個微信小程序,現(xiàn)在趁著還算空閑,總結(jié)一下小程序中所遇到的問題。有微信提供的文檔接口和開發(fā)者工具,完成起來總是感覺那么暢快,但是在手機上預(yù)覽 ...
前段時間公司要求做了一個微信小程序,現(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
<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,微信會自動解碼
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)