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

細(xì)則

1、優(yōu)先使用rpx替代px。

2、設(shè)計(jì)圖通常按照iPhone6的基準(zhǔn)。

3、當(dāng)使用一些交互組件時(shí)，優(yōu)先從官方組件里面挑選，沒有再自定義組件。

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

Component({

options: {
    multipleSlots: true
  },

properties: {
    data: {
      type: String
    }
  },
  methods: {
    handleClcik: function (e) {
      if (!!e) {
        //handleClcik類似一個(gè)回調(diào)函數(shù)，點(diǎn)擊當(dāng)前自定義組件的某個(gè)按鈕觸發(fā)
        this.triggerEvent(\'_handleClcik\', e)
      }
    }
  }
})

5、自定義組件還需要增加json文件。

{

component: true

}

6、自定義組件的wxml和wxss和官方組件寫法一樣。

7、事件通常以catch或者bind開頭，事件函數(shù)用雙引號(hào)括起來，當(dāng)然單引號(hào)也是可以的。catch和bind的區(qū)別是前者不會(huì)冒泡，后者支持冒泡。

 

 

8、如果你的page引用了某個(gè)自定義組件，需要在json配置路徑，否則不能在page里面調(diào)用。

{

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

9、在page里面調(diào)用自定義組件也很簡單，下面這種方式。_handleClcik對(duì)應(yīng)自定義組件里面的triggerEvent。

    data={{data}}

    bind:_handleClcik=_handleClcik

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

    bindtap=handleClcik

    data-item={{data}}

{{data}}

接著你可以根據(jù)上面用到的triggerEvent傳遞的e，將數(shù)據(jù)和函數(shù)一起傳遞給父組件中獲取執(zhí)行。

 

_handleClcik: function(e) {
    console.log(e) //打印它，你會(huì)看到當(dāng)前點(diǎn)擊對(duì)象的實(shí)例。
}

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

12、onReady是確保你的組件已經(jīng)實(shí)例并且渲染完成的函數(shù)。

13、更新數(shù)據(jù)通過 this.setData({}) 來完成，這種行為很像React，但在小程序中是同步的操作。

14、給組件綁定數(shù)據(jù)就很簡單了，2個(gè)大括號(hào) {{data}}。

15、在組件中設(shè)置三元表達(dá)式。有時(shí)候，我們需要用三元表達(dá)式判斷樣式。

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