如果你是新手,推薦你先看官方文檔,如果你在開發(fā)小程序過程中遇到一些不懂的地方,可以看看這篇文章會不會給你啟發(fā)。
細(xì)則
1、優(yōu)先使用rpx替代px。
2、設(shè)計圖通常按照iPhone6的基準(zhǔn)。
3、當(dāng)使用一些交互組件時,優(yōu)先從官方組件里面挑選,沒有再自定義組件。
4、自定義組件通常按照以下格式來寫js。
Component({
options: {
multipleSlots: true
},
properties: {
data: {
type: String
}
},
methods: {
handleClcik: function (e) {
if (!!e) {
//handleClcik類似一個回調(diào)函數(shù),點擊當(dāng)前自定義組件的某個按鈕觸發(fā)
this.triggerEvent(\'_handleClcik\', e)
}
}
}
})
5、自定義組件還需要增加json文件。
{
component: true
}
6、自定義組件的wxml和wxss和官方組件寫法一樣。
7、事件通常以catch或者bind開頭,事件函數(shù)用雙引號括起來,當(dāng)然單引號也是可以的。catch和bind的區(qū)別是前者不會冒泡,后者支持冒泡。
8、如果你的page引用了某個自定義組件,需要在json配置路徑,否則不能在page里面調(diào)用。
{
usingComponents: {
myComponent: /components/MyComponent/myComponent
}
}
9、在page里面調(diào)用自定義組件也很簡單,下面這種方式。_handleClcik對應(yīng)自定義組件里面的triggerEvent。
data={{data}}
bind:_handleClcik=_handleClcik
10、組件中的事件如何傳遞參數(shù)呢?這就需要用到HTML5的 data-xx 了。
bindtap=handleClcikdata-item={{data}}
{{data}}
接著你可以根據(jù)上面用到的triggerEvent傳遞的e,將數(shù)據(jù)和函數(shù)一起傳遞給父組件中獲取執(zhí)行。
_handleClcik: function(e) {
console.log(e) //打印它,你會看到當(dāng)前點擊對象的實例。
}
11、小程序沒有window對象,所有原生組件(包括view)、自定義組件等,通過操作它們的實例,可以獲取到組件的信息(比如高度)。
let query = wx.createSelectorQuery()
query.select(\'#id\').boundingClientRect()
query.exec((res) => {
console.log(res) //當(dāng)前組件實例的屬性
})
12、onReady是確保你的組件已經(jīng)實例并且渲染完成的函數(shù)。
13、更新數(shù)據(jù)通過 this.setData({}) 來完成,這種行為很像React,但在小程序中是同步的操作。
14、給組件綁定數(shù)據(jù)就很簡單了,2個大括號 {{data}}。
15、在組件中設(shè)置三元表達(dá)式。有時候,我們需要用三元表達(dá)式判斷樣式。
style=color: {{isRed: \'#f00\' : \'#fff\'}}
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)