小程序抽象組件使用示例

小程序抽象組件

https://developers.weixin.qq....

示例源碼

配置頁面路徑
./app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/abstractCom/abstractCom",
    "pages/com1/com1",
    "pages/com2/com2"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

聲明抽象組件 abstractCom

./pages/abstractCom/abstractCom.json

{
  "component": true,
  "componentGenerics": {
    "abstract": true
  },
  "usingComponents": {}
}

./pages/abstractCom/abstractCom.wxml

<!--pages/abstractCom/abstractCom.wxml-->
<abstract></abstract>

./pages/abstractCom/abstractCom.wxss

/* pages/abstractCom/abstractCom.wxss */

./pages/abstractCom/abstractCom.js

// pages/abstractCom/abstractCom.js
// 抽象組件
Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})

聲明抽象組件會用到的實例子組件,動態組件com1

./pages/com1/com1.json

{
  "component": true,
  "usingComponents": {}
}

./pages/com1/com1.wxml

<!--pages/com1/com1.wxml-->
<text>這是動態組件1pages/com1/com1.wxml</text>

./pages/com1/com1.wxss

/* pages/com1/com1.wxss */

./pages/com1/com1.js

// pages/com1/com1.js
// 抽象組件所需自組件1
Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})

聲明抽象組件會用到的實例子組件,動態組件com2

./pages/com2/com2.json

{
  "component": true,
  "usingComponents": {}
}

./pages/com2/com2.wxml

<!--pages/com2/com2.wxml-->
<text>這是動態組件1pages/com1/com1.wxml</text>

./pages/com2/com2.wxss

/* pages/com2/com2.wxss */

./pages/com2/com2.js

// pages/com2/com2.js
// 抽象組件所需自組件2
Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})

聲明使用抽象組件的主頁面

./pages/index/index.json

{
  "usingComponents": {
    "abstract-com": "../abstractCom/abstractCom",
    "com1": "../com1/com1",
    "com2": "../com2/com2"
  }
}

./pages/index/index.wxml

<!--index.wxml-->
<view class="container">
    <abstract-com generic:abstract="com1"></abstract-com>
    <abstract-com generic:abstract="com2"></abstract-com>
</view>

./pages/index/index.wxss

/**index.wxss**/

./pages/index/index.js

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {

  },
  onLoad: function () {
  }
})

<hr/>

抽象節點的默認組件

抽象節點能夠指定一個默認組件，當具體組件未被指定時，將建立默認組件的實例。默認組件能夠在 componentGenerics 字段中指定：

聲明抽象組件 abstractCom
./pages/abstractCom/abstractCom.json

{
  "component": true,
  "componentGenerics": {
    "abstract": {
      "default": "../com1/com1"
    }
  },
  "usingComponents": {}
}

./pages/index/index.wxml

<!--index.wxml-->
<view class="container">
    <abstract-com generic:abstract="com1"></abstract-com>
    <abstract-com generic:abstract="com2"></abstract-com>
    <abstract-com></abstract-com>
</view>