概要(yào / yāo)

由于(yú)公司的(de)業務需求，本想年底偷個(gè)懶，但是(shì)開發小程序的(de)任務襲來(lái)。

第一次開發這(zhè)玩意，記錄一些需要(yào / yāo)注意的(de)點，以(yǐ)後再次開發時(shí)可以(yǐ)快速解決。

如果你是(shì)新手，推薦你先看官方文檔，如果你在(zài)開發小程序過程中遇到(dào)一些不(bù)懂的(de)地(dì / de)方，可以(yǐ)看看這(zhè)篇文章會不(bù)會給你啓發。

細則

1、優先使用rpx替代px。

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

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

4、自定義組件通常按照以(yǐ)下格式來(lái)寫js。

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

5、自定義組件還需要(yào / yāo)增加json文件。

{
  "component": true
}

6、自定義組件的(de)wxml和(hé / huò)wxss和(hé / huò)官方組件寫法一樣。

7、事件通常以(yǐ)catch或者bind開頭，事件函數用雙引号括起來(lái)，當然單引号也(yě)是(shì)可以(yǐ)的(de)。catch和(hé / huò)bind的(de)區别是(shì)前者不(bù)會冒泡，後者支持冒泡。

<view catchtap="handleClcik"></view>

<view bindtap="handleClcik"></view>

8、如果你的(de)page引用了(le／liǎo)某個(gè)自定義組件，需要(yào / yāo)在(zài)json配置路徑，否則不(bù)能在(zài)page裏面調用。

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

9、在(zài)page裏面調用自定義組件也(yě)很簡單，下面這(zhè)種方式。_handleClcik對應自定義組件裏面的(de)triggerEvent。

<myComponent
    data="{{data}}"
    bind:_handleClcik="_handleClcik"
></myComponent>

10、組件中的(de)事件如何傳遞參數呢？這(zhè)就(jiù)需要(yào / yāo)用到(dào)HTML5的(de) data-xx 了(le／liǎo)。

<view 
    bindtap="handleClcik"
    data-item="{{data}}"
>{{data}}</view>

接着你可以(yǐ)根據上(shàng)面用到(dào)的(de)triggerEvent傳遞的(de)e，将數據和(hé / huò)函數一起傳遞給父組件中獲取執行。

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

11、小程序沒有window對象，所有原生組件（包括view）、自定義組件等，通過操作它們的(de)實例，可以(yǐ)獲取到(dào)組件的(de)信息（比如高度）。

let query = wx.createSelectorQuery()
    query.select('#id').boundingClientRect()
    query.exec((res) => {
      console.log(res) //當前組件實例的(de)屬性
    })

12、onReady是(shì)确保你的(de)組件已經實例并且渲染完成的(de)函數。

13、更新數據通過 this.setData({}) 來(lái)完成，這(zhè)種行爲(wéi / wèi)很像React，但在(zài)小程序中是(shì)同步的(de)操作。

14、給組件綁定數據就(jiù)很簡單了(le／liǎo)，2個(gè)大(dà)括号 {{data}}。

15、在(zài)組件中設置三元表達式。有時(shí)候，我們需要(yào / yāo)用三元表達式判斷樣式。

<view
    style="color: {{isRed: '#f00' : '#fff'}}"
></view>

總結

暫時(shí)隻想到(dào)這(zhè)些，更多的(de)用法在(zài)官方文檔有詳細說(shuō)明。