#yyds干货盘点#愚公系列2022年11月 微信小程序-引用

Posted 2022-11-03

前言

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 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 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" />