支付寶小程序框架 自定義組件·介紹

自定義組件功能可將需要復(fù)用的功能模塊抽象成自定義組件，從而在不同頁面中復(fù)用，更可以將自定義組件發(fā)布到 NPM 上，從而在不同小程序中進行復(fù)用，NPM 的使用參見 NPM 包管理。

使用須知

小程序基礎(chǔ)庫從 1.7.0 版本開始支持自定義組件功能。 通過調(diào)用 my.canIUse('component') 可判斷自定義組件功能是否可在當(dāng)前版本使用；從 1.14.0 版本開始，自定義組件有了較大改動，支持 component2 相關(guān)功能，通過調(diào)用 my.canIUse('component2') 可判斷新自定義組件功能是否可在當(dāng)前版本使用， component2 相關(guān)功能如下：

1. 新增 onInit、deriveDataFromProps生命周期函數(shù) ;
2. 支持使用 ref獲取自定義組件實例 。

使用 component2 的相關(guān)功能，需要在 IDE 中的 詳情 > 項目配置 中，勾選 啟用 component2 編譯 。

創(chuàng)建并使用自定義組件

與 Page 類似，自定義組件也由 axml、js、json、acss 4 個部分組成。

創(chuàng)建并使用自定義組件有以下 4 個步驟：

1. 新建自定義組件文件夾。
2. 在 .json 文件中聲明自定義組件。
3. 使用 Component 函數(shù)，注冊自定義組件。
4. 使用自定義組件。

以下講述如何創(chuàng)建最基本的自定義組件。

新建自定義組件文件夾

打開一個現(xiàn)有項目中（或者在 IDE 中，新建一個官方提供的 blank 項目），在 IDE 左側(cè)文件樹先新建一個 components 文件夾，用于存放所有組件，文件夾名字可以任意修改。在 components 文件夾的右擊菜單中，選擇新建小程序組件，輸入組件名（例如 index，以下示例均以組件名 index 為例），IDE 會自動生成自定義組件所需的幾個文件，如下所示：

聲明自定義組件

組件配置文件 index.json 用于聲明當(dāng)前目錄是個自定義組件。

// /components/index/index.json
{
  "component": true
}

注冊自定義組件

組件注冊 index.js 用于注冊一個組件對象。

// /components/index/index.js
Component({
  mixins: [], // minxin 方便復(fù)用代碼
  data: { x: 1 }, // 組件內(nèi)部數(shù)據(jù)
  props: { y: 1 }, // 可給外部傳入的屬性添加默認值
  didMount(){}, // 生命周期函數(shù)
  didUpdate(){},
  didUnmount(){},
  methods: {   // 自定義方法
    handleTap() {
      this.setData({ x: this.data.x + 1}); // 可使用 setData 改變內(nèi)部屬性
    }, 
  },
})

組件模板 index.axml 和組件樣式 index.acss（可選）：定義組件模板和樣式。其中，樣式文件可選。

<!-- /components/index/index.axml -->
<view>
  HI, My Component
</view>

使用自定義組件

聲明好一個組件后，即可在其他頁面上使用。

先在頁面配置中說明要使用哪個自定義組件，主要指定組件標簽名字和組件所在路徑。

// /pages/index/index.json
{
  "usingComponents": {
    "my-component":"/components/index/index"
  }
}

然后在頁面中引用組件即可。

<!--  /pages/index/index.axml -->
<view>
  this is a blank page
</view>
<my-component />