微信小程序开发学习笔记之模板

小程序模板（Template）是一种可复用的WXML代码片段，主要用于展示层（UI）的复用。小程序模板只包含WXML结构，可关联WXSS样式，不包含逻辑（无.js文件），没有独立作用域（样式会继承页面的样式）。

一个小实例

<!-- /templates/items.wxml -->
<template name="items">
  <view>
    <view>收件人: {{name}}</view>
    <view>联系方式: {{phone}}</view>
    <view>地址: {{address}}</view>
  </view>
</template>

<!--index.wxml-->
<import src="/templates/items"></import>
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <template is="items" data="{{...item}}" />

  <view>-------------------------</view>

  <block wx:for="{{items}}" wx:for-item="item">
    <template is="items" data="{{...item}}"></template>
  </block>
</scroll-view>

import与include

import

功能特点：仅能引用目标文件中定义的template模板内容块
引用方式：通过标签的src属性指定模板文件路径
作用域限制：不会引用目标文件中嵌套的其他文件模板，避免死循环问题

include

功能特点：引入目标文件中除template代码块外的所有内容
引用方式：通过标签的src属性指定文件路径(支持绝对/相对路径)
实现机制：相当于将目标文件内容拷贝到include位置
与import区别：不会渲染template定义的内容，如示例中只显示Hello world文本
适用场景：适合引入公共的非模板代码片段

模板可以放在哪

project/
├── pages/                    # 页面文件（主目录）
│   ├── template/           # 页面级模板
│   │   ├── list-item.wxml  # 列表项模板
│   │   └── modal.wxml      # 弹窗模板
│   └── index/
│       ├── index.wxml
│       └── index.js
│
├── components/              # 组件目录（推荐）
│   ├── common/             # 通用组件
│   │   ├── loading/
│   │   └── toast/
│   └── business/           # 业务组件
│
├── template/               # 专用模板目录（可选）
│   ├── list-tpl/          # 列表模板
│   │   ├── list-tpl.wxml
│   │   ├── list-tpl.wxss
│   │   └── list-tpl.js
│   └── card-tpl/
│
└── utils/                  # 工具函数

组件化的方式

components/
├── template-list/         # 列表模板组件
│   ├── index.wxml        # 模板结构
│   ├── index.wxss        # 模板样式
│   ├── index.js          # 模板逻辑
│   └── index.json        # 组件配置
└── template-modal/       # 弹窗模板组件

如果使用组件化的方式，使用方式就类似于官方的导航组件了：

// page.json
{
  "usingComponents": {
    "product-card": "/components/template-list/index"
  }
}