微信小程序学习之Template模板开发
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。
基本用途：
（1）作为一般View显示。例如：（赋值时，加...）
<template is="tpt_func_model_h" data="{{...modelFuncList[0]}}"></template>
（2）作为List列表的ItemView显示。例如：（赋值时，不加...）
<template is="tpt_func_model_h" data="{{item}}"></template>
引用方式：
（1）import方式，可以在该文件中使用目标文件定义的 template。
<!-- 引用模板列表 -->
<import src="/pages/templates/templates" />
（2）include方式，相当于是拷贝到 include 位置，常用于引用自定义的HeaderView或者FooterView。（类似于Android中的include引用方式）
<include src="/pages/my/addressList/addressList.wxml"></include>
备注：import导入模板，include用于引入一般View。
基本实例：
一、模板创建templates.wxml代码如下：
<!-- 竖版功能Item模板 -->
<template name="tpt_func_model_v">
<view class="container_v justify_center align_center">
<image src="{{imageURL}}" style="height: 50rpx; width: 50rpx;"></image>
<text style="font-size: 30rpx; margin-top: 10rpx;">{{title}}</text>
</view>
</template>
<!-- 横版功能Item模板 -->
<template name="tpt_func_model_h">
<view class="container_h align_center">
<image src="{{imageURL}}" style="height: 50rpx; width: 50rpx; margin-right: 20rpx;" class="grow_0"></image>
<text style="font-size: 30rpx;" class="grow_1">{{title}}</text>
<image src="/images/icon_toright.png" style="height: 30rpx; width: 30rpx; margin-right: 20rpx;" class="grow_0"></image>
</view>
</template>
附加，templates.wxss代码内容如下：
.container_v {
display: flex;
flex-direction: column;
}
.container_h {
display: flex;
flex-direction: row;
}
.justify_center {
justify-content: center;
}
.justify_between {
justify-content: space-between;
}
.align_center {
align-items: center;
}
.align_between {
align-content: space-between;
}
.grow_0 {
flex-grow: 0;
}
.grow_1 {
flex-grow: 1;
}
.bg_white {
background-color: white;
}
二、把模板引用到相应的布局里并使用。
<!-- 引用模板列表 -->
<import src="/pages/templates/templates" />
<!-- 使用相应的模板 -->
<template is="tpt_func_model_h" data="{{...modelFuncList[0]}}"></template>
微信小程序学习之Template模板开发相关推荐
- 微信小程序学习笔记(二)模板与配置
文章目录 1. WXML 模板语法 1.1 数据绑定 1.1.1 数据绑定的基本原则 1.1.2 在 data 中定义页面的数据 1.1.3 Mustache 语法的格式 1.1.4 Mustache ...
- 微信小程序学习笔记(五) 云开发
1. 云开发简介 1.1 什么是云开发 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
- 微信小程序学习（1）-基础开发
学习微信小程序 微信小程序学习(1) 微信小程序学习(2) 文章目录 学习微信小程序 注册和初始化 小程序配置 tabbar导航栏 模板插样与WXML 循环渲染 条件渲染 模板 微信小程序脚本WXS ...
- 小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
- HBuilderX搭建微信小程序；HBuilderX开发uni-app微信小程序；uni-app开发微信小程序；使用uni-app搭建微信小程序；使用uni-ui模板搭建微信小程序步骤
1.选择模板 uni-ui 2.得到创建项目 3.获取APPid 在微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序) 打开微信小程序官网:https://mp.w ...
- 微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
- 微信小程序学习（2）-云开发
微信小程序-云开发 微信小程序学习(1) 微信小程序学习(2) 文章目录 微信小程序-云开发 初始化+云函数的坑 云函数使用 老陈段子 小程序云存储 小程序云数据库 初始化插入 简单查询 更新数据 删 ...
- python写微信小程序源码示例_python实现微信小程序用户登录、模板推送
python实现微信小程序用户登录.模板推送 来源:中文源码网 浏览: 次 日期:2019年11月5日 [下载文档: python实现微信小程序用户登录.模板推送.txt ] (友情提示 ...
- 微信小程序学习总结（1）
微信小程序学习总结(1) 一.注册微信小程序 访问https://mp.weixin.qq.com/ ,点击"立即注册" 选择"小程序" 然后点击"链 ...
最新文章
- jmeter笔记（8）--关联
- 天津理工大学c语言实验2答案,天津理工大学-c语言上机报告2.doc
- 去邵程程博客，得到很有喜感图片一张
- crontab脚本，定时任务相关细节
- c语言编译生成obj,GCC编译Objective-C源文件
- 特殊权限位set_uid set_gid stick_bit 软链接硬链接
- unity NGUI 一些操作记录
- 要做PPT，一直找不到资源？
- Windows 7 下安装 Oracle 数据库和 PL/SQL Developer
- [渝粤教育] 西南科技大学 建筑制图 在线考试复习资料
- Tp框架中模板中if条件如何使用？
- ZOJ-2587 Unique Attack 最小割的唯一性判定
- 【Spring】Spring 如何解决循环依赖问题
- 基于JAVA+SpringMVC+Mybatis+MYSQL的线上电器商城
- 3月27日外电头条：Windows的开源野心
- OSChina 周五乱弹 —— 如何向妹子解释越位
- sublime text3插件TrailingSpaces无法使用的解决方法
- XSS的盲打以及实验的演示
- idea报错：不支持发行版本5的错误，快速解决方案
- IDEA打开README.md文件时卡死