【愚公系列】2022年02月 微信小程序-引用

举报
愚公搬代码 发表于 2022/02/28 10:58:01 2022/02/28
【摘要】 前言 1.模板的引入方式WXML 提供两种文件引用方式import和includeimport:导入模板并没有真正的使用include:直接引入页面元素,已经使用了 2.模板和组件的比较template(模板):是可以在wxml中引用的代码,就是在wxml中引用公用的wxml类型的代码,它的作用类似于组件,因此这里简单的说明下template与Component (组件)的区别。templ...

前言

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" />
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。