這篇文章主要介紹了開發(fā)微信小程序時(shí)需要注意的一些問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站開發(fā)、展示型成都網(wǎng)站建設(shè)、成都網(wǎng)站制作等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。

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

1. 樣式優(yōu)先級(jí)混亂

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

.my-button{  width: 140rpx;  height: 60rpx;  line-height: 60rpx;  padding: 0;
}

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

解決方案其實(shí)比較簡(jiǎn)單，給width添加!important的后綴或者style="width:140rpx"即可，修改后我們?cè)倏匆幌滦Ч?/p>

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

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

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

React有<tag {...props}></tag>這種寫法，即組件接收props不做處理，只透?jìng)鹘o下一個(gè)組件，但小程序不支持這種寫法（苦搜無果，官方文檔也沒有說明）。

這就意味著我們需要把所有button組件支持的參數(shù)都羅列在properties中：

properties: {
    classes: {
      type: String,
      value: '',
    },
    type: {
      type: String,
      value: 'default',
    },
    plain: {
      type: Boolean,
      value: false,
    },
    size: {
      type: String,
      value: 'default',
    },
    ......
  },

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

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

上面的代碼在編譯的時(shí)候就會(huì)報(bào)錯(cuò)，因?yàn)樾〕绦蚪昧诉@類選擇器。大膽猜測(cè)具體原因：這類作用范圍比較廣的選擇器和自定義組件的樣式隔離產(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調(diào)用兩次

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

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

<button bindtap="onTap"></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)
  }
},

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

<button catchtap="onTap"></button>復(fù)制代碼

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

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

// player.wxml<text class="text1" wx:if="{{ Boolean(leftText) }}">{{ leftText }}</text>復(fù)制代碼

// index.wxml<player leftText="范讀"></player>

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

// player.wxml<text class="text1" wx:if="{{ leftText }}">{{ leftText }}</text>復(fù)制代碼

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

神奇吧？

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

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

但是當(dāng)調(diào)用seek方法跳轉(zhuǎn)到指定位置播放時(shí)，onTimeUpdate就不再被調(diào)用了。

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

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í)調(diào)用play方法。

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

本想在音頻播放前拿到duration應(yīng)該是實(shí)現(xiàn)不了了，網(wǎng)上關(guān)于調(diào)用onPlay、onCanplay的說法都不太靠譜，其中一個(gè)方案是這樣的：

innerAudioContext.onCanplay(() => {  setTimeout(() => {    this.setData({      durationStr: secondToTimeStr(innerAudioContext.duration) || '--:--',
    });
  }, 500);
});

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

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

innerAudioContext.onTimeUpdate(() => {  this.setData({    durationStr: secondToTimeStr(innerAudioContext.duration) || '--:--'
  })
});

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

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

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

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

page{  background: #f9fafb;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“開發(fā)微信小程序時(shí)需要注意的一些問題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站欄目：開發(fā)微信小程序時(shí)需要注意的一些問題-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://www.rwnh.cn/article0/dghhio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、微信公眾號(hào)、關(guān)鍵詞優(yōu)化、定制網(wǎng)站、軟件開發(fā)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)