微信小程序WXML语法之模板和引用

缺乏、安全感 2023-07-03 02:35 14阅读 0赞

# 模板 #

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

### 定义模板 ###

使用 name 属性，作为模板的名字。然后在`<template/>`内定义代码片段，如：

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

### 使用模板 ###

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

Page({
      data: {
        item: {
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

### 模板的作用域 ###

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 `<wxs />` 模块。

# 引用 #

WXML 提供两种文件引用方式`import`和`include`。

### import ###

`import`可以在该文件中使用目标文件定义的`template`，如：

在 item.wxml 中定义了一个叫`item`的`template`：

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

在 index.wxml 中引用了 item.wxml，就可以使用`item`模板：

### import 的作用域 ###

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

**如：C import B，B import A，在C中可以使用B定义的`template`，在B中可以使用A定义的`template`，但是C不能使用A定义的`template`**。

<template name="A">
      <text> A template </text>
    </template>

<import src="a.wxml"/>
    <template name="B">
      <text> B template </text>
    </template>

<import src="b.wxml"/>
    <template is="A"/>  
    <template is="B"/>

### include ###

`include` 可以将目标文件**除了** `<template/>` `<wxs/>` 外的整个代码引入，相当于是拷贝到 `include` 位置，如：

<include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>

<view> header </view>

<view> footer </view>

以上摘自微信官方文档

# 接下来通过一个小例子来使用模板： #

新建一个Page:templates/messages，在其WXML文件中添加如下模板代码：

<template name='message'>
      <view class="message-group">
        <text class="content">{
       {content}}</text>
        <text class="friend">{
       {friend}}</text>
      </view>
    </template>

在其WXSS中添加如下代码：

.message-group{
      height: 40px;
      padding: 10px;
      line-height: 60px;
      border-bottom: 1px solid #e4e4e4;
    }
    .message-group .content{
      float:left;
    }
    .message-group .friend{
      float:right;
      font-size: 12px;
      color:firebrick;
    }

然后分别新建一个QQ消息文件夹和一个微信消息文件夹来同时使用此模板：

qq.js文件中添加消息列表来模拟服务器发来的消息：

data: {
        messages:[
          {
            content:'唱歌',
            friend:'周杰伦'
          },
          {
            content: '打球',
            friend: '科比'
          }
        ]
         
      }

qq.wxml文件中引用之前的模板：

qq.wxss文件中也引用模板文件夹中的模板:

/* pages/tpl/qq/qq.wxss */
    @import 
    "../../../templates/message/message.wxss"

微信文件夹同理。运行后如下图所示：

![20200131154047869.png][]

[20200131154047869.png]: https://img-blog.csdnimg.cn/20200131154047869.png