WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码。

1.1定义模板

1.1.1、创建模板文件夹

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

<!-- 使用 name 属性,作为模板的名字 -->
<template name="personCourseItemTmp">
<!-- 显示 -->
<view wx:if="{{mentor_image_uri==null}}">
<!-- 默认图片地址 -->
<image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
</view>
<view wx:else>
<image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image>
</view> <view class='info'><span>姓名:</span>{{mentor_name}}</view>
<view class='info'><span>职位:</span>{{career}}</view>
<view class='info'><span>公司:</span>{{company_name}}</view>
<view class='info'><span>地区:</span>{{address}}</view>
<view class='info'><span>擅长:</span>{{mentor_skills}}</view>
<navigator>详情</navigator>
<view class='hr'></view>
</template>
.name {
text-align: center;
} .widget_arrow {
margin-top: 20px;
height: 200px;
width: 200px;
margin-left: 25%;
} .info {
font-size: 14px;
width: 370rpx;
margin: auto;
margin-top: 10px;
}
.info span{
font-weight:;
} .info_border {
height: 200px;
width: 200px;
border: 8px solid red;
} navigator {
margin: 0 auto;
height: 40px;
width: 90%;
margin-top: 20px;
margin-bottom: 20px;
background-color: green;
line-height: 40px;
text-align: center;
} .hr {
height:;
width: 100%;
border: 1px solid green;
}

1.2、使用模板

1.2.1、创建index8

 1.2.2、在需要使用的页面使用import导入该wxml页面,注意路径位置

<!-- 引入模块 -->
<import src="../index7/index.wxml" /> <block wx:for="{{message}}" wx:key="id">
<template is="personCourseItemTmp" data="{{...item}}"></template>
</block>

1.2.3、在index8的wxss引入index7的样式

@import "../index7/index.wxss"

1.2.4、在index8的js动态写入数据

  data: {
message:[
{
mentor_image_uri:"../../image/timg3.jpg",
mentor_name:"lhs",
career: "程序员",
company_name:"aft",
address:"珠海",
"mentor_skills":"微信小程序"
},
{
mentor_image_uri: "../../image/timg.jpg",
mentor_name: "lwx",
career: "美工",
company_name: "aft",
address: "珠海",
"mentor_skills": "PS"
}
]
},

运行结果:

1.2.5、如果只想显示其中的一条数据,修改代码如下:

<!-- 引入模块 -->
<import src="../index7/index.wxml" /> <block wx:for="{{message}}" wx:key="id">
<!-- index是下标 -->
<template wx:if="{{index==0}}" is="personCourseItemTmp" data="{{...item}}"></template>
</block>

1.3、is 属性的使用

1.3.1、在index7定义两个模板(tem_2和tem_3);

<!-- 动态数据 -->
<template name="tem_2">
<!-- 显示 -->
<view wx:if="{{mentor_image_uri==null}}">
<!-- 默认图片地址 -->
<image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
</view>
<view wx:else>
<image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image>
</view>
<view class='info'><span>姓名:</span>{{mentor_name}}</view>
<view class='info'><span>职位:</span>{{career}}</view>
<view class='info'><span>公司:</span>{{company_name}}</view>
<view class='info'><span>地区:</span>{{address}}</view>
<view class='info'><span>擅长:</span>{{mentor_skills}}</view>
<navigator>详情</navigator>
<view class='hr'></view>
</template> <!-- 默认,不动态写入数据-->
<template name="tem_3">
<!-- 显示 -->
<view wx:if="{{mentor_image_uri==null}}">
<!-- 默认图片地址 -->
<image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
</view>
<view wx:else>
<image class="widget_arrow" src="../../image/timg.jpg" mode="aspectFill"></image>
</view>
<view class='info'><span>姓名:</span>lcy</view>
<view class='info'><span>职位:</span>程序员</view>
<view class='info'><span>公司:</span>未知</view>
<view class='info'><span>地区:</span>珠海</view>
<view class='info'><span>擅长:</span>爱笑</view>
<navigator>详情</navigator>
<view class='hr'></view>
</template>

1.3.2、在index8使用模板;这里使用is 属性声明需要的使用的模板,另外is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板

<!-- 引入模块 -->
<import src="../index7/index.wxml" /> <!-- is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板 -->
<block wx:for="{{message2}}">
<!-- 1==1是true,所以使用tem_2模板 -->
<template is="{{1 == 1 ? 'tem_2' : 'tem_3'}}" data="{{...item}}"/>
</block>
1.3.3、在index8.js动态写入数据
  data: {
message2:[
{
mentor_image_uri: "../../image/timg2.jpg",
mentor_name: "ljq",
career: "护士",
company_name: "中山远大医院",
address: "中山市",
"mentor_skills": "爱看书"
}
]
},

