微信小程序框架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的使用基本都记录完啦，傍晚安。