【微信小程序】抽象组件使用示例
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
{ "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>