结果如下:

总结

  • 在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用;
  • 在同一个WXML文件中创建多个类似的模板用name属性来区别;
  • 模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量;
  • 使用 import 引入模板 WXML 和 WXSS ;
  • 通过template 标签使用模板,template 标签的 is 属性与模板的 name 属性对应,data 属性代表传入模板的数据。

微信小程序——template详细使用的更多相关文章

  1. 微信小程序 template模板使用

    参考文章: 微信小程序-template模板使用

  2. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  3. 微信小程序 template添加点击事件

    介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...

  4. 微信小程序template富文本插件image宽度被js强制设置

    这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...

  5. .NET开发微信小程序-Template模块开发

    1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注: ...

  6. 微信小程序——template的使用方法

    今天需要做一个[我的订单]页面,订单有几种状态,觉得把订单列表封装成一个模板更好.下面讲一下,如何用小程序自带的template构建一个模板. 1.构建订单列表模板页,命名为 [order.wxml] ...

  7. 转发:微信小程序-template模板使用

    转载于CSDN--[向朔1992]处.(部分内容根据实际情况有所修改) 小程序实现主页面调用次级页面的wxml页面内容,如下图:   根据上图,我们可以将图片和图片信息作为一个goodsList.wx ...

  8. [转]微信小程序-template模板使用

    本文转自:http://blog.csdn.net/u013778905/article/details/59646241 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一 ...

  9. 微信小程序 - template和include详细描述

    演示 index.wxml <!-- 内部模板 --> <template name="all"> {{a}} {{b}} </template> ...

随机推荐

  1. Pandas分类(category)数据处理

    分类(Category)数据:直白来说,就是取值为有限的,或者说是固定数量的可能值.例如:性别.血型 指定数据类型构建分类数据 dtype="category" 以血型为例,创建一 ...

  2. [考试反思]1001csp-s模拟测试(b):逃离

    如你所见,b组题,除了NC乱入直奔T2抢了我一个首杀以外A层学过FFT的人都没有参加. 竞争压力很小,题又简单,所以就造就了6个AK. 然而并不计入总分,我仍然稳在第二机房. T1lyl16分钟切掉我 ...

  3. gedit一些小的新发现

    写应该还有一些人正在像我一样用gedit呢. 现在vim,gedit,guide三党还是互相瞧不起呢. 我写这一篇是想稍微交流一下gedit的一些乱七八糟的玩意,非gedit党勿喷. 有些人连一些比较 ...

  4. java架构之路-(NoSql专题)MongoDB快速上手

    NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL".在现代的计算系统上每天网络上都会产生庞大的数据量.这些数据有很大一部分是由关系数据库管理系统(RD ...

  5. python机器学习——自适应线性神经元

    上篇博客我们说了感知器,这篇博客主要记录自适应线性神经元的实现算法及一些其他的训练细节,自适应线性神经元(简称为Adaline)由Bernard Widrow和他的博士生Tedd Hoff提出,对感知 ...

  6. 因为 GitHub Actions 我发现了 Jake Wharton 的一个仓库

    本文微信公众号「AndroidTraveler」首发. 背景 昨天(2019-11-14)上去 GitHub 上面一看,结果来了个下面的提示: 点进去一看: 看来是自动化构建相关的. 那就试一下,选了 ...

  7. MySQL系列:MySQL的基本使用

    数据库的基本操作 在MySQL数据库中,对于一个MySQL示例,是可以包含多个数据库的. 在连接MySQL后,我们可以通过 show databases; 来进行查看有那么数据库.这里已经存在一些库了 ...

  8. 玩转VSCode-完整构建VSCode开发调试环境

    随着VSCode的不断完善和强大,是时候将部分开发迁移到VS Code中了. 目前使用VS2019开发.NET Core应用,一直有一个想法,在VS Code中复刻VS的开发环境,同时迁移到VS Co ...

  9. Docker学习-Docker搭建Consul集群

    1.环境准备 Linux机器三台 网络互通配置可以参考 https://www.cnblogs.com/woxpp/p/11858257.html 192.168.50.21 192.168.50.2 ...

  10. [复现论文程序图]High Speed Continuous Variable Source-Independent Quantum Random Number Generation

    这次的任务是复现该文章的图2(C),过程如下. ①翻译了整篇文章,断断续续,花了3-4天时间. ②阅读文章,并且记录下每个符号的意义,记在单独的1个word文档里. ③开始编程,用的matlab201 ...