【愚公系列】2022年02月 微信小程序-引用
文章目录
前言
1.模板的引入方式
WXML 提供两种文件引用方式import和include
- import：导入模板并没有真正的使用
- include：直接引入页面元素，已经使用了
2.模板和组件的比较
template（模板）:是可以在wxml中引用的代码，就是在wxml中引用公用的wxml类型的代码,它的作用类似于组件，因此这里简单的说明下template与Component （组件）的区别。
template（模板）与Component （组件）的区别：
1.template（模板）：主要用于显示，简单的说主要是用于嵌入wxml的代码，模板中是可以拥有对应的样式以及逻辑，但是他并没有属于的对应的js文件，它的逻辑依赖于引用的页面。
2.Component（组件）：作为一个单独的功能模块，不仅可以包含页面展示还可以包含该模块的事件逻辑处理。像一个页面一样，Component组件可以包含wxml wxss js json 文件。
总的来说，template（模板）和Component （组件）非常相似，Component （组件）相比于template（模板）更完整，接近于一个独立的模块，有自己的逻辑方法，所以在使用场景上会有一定的区别，template（模板）更多的适用于仅仅是展示用的，而Component （组件）可用于业务上或者涉及的逻辑相对复杂的场景上进行使用。
一、import
import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：
<template name="item">
<view>template text: {{msg}}</view>
<view>日期 : {{time}}</view>
</template>在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src='../common/template.wxml'/>
<view class='container'>
<view wx:for='{{list}}'>
<!--模板使用-->
<template is='item' data="{{...item}}"/>
</view>
</view>二、import 的作用域
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>三、include
include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置，如：
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>四、案例
案例以toast提示框为例
1.定义模板
<template name="toast">
.......
</template>2.使用模板
<import src="tools/toast/toast.wxml"/>
<template is="toast" />每个页面都需要引用一遍。这时候，又自定义了一个popup框，每个需要popup的页面，又都需要引用一遍popup.wxml。不仅如此，当你的小程序越来越大，自定义的模板越来越多，每个页面都是下面这种样子：
<import src="tools/toast/toast.wxml"/>
<template is="toast" />
<import src="tools/popup/popup.wxml"/>
<template is="popup" />
<import src="tools/xxx/xxx.wxml"/>
<template is="xxx" />如果改变某个自定义组件的路径，则每个页面都需要改变一次；这时候，我们可以利用include的属性
<import src="tools/toast/toast.wxml"/>
<import src="tools/popup/popup.wxml"/>
<template is="wetoast"/>
<template is="popup"/><include src="template.wxml" />