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