微信小程序框架wxml（六）wxml引用

wxml提供两种引用方式，import和include

1.import和include的区别

（1）import 可以在文件中使用被import文件中定义的template；include可以在文件中使用template及template外的内容。

（2）import有作用域的概念，只能引用直接import的template；如果B.wxml import A.wxml，C.wxml import B.wxml，则B可以使用A中定义的template，C可以使用B中定义的template，而C不能使用A中的template。

2.demo

（1）被引用的wxml样式

<!-->pages/utils/temp.wxml<-->
<text style="color:red">template外的部分</text>
<template name="temp1">
name:{{name}} sex:{{sex}}
</template>

（2）wxml文件

<view class="container wxml-container">
<text class="topic-group">import引用</text>
<import src="../utils/temp.wxml" />
<template is="temp1" data="{{name:'crab',sex:'female'}}"></template>

<text class="topic-group">include引用</text>
<include src="../utils/temp.wxml"/>
<template is="temp1" data="{{...objInfo}}"/>
</view>

（3）wss中的样式

.topic-group{
background: pink;
width: 100%;
text-align: center;
margin-top: 40rpx;
}

text{
width: 100%;
text-align: center;
}

.wxml-container{
padding: 0 20rpx ;
align-items: center;
}

（4）js中数据声明

Page({
data: {
objInfo:{
name:"lucky",
sex:"male"
}
}
})

（5）查看效果图，可以看到include引用中出现了template外的红色text。



关于wxml的使用基本都记录完啦，傍晚安。