概要(yào)

由于公司的(de)業(yè)務需求，本想年(nián)底偷個(gè)懶λ<'，但(dàn)是(shì)開(kāi)發小(xiǎo)程序的(de)任務襲來(lái§♠↕×)。

第一(yī)次開(kāi)發這(zhè)玩(wán)意，記錄¶¥£一(yī)些(xiē)需要(yào)注意的(de)點，以÷∏→✘後再次開(kāi)發時(shí)可(kě)以快(kuài)速解決。

如(rú)果你(nǐ)是(shì)新手，推薦你(nǐ)先看(kàn)官方文(w'​én)檔，如(rú)果你(nǐ)在開(kāi)發小(xiǎo)程序過程中遇到π÷(dào)一(yī)些(xiē)不(bù)懂(dǒng)的(de)地(dì)方，可(kě)以看∑Ω(kàn)看(kàn)這(zhè)篇文(wén)章(zhāng)會(huì)不(bù)會(hu‌↔ì)給你(nǐ)啓發。

細則

1、優先使用(yòng)rpx替代px。

2、設計(jì)圖通(tōng)常按照(zhào)iPhone6的(de)基準。

3、當使用(yòng)一(yī)些(xiē)交互組件(jiàn)時(shí)，優先從(cóng)©‍官方組件(jiàn)裡(lǐ)面挑選，沒有(yǒu)再自(zì)定義組件(jiàn)。

4、自(zì)定義組件(jiàn)通(tōng)常按照(zhào)以下(xi​≠à)格式來(lái)寫js。

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    data: {
      type: String
    }
  },
  methods: {
    handleClcik: function (e) {
      if (!!e) {
        //han"✘dleClcik類似一(yī)個(gè)回調函數(shù)，點擊當$φ$前自(zì)定義組件(jiàn)的(de)某個(gè)按鈕觸發
        thi↓ ♦s.triggerEvent('_handleClcik', e)
      }
    }
  }
≥♦÷>
})

5、自(zì)定義組件(jiàn)還(hái)需要(yào∏‌)增加json文(wén)件(jiàn)。

{
  "component": true
}

6、自(zì)定義組件(jiàn)的(de)wxml和(hé₩∞)wxss和(hé)官方組件(jiàn)寫法一(yī)±¶↔≠樣。

7、事(shì)件(jiàn)通(tōng)常以catch或者bind開¶♦π§(kāi)頭，事(shì)件(jiàn)函數(shù)用(yòng)雙引号括起來(¥♦←<lái)，當然單引号也(yě)是(shì)可(kě)以±γ的(de)。catch和(hé)bind的(de)區(qū)别是(shì)前∏‌者不(bù)會(huì)冒泡，後者支持冒泡。

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

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

8、如(rú)果你(nǐ)的(de)page引用(y§₩♥∑òng)了(le)某個(gè)自(zì)定義組件(j₩→iàn)，需要(yào)在json配置路(lù)徑，否則☆'•≥不(bù)能(néng)在page裡(lǐ)面調用(yòng)。

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

9、在page裡(lǐ)面調用(yòng)自(zì)定義組件(jπ÷iàn)也(yě)很(hěn)簡單，下(xià)面這(zhè)種方式​‌ 。_handleClcik對(duì)應自(zì)定義組件(jiàn)裡(lǐ)面的(de)tri→₽©ggerEvent。

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

10、組件(jiàn)中的(de)事(shì)件(jiàn)如(β&$§rú)何傳遞參數(shù)呢(ne)？這(zhè)就(jiù)需要(yào)用(yòng)≥♠♣£到(dào)HTML5的(de) data-xx 了(le)。

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

接著(zhe)你(nǐ)可(kě)以根據上(shàng)α♣面用(yòng)到(dào)的(de)triggerEvent傳遞的(de)e，将數(shù™✔→©)據和(hé)函數(shù)一(yī)起傳遞給父組件(jiàn)中獲取執行(xíng)。

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

11、小(xiǎo)程序沒有(yǒu)window對(duì)象，所有(yǒ ≥u)原生(shēng)組件(jiàn)（包括view）、自(zì)定義組件(jiàn)等，通(≠'≤↕tōng)過操作(zuò)它們的(de)實例，可(kě)以獲取到(dào​₩☆ε)組件(jiàn)的(de)信息（比如(rú)高(gāo)度）。

let query = wx.createSelectorQuery()
    query.sele★∞ct('#id').boundingClientRect()
    qu£→ery.exec((res) => {
      console.log(res) //當前組件(jiàn)實例的(de)屬性
    })

12、onReady是(shì)确保你(nǐ)的(de)組件(jiàn)已經實例♠→✔γ并且渲染完成的(de)函數(shù)。

13、更新數(shù)據通(tōng)過 this. ∏‍setData({}) 來(lái)完成，這(zhè)種行(xíng)為(wèi)很(→Ωhěn)像React，但(dàn)在小(xiǎo)程序中是(shì)同步的(de)操作(zuò)。♣₽←€

14、給組件(jiàn)綁定數(shù)據就(jiù)很(hěn)簡單了(le✔≤)，2個(gè)大(dà)括号 {{data}}。

15、在組件(jiàn)中設置三元表達式。有(yǒu)時(shí)候，我們需要(yào)用(∑×yòng)三元表達式判斷樣式。

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

總結

暫時(shí)隻想到(dào)這(zhè)些(xiē)，更多(duō)的(de)用(yòφ ng)法在官方文(wén)檔有(yǒu)詳細說(shuō)明(•σ≠míng)。