当您的项目需要多次使用同一个布局和样式的时候,您就可以考虑使用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. 微信小程序 教程之引用

    系列文章: 微信小程序 教程之WXSS微信小程序 教程之引用微信小程序 教程之事件微信小程序 教程之模板微信小程序 教程之列表渲染微信小程序 教程之条件渲染微信小程序 教程之数据绑定微信小程序 教程之 ...

  2. 微信小程序模板消息后端代码

    利用spring 事件发送模板消息 1.定义事件 import com.ruoyi.project.salerauth.domain.TemplateMessage; import org.sprin ...

  3. 微信小程序模板消息群发解决思路

    基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...

  4. 120多套各种类别微信小程序模板源码打包下载

    120多套各种类别微信小程序模板源码打包下载,以下是部分截图欢迎下载!120多套各种类别微信小程序模板源码打包下载 下载地址:https://pan.baidu.com/s/1Cfqyc9p2ZDOc ...

  5. 【微信小程序】template模板使用详解

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 模板的作用域: 模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs / ...

  6. 【原创】前端开发人员如何制作微信小程序模板

    (我的博客网站中的原文:http://www.xiaoxianworld.com/archives/305,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 最近接触了一下微信小程 ...

  7. 微信小程序 --- 模板的使用

    由于微信小程序文件大小的限制,可以把一些公用的文件 单离出来形成模板,从而被各个模板引用: 定义模板第一种方式: 新建一个目录: 写入: <text>hello world</tex ...

  8. 微信小程序(template的使用)

    小程序的template是一个模版功能,在创建一个template后,其他的页面可以引用,相比component较简单.方便! template只需要两个文件,一个wxss文件和wxml文件,也只有这 ...

  9. PHP实现推送微信小程序模板消息

    这边只会写如何实现,至于在公众号管理后台添加模板消息可以参考这篇文章: https://www.cnblogs.com/txw1958/p/wechat-template-message.html,当 ...

随机推荐

  1. 【转】什么是5G?居然有人用漫画把它讲得如此接地气!

    最近一系列层出不穷的新闻,似乎都离不开一个关键词——5G.在各大报道中,都提到5G网络是移动无线技术的下一个重要发展. 任正非之前也在采访中说过: “5G,别人两三年也不会追上我们的.” “5G并不是 ...

  2. Linux基础(11)原始套接字

    一边接收函数返回一边判断返回值时一定要把接收的优先级加()提高再去判断 例 if((sockfd = socket()) < 0) 问题: 如何实现SYN扫描器扫描端口 , 比如AB两个设备要进 ...

  3. Golang资料集

    <Platform-native GUI library for Go> 介绍:跨平台的golang GUI库,支持Windows(xp以上),Unix,Mac OS X(Mac OS X ...

  4. 在win10上安装FFmpeg

    1.下载:https://ffmpeg.zeranoe.com/builds/ 2.解压缩到,并改名为ffmpeg,放到如:D:\ffmpeg文件夹. 3.添加系统环境变量. 4.打开cmd,输入:f ...

  5. springBoot入门到精通-Simple

    https://blog.csdn.net/zhiyikeji/article/details/84346189 1.springBoot前期准备 1.环境配置:jdk,maven 2.编写工具:st ...

  6. Hibernate的关联映射--一对多、

    这是我 1 单向一对多: 实体类:(课程类)Grade与(学生类)Student的一对多关系 学生类: public class Student implements java.io.Serializ ...

  7. iOS - 直播流程,视频推流,视频拉流,简介,SMTP、RTMP、HLS、 PLPlayerKit

    收藏笔记 1 . 音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放显示1.数据采集:摄像机及拾音器收集视频及音频数据,此时得到的为原始数据涉及技术或协议:摄像机: ...

  8. javascript ~~ 符号是什么意思呢?

    ~ bitwise NOT 运算符 ~对操作数按位取反,两个的意思即作两次取反操作,其实是等作原数本身(操作数是32整数范围内) ~~(Math.random()*7) 即 var n = Math. ...

  9. Python人工智能第二篇:人脸检测和图像识别

    Python人工智能第二篇:人脸检测和图像识别 人脸检测 详细内容请看技术文档:https://ai.baidu.com/docs#/Face-Python-SDK/top from aip impo ...

  10. Java服务端口被占用问题

    在改code的时候eclipse突然崩溃了,未响应状态等了好久也没转完,只能结束进程了,再次打开eclipse果然无法启动项目.报的错误是端口被占用. 又不想重启电脑,只能记录下微服务下的卡死清理端口 ...