微信小程序之页面模板-爱红旗渠

文章目录

1. 1. 定义模板布局
2. 2. 定义模板样式
3. 3. 引用模板
4. 4. 引用样式
5. 5. 赋值初始化

微信小程序提供了页面模板支持，很大程度解决了页面布局复用的问题。

官方说明

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

小程序的模板并不难，下面整理了一些基本流程，方便快速上手小程序页面模板。

1. 定义模板布局

建议新建目录专门放置模板。本文在pages目录下创建了template目录。

在template目录下创建模板布局文件msg.wxml：

!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view class='msgBg'>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

上面代码中template表现的name是模板的id；

2. 定义模板样式

创建模板样式，建议和模板布局放到相同目录；

在template目录下的模板样式文件msg.wxss：

.msgBg {
  background: #099;
  padding: 0.5rem;
}

3. 引用模板

在需要应用模板的地方添加引用：

1 2	<!--引入模板--> <import src="../template/msg.wxml" />

在需要使用模板的地方添加引用代码：

1 2	<!-- 使用模板 --> <template is="msgItem" data="{{...itemOne}}" />

完成的业务引用代码如下（index.wxml）：

<!--引入模板-->
<import src="../template/msg.wxml" />

<view class="container">

  <!-- 使用模板 -->
  <template is="msgItem" data="{{...itemOne}}" />

  <!-- 使用模板for -->
  <block wx:for="{{items}}" wx:for-item="item">
    <template is="msgItem" data="{{...item}}" />
  </block>

</view>

is是模板id，data负责传值；data传值使用ES6展开运算符”…”，那么就不需要在模板里面添加item.XXX了。

4. 引用样式

模板样式也需要添加引用，在引用方的样式代码中添加引用代码如下：

1 2	/引入模板的样式/ @import "../template/msg.wxss";

完成的样式引用代码如下（index.wxss）：

/**引入模板的样式**/
@import "../template/msg.wxss";

.container {
  background: #ff0;
}

5. 赋值初始化

通过以上四个步骤，模板布局和样式都有了，剩下的就是如何复制和展示数据了。代码如下（index.js）：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    itemOne: {
      index: 999,
      msg: 'this is a template',
      time: '2018-01-08'
    },
    items: [{
      index: 0,
      msg: 'template1',
      time: '2016-09-15'
    },
    {
      index: 1,
      msg: 'emplate2',
      time: '2016-09-16'
    },
    {
      index: 2,
      msg: 'emplate3',
      time: '2016-09-17'
    },
    {
      index: 3,
      msg: 'emplate4',
      time: '2016-09-18'
    }
    ]
  }
  
})

官方介绍地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

本文地址 http://94275.cn/2018/04/09/wxminiapp-template/ 作者为 Zhenguo