今天微信小程式開發(fā)教學(xué)專欄為大家記錄微信小程式的踩坑。

最近參與開發(fā)了公司的第一款小程序，開發(fā)體驗(yàn)基本上類似於基於webview的混合式開發(fā)，可以調(diào)用官方強(qiáng)大的api，但也有一些坑洞或說不習(xí)慣的地方。這篇文章從實(shí)用性出發(fā)，記錄了開發(fā)過程中的一些問題：

#1. 樣式優(yōu)先權(quán)混亂

在使用button元件時(shí)，發(fā)現(xiàn)在class中設(shè)定width不生效，下面貼上程式碼：

.my-button{??width:?140rpx;??height:?60rpx;??line-height:?60rpx;??padding:?0;
}復(fù)制代碼

經(jīng)過微信調(diào)試工具排查後，發(fā)現(xiàn)user agent的樣式優(yōu)先權(quán)居然大於我們自己寫的樣式類，這在瀏覽器中基本上是不可能發(fā)生的事情

解其實(shí)比較簡單，給width加上!important的字尾或style="width:140rpx"即可，修改後我們?cè)倏匆幌滦Ч?/p>

加上!important之後，其實(shí)寬度的實(shí)際效果就符合我們的預(yù)期了，但是微信調(diào)試工具卻仍然顯示user agent樣式優(yōu)先，這應(yīng)該算是調(diào)試工具的一個(gè)bug吧。

2. 普通UI元件封裝，參數(shù)定義繁瑣

一般UI視覺稿中的基礎(chǔ)元件，例如button，是有特定樣式的：比方說背景色/字體。利用小程式的Component函數(shù)封裝成元件，編寫預(yù)設(shè)樣式並接收外部傳入的class，可以方便後續(xù)開發(fā)。

React有<tag></tag>這種寫法，即元件接收props不做處理，只透傳給下一個(gè)元件，但小程式不支持這種寫法（苦搜無果，官方文件也沒有說明）。

這表示我們需要把所有button元件支援的參數(shù)都羅列在properties中：

properties:?{
????classes:?{
??????type:?String,
??????value:?'',
????},
????type:?{
??????type:?String,
??????value:?'default',
????},
????plain:?{
??????type:?Boolean,
??????value:?false,
????},
????size:?{
??????type:?String,
??????value:?'default',
????},
????......
??},復(fù)制代碼

3. 全域樣式選擇器*被禁用

*{
??box-sizing:?border-box;
}復(fù)制代碼

上面的程式碼在編譯的時(shí)候就會(huì)報(bào)錯(cuò)，因?yàn)樾〕淌浇昧诉@類選擇器。大膽猜測(cè)具體原因：這類作用範(fàn)圍比較廣的選擇器和自訂元件的樣式隔離產(chǎn)生了衝突？ ？

那怎麼去為小程式加入全域通用樣式？看來只能自己把用到的標(biāo)籤都手動(dòng)寫一遍了，還好網(wǎng)路上有現(xiàn)成的程式碼可以貼：

view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad{??box-sizing:?border-box;
}復(fù)制代碼

4. 自訂元件，bind:tap呼叫兩次

封裝基礎(chǔ)元件時(shí)，例如button，下面的寫法應(yīng)避免：

onTap(e)?{??if?(!this.data.disabled?&&?!this.data.loading)?{????this.triggerEvent('tap',?e.detail)
??}
},復(fù)制代碼

<button></button>復(fù)制代碼

這樣封裝出來的元件，會(huì)觸發(fā)兩次tap事件，一次是小程式自身觸發(fā)的，一次是透過triggerEvent觸發(fā)。

可以換一個(gè)非小程式內(nèi)建的事件類型，像是click：

onTap(e)?{??if?(!this.data.disabled?&&?!this.data.loading)?{????this.triggerEvent('click',?e.detail)
??}
},復(fù)制代碼

阻止tap事件冒泡也可以解決：

<button></button>復(fù)制代碼

5. 在wxml中用Boolean ()做類型轉(zhuǎn)換

例如在一個(gè)元件中，監(jiān)聽一個(gè)String類型的參數(shù)，如果不為空則顯示text標(biāo)籤，否則不顯示：

//?player.wxml<text>{{?leftText?}}</text>復(fù)制代碼

//?index.wxml<player></player>復(fù)制代碼

這種寫法，leftText欄位很明顯已經(jīng)傳遞了，但是依舊不顯示text標(biāo)籤，當(dāng)換一種寫法後：

//?player.wxml<text>{{?leftText?}}</text>復(fù)制代碼

這樣就是正確的，符合我們的期望。

神奇吧？

6. InnerAudioContext調(diào)用seek方法後，onTimeUpdate回調(diào)失效

InnerAudioContext用於播放音頻，給它傳入onTimeUpdate回調(diào)從而獲取當(dāng)前的播放進(jìn)度。

但是當(dāng)呼叫seek方法跳到指定位置播放時(shí)，onTimeUpdate就不再被呼叫了。

小程式社群其實(shí)很多人已經(jīng)提過這個(gè)問題，大概經(jīng)歷了1年半的時(shí)間可微信團(tuán)隊(duì)遲遲沒有修復(fù)，只能暫時(shí)使用折中的辦法來修復(fù)，解決方案其實(shí)很簡單：

progressOnChange(e)?{??if?(this.properties.src?&&?this.data.innerAudioContext)?{????const?innerAudioContext?=?this.data.innerAudioContext;
????innerAudioContext.pause();
????innerAudioContext.seek(innerAudioContext.duration?*?e.detail.value?/?100);????setTimeout(()?=>?{
??????innerAudioContext.play();
????},?500);
??}
},復(fù)制代碼

先暫停播放，再執(zhí)行seek方法，然後設(shè)定大概500ms的延時(shí)呼叫play方法。

7. InnerAudioContext取得duration的時(shí)機(jī)問題

本來想在音訊播放前拿到duration應(yīng)該是實(shí)作不了了，網(wǎng)路上關(guān)於呼叫onPlay、onCanplay 的說法都不太可靠，其中一個(gè)方案是這樣的：

innerAudioContext.onCanplay(()?=>?{??setTimeout(()?=>?{????this.setData({??????durationStr:?secondToTimeStr(innerAudioContext.duration)?||?'--:--',
????});
??},?500);
});復(fù)制代碼

且不說setTimeout設(shè)定多少毫秒合適，真機(jī)上是無效的。

因此還是老實(shí)的用onTimeUpdate:

innerAudioContext.onTimeUpdate(()?=>?{??this.setData({????durationStr:?secondToTimeStr(innerAudioContext.duration)?||?'--:--'
??})
});復(fù)制代碼

如果說覺得每次onTimeUpdate都要計(jì)算一次很耗性能的話，可以自行實(shí)作只計(jì)算一次。

8. 設(shè)置頁面背景色

當(dāng)前頁面的json文件中有個(gè)backgroundColor字段，但是設(shè)置后無效，后面發(fā)現(xiàn)這個(gè)字段表示的不是可見區(qū)域的背景色，而是頁面下拉時(shí)窗口的背景色。

如果需要設(shè)置頁面背景色，可以通過page標(biāo)簽的樣式設(shè)置：

page{??background:?#f9fafb;
}復(fù)制代碼

待更新...

相關(guān)免費(fèi)學(xué)習(xí)推薦：微信小程序開發(fā)教程

以上是記錄微信小程式的踩坑（開發(fā)篇）的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！