小程序抽象组件

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>