如果你是新手(shou)，推薦你先看官方文(wen)檔，如果你在開發小程(cheng)序過程(cheng)中遇到一些不(bu)懂的地方，可(ke)以看看這篇文(wen)章會(hui)不(bu)會(hui)給你啟發。

細則

1、優先使用rpx替代(dai)px。

2、設計圖(tu)通常(chang)按照iPhone6的基準。

3、當使用(yong)一些交互組(zu)(zu)件時，優先從官方組(zu)(zu)件里面挑選，沒有再自定義組(zu)(zu)件。

4、自定義(yi)組件通常按照以下格式來寫js。

Component({

options: {
    multipleSlots: true
  },

properties: {
    data: {
      type: String
    }
  },
  methods: {
    handleClcik: function (e) {
      if (!!e) {
        //handleClcik類似一個回調函數，點擊當前自定義組件的某個按鈕觸發
        this.triggerEvent(\'_handleClcik\', e)
      }
    }
  }
})

5、自(zi)定義組(zu)件還需要(yao)增(zeng)加json文件。

{

component: true

}

6、自定義(yi)組件的(de)wxml和wxss和官方組件寫法(fa)一樣。

7、事(shi)件通常以catch或者(zhe)bind開頭(tou)，事(shi)件函數用雙(shuang)引(yin)號括起來，當然(ran)單引(yin)號也是可(ke)以的(de)。catch和bind的(de)區別是前者(zhe)不會冒泡(pao)，后(hou)者(zhe)支持(chi)冒泡(pao)。

 

 

8、如果你(ni)的page引用了(le)某個(ge)自定義組件，需要(yao)在json配(pei)置路(lu)徑，否則不能在page里面調用。

{

usingComponents: {
    myComponent: /components/MyComponent/myComponent
  }
}

9、在page里面(mian)(mian)(mian)調用(yong)自定義組件也很簡(jian)單，下面(mian)(mian)(mian)這種方(fang)式。_handleClcik對應自定義組件里面(mian)(mian)(mian)的(de)triggerEvent。

    data={{data}}

    bind:_handleClcik=_handleClcik

10、組件中(zhong)的事件如何傳遞參數呢？這(zhe)就需要用(yong)到HTML5的 data-xx 了。

    bindtap=handleClcik

    data-item={{data}}

{{data}}

接著你可以(yi)根據(ju)上面用到的(de)triggerEvent傳遞的(de)e，將數據(ju)和(he)函數一起傳遞給父組件中(zhong)獲(huo)取執行。

 

_handleClcik: function(e) {
    console.log(e) //打印它，你會看到當前點擊對象的實例。
}

11、小程序沒有window對象，所有原生組件（包括view）、自定義組件等，通過操作它們的實例，可以獲取到組件的信息（比如高度）。
let query = wx.createSelectorQuery()
    query.select(\'#id\').boundingClientRect()
    query.exec((res) => {
      console.log(res) //當前組件實例的屬性
    })

12、onReady是(shi)確保你(ni)的組件(jian)已經實例并且渲染完成的函數。

13、更(geng)新數據(ju)通(tong)過(guo) this.setData({}) 來完成，這種行為很(hen)像React，但在(zai)小(xiao)程序中(zhong)是同步的(de)操作。

14、給組(zu)件綁(bang)定數據就很(hen)簡單了(le)，2個大(da)括號 {{data}}。

15、在組件中設置三元表達式。有時候，我們需要用三元表達式判斷樣式。

    style=color: {{isRed: \'#f00\' : \'#fff\'}}