【微信小程序】抽象组件使用示例

    1.配置页面路径

./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"
  }
}

    2.声明抽象组件 abstractCom

./pages/abstractCom/abstractCom.json

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

./pages/abstractCom/abstractCom.wxml

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

   3.声明抽象组件会用到的实例子组件,动态组件com1

./pages/com1/com1.json

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

   4.声明抽象组件会用到的实例子组件,动态组件com2

./pages/com2/com2.json

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

   5.声明使用抽象组件的主页面

./pages/index/index.json

扫描二维码关注公众号，回复： 8006176 查看本文章

{
  "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>

抽象节点的默认组件

抽象节点可以指定一个默认组件，当具体组件未被指定时，将创建默认组件的实例。默认组件可以在 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>