当您的项目需要多次使用同一个布局和样式的时候,您就可以考虑使用template(模板)来减少冗余代码。

使用方式:

1.新建一个template文件夹来存放您的通用模板;

2.在文件夹里面新建一个wxml,wxss,进行模板和样式的定义;

3.设置模板的name,以及里面您需要定义的wxml内容;

4.设置wxss样式;

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

6.在需要使用的wxss文件导入该wxss;

7.在页面上使用该模板,通过is判断使用哪个模板,这里我们使用name为courseStudent模板(此处使用的是列表循环,所以data值为item);

若将data使用ES6 展开运算符‘...’,则模板里面绑定数据就不需要在前面加入item了

<!--使用ES6展开运算符 -->
<template is="courseStudent" data="{{...item}}"></template> <template name="courseStudent">
<!-- 此处渲染数据的时候就不需要使用 item.xxx了-->
<view>{{courseName}}</view>
</template>

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

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

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

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

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

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

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

  4. 微信小程序——template详细使用

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹  1.1.2.使用 name 属性,作为模板的名字.然后 ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 算法复习——splay+启发式合并(bzoj2733-永无乡)

    题目: Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通 ...

  2. Selenium之Web页面滚动条滚操作

    //移动到元素element对象的“顶端”与当前窗口的“顶部”对齐 ((JavascriptExecutor) driver).executeScript("arguments[0].scr ...

  3. __new__ 与 __init__的区别

    原文地址:http://www.cnblogs.com/ifantastic/p/3175735.html 单例模式 class Singleton(object): def __new__(cls, ...

  4. SPFA的两个(卡时)优化

    SPFA算法有两个优化算法 SLF 和 LLL: SLF:Small Label First 策略,设要加入的节点是j,队首元素为i,若dist(j)<dist(i),则将j插入队首,否则插入队 ...

  5. [其他] 关于C语言中使用未声明函数的问题

    在c语言中,碰到一个.c文件,无.h头文件,在另一.c文件调用函数时,并没有进行声明extern, 此时编译器不会报错,会默认去查找同名的函数,这样会存在一些问题,查了些资料,稍微总结了下: 总结: ...

  6. Laravel 之Artisan

    简介: Artisan是Laravel中自带的命令行工具的名称: 由强大的Symfony Console组件驱动的: 提供了一些对应用开发有帮助的命令: 查看所有可用的Artisan的命令 php a ...

  7. 使用EventNext实现基于事件驱动的业务处理

    事件驱动模型相信对大家来说并不陌生,因为这是一套非常高效的逻辑处理模型,通过事件来驱动接下来需要完成的工作,而不像传统同步模型等待任务完成后再继续!虽然事件驱动有着这样的好处,但在传统设计上基于消息回 ...

  8. P3378 堆【模板】 洛谷

    https://www.luogu.org/problem/show?pid=3378 题目描述 如题,初始小根堆为空,我们需要支持以下3种操作: 操作1: 1 x 表示将x插入到堆中 操作2: 2 ...

  9. JVM内存分为哪几部分?各个部分的作用是什么?

    JVM内存分为哪几部分?各个部分的作用是什么?   1. Java虚拟机内存的五大区域 Java的运行离不开Java虚拟机的支持,今天我就跟大家探讨一下Java虚拟机的一些基础知识. JVM内存区域分 ...

  10. dropwizard问题记录1:如何进行mvn package打包,如何在项目目录下运行

    dropwizard的helloworld入门教程,跟着教程一步步写很容易,但是最后打包时暴露了自己底子太差的缺陷 mvn package操作 之前工作中完全没有接触过这种打包方式,都是直接打war包 ...