微信小程序開發(fā)Component構(gòu)造器

如果你正在尋找一種方便快捷的方式來構(gòu)建微信小程序，那么 Component 構(gòu)造器是不可或缺的。這個構(gòu)造器可以幫你定義小程序中的各種組件，并且可以指定它們的屬性、數(shù)據(jù)和方法。

1. 組件的參數(shù)和生命周期

使用 Component 構(gòu)造器時，需要指定組件的一些基本屬性、數(shù)據(jù)和方法。這些信息包括：

• behaviors：組件所繼承的行為
• properties：組件的屬性
• data：組件的私有數(shù)據(jù)
• methods：組件的方法
• lifetimes：組件的生命周期

上述屬性都可以在 Component 參考文檔 中進(jìn)行查看。

2. 使用 Component 構(gòu)造器構(gòu)造頁面

使用 Component 構(gòu)造器還可以構(gòu)造小程序的頁面。在此過程中，頁面用到的屬性會從 URL 中讀取得到。另外，在頁面定義段中定義的方法都應(yīng)寫在 methods 段中。此時，json 文件也要加入 usingComponents 定義段。

3. 使用 behaviors 提取公用代碼段

若頁面中有一些公共的代碼段，可以使用 behaviors 將它們提取出來。這樣，只需要在各個組件中引入該行為即可。事實上，上述方法構(gòu)成了 Component 構(gòu)造器的主要應(yīng)用之一。

// page-common-behavior.js
module.exports = Behavior({
  attached: function() {
    console.log('Page loaded!')
  },
  detached: function() {
    console.log('Page unloaded!')
  }
})

// 頁面 A
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})

// 頁面 B
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標(biāo)明：himall原創(chuàng)>