微信小程序_定义模版_引用功能

#定义模版# #引用功能#

>定义模版

        >WXML提供模版(template)功能。

        >可以把一些共用的、复用的代码，在模版中定义代码片段。

        >在不同的地方调用，以达到一次编写，多次使用的效果。

        >在<template/>内定义代码片段，使用name属性，作为模版的名字。

        示例代码：

<template name="msgitem">
    <view>
        <text>{{index}}:{{msg}}</text>
        <text>Time:{{time}}    </text>
    </view>
</template>

>使用模版

        >在WXML文件里，使用is属性，声明需要使用的模版

        >然后将模版所需要的data传入

        示例代码：

<template is="msgitem" data="{{item}}"/>

Page({
    data:{
        item:{
            index:0,
            msg:'这是一个模版',
            time:'2023-09-30'
        }
    }
})

        >is属性可以使用三元运算语法，来动态决定具体需要渲染哪个模版.

        示例代码：

<template name="odd">
    <view>奇数</view>
</template>

<template name="even">
    <view>奇数</view>
</template>

<block wx:for="{{[1,2,3,4,5]}}">
    <template is="{{item%2==0?:'even':'odd'}}"/>
</block>

---

>引用功能

        >WXML提供两种文件引用方式

                >import

                >include

        >两者的区别：

                >import引用模版文件

                        >import可以在该文件中使用目标文件定义的template

                        >假如在item.wxml中定义了一个叫item的template

                示例代码：

<!--item.wxml-->

<template name="item">
    <text>{{text}}</text>
</template>

                       >在index.wxml中引用了item.wxml,就可以使用item模版

                示例代码：

<import src="item.wxml"/>
<template is="item" data="{{text:'import引用'}}"/>

                 >include引用整个除了<template/>的文件

                        >include可以将目标文件除了<template/>的整个代码引入

                        >相当于是复制到include位置

                示例代码：

<!--index.wxml-->

<include src="header.wxml"/>
<view>页面主体</view>
<include src="footer.wxml"/>


<!--header.wxml-->

<view>头文件</view>


<!--footer.wxml-->

<view>尾文件</view>

---

#学无止境#