浅谈微信小程序的模板引用以及文件引用import和include的区别

模板引用的普通用法：

1.首先在wxml文件里写如下代码（解释：声明两个template，一个是模板，一个是要套用模板的，通过is=“template名字”的方式进行引用）

<template name="temp">
  <view>
    <view>收件人：{{name}}</view>
    <view>联系方式：{{phone}}</view>
    <view>地址：{{address}}</view>
  </view>
</template>

<template is="temp" data="{{...item}}"></template>

and样式写在js文件里边

Page({
  data:{
    item:{
      name:"张三",
      phone:"11111111",
      address:"可可亚西村"
    }
  }
}) 

最后的样式是这样的

======================================================================

把文件引用的import和include也在这里一起说了吧，二者的区别简要来概括就是import引入模板块内容，但是include相当于拷贝。

 

首先来说import

其实举个例子就容易知道了

首先建一个wxml，写一个view标签，和一个template，以这个为模板

<view>HELLO</view>
<template name="a">
  hello,world!
</template>

再建立一个template，如下代码所示

<import src="a.wxml"></import>
<template is="a"></template>

最后的结果如下图所示

可以观察到，原先那个模板template 只有template的内容会被引用，而外部的view标签的内容却没有显示。

include用法

其实和import相同的例子，只不过结果不一样而已。

首先建立一个wxml文件，写入模板代码

<template name="a">
  <view>
    hello
  </view>
</template>
<view>
  hello,world!
</view>

然后再新建一个wxml文件，开始调用模板

<include src="a.wxml"/>
<template is="a"></template>

最后的结果就是

 可以发现没有引用template内的内容，而是直接把view内的内容显示出来了。

==============================================================================

最后提及一个嵌套的优点，可能很容易会想到如果有死循环，即在两个template里相互调用模板。但是针对这一点，微信小程序的处理方法就是引用的时候只能引用目标文件的template模板，重复嵌套不作用。