小程序抽象组件使用示例

小程序抽象组件

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>