微信小程序定义模板

微信小程序提供模板(template)功能,把一些可以共用的,复用的代码在模板中定义为代码片段,然后在不同的地方调用,可以实现一次编写,多次引用的效果。

首先我们看一下官网是如何操作的

一般的情况下,我们都是在Page/Template下进行操作。在不破坏原来的代码的情况下,进行测试

 我们现在就是在test定义一个模板,然后在header页面中去使用它

操作模板的第一步就是定义模板

这里我们需要使用name关键字,然后在<template/>内定义代码片段

第二步使用模板

使用is关键字,声明要使用的模板。

这里要注意的一点就是要使用import关键字,先引入模板,然后采用去使用它

小程序除了import关键字引入外,还有include引用

include就是将除了<template/>之外的所有代码引入

 在这里我们可以很清除的看到,import只能template内部的代码。而无法引入template外的代码

 而include却可以

这个模板的作用还是很大的,我们可以在项目中使用一下

 看一下这个小程序,如果我们想要去复用其中的一些结构到我们的headless页面,我们就可以使用template了

 定义一个template文件,这里我们发现需要传值。其实就是使用template中的data属性就可以使用了

<template is="msgItem" data="{{...item}}"/>

 

在这里我们是通过头条的data中的array给模板内部传值。但是我们发现很丑,没有样式

 那么我们就可以使用@import来引入模板中的样式。这样就使用了模板的复用了 

项目地址

Chicksqace/Wx-Menu: 微信小程序开发的菜谱小程序,用到的技术栈主要是template模板的使用 (github.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/16445.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JavaWeb学习--RequestResponse

目录 JavaWeb学习--Request&Response 1&#xff0c;Request和Response的概述 request:获取请求数据 response:设置响应数据 **小结** 2&#xff0c;Request对象 **小结** 2.2 Request获取请求数据 **小结** 2.4 请求参数中文乱码问题 URL编码 2.5 Request请求转…

【前端技术】Vue3 01:初识 Vue.js

Vue 可以说是非常流行了&#xff0c;至少在国内是这样&#xff0c;他是个轻量级的 JavaScript 框架&#xff0c;非常适合构建大型和中小型的 Web 应用程序&#xff0c;如果想和前端打交道&#xff0c;应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2 IDE 选择 2.1 vscode 2.…

Eplan 部件库导入部件的方法

1. 部件宏文件如何下载 1.1 西门子部件宏文件下载 EPLAN 的部件库是可以更新的,一般元器件厂商会提供其部件文件,以 SIEMENS 为例 进入网站,点击EPLAN 的图标 https://www.automation.siemens.com/bilddb/index.aspx?lang=en 在订货号中输入所需部件订货号,点击搜索。点…

【Java笔试强训 27】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、选择题 二、编程题 &#x1f525; 不用加…

sed编辑器基础命令

shell脚本编程系列 学习sed编辑器 sed编辑器被称作流编辑器&#xff08;stream editor&#xff09;,与普通的交互式文本编辑器不同&#xff0c;在交互式文本编辑器可以用键盘命令交互式插入、删除或替换文本数据。流编辑器则是根据事先设计好的一组规则编辑数据流。 sed编辑器…

Mybatis 框架 ( 三 ) Mybatis-Plus

4.Mybatis-plus 官网 : https://www.baomidou.com/ MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上封装了大量常规操作&#xff0c;减少了SQL的编写量。 4.1.Maven依赖 使用时通常通过Springboot框架整合使用 并且使用Lombok框架简化实体类 <…

django显示echart图表:柱状图、折线图、饼图、地图、词云

django显示echart图表 效果: 示例demo 点我查看 1、urls.py 其中关键代码: urlpatterns = [path("book_chart/", views.book_chart, name="book_cha

【23】linux进阶——linux的软链接和硬链接

大家好&#xff0c;这里是天亮之前ict&#xff0c;本人网络工程大三在读小学生&#xff0c;拥有锐捷的ie和红帽的ce认证。每天更新一个linux进阶的小知识&#xff0c;希望能提高自己的技术的同时&#xff0c;也可以帮助到大家 另外其它专栏请关注&#xff1a; 锐捷数通实验&…

RebbitMQ Windows安装

RabbitMQ是由Erlang语言写的,因此安装前要先安装Erlang Erlang及RabbitMQ安装版本的选择 下载时一定要注意版本兼容性 版本兼容说明地址&#xff1a;RabbitMQ Erlang Version Requirements — RabbitMQ 我们选择的版本 Erlang官网下载:https://www.erlang.org/downloads Ra…

JavaScript 笔记

1 简介 JavaScript 诞生于1995年&#xff0c;是由网景公司发明&#xff0c;起初命名为LiveScript&#xff0c;后来由于SUN公司的介入&#xff0c;更名为 JavaScript。1996年微软在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript&#xff0c;于是市面上就存在两个版本…

Guitar Pro8苹果mac最新版本下载安装教程

Guitar Pro是一款专业的吉他制谱软件&#xff0c;现在已更新至Guitar Pro8&#xff0c;新增了支持添加音频轨道、支持嵌套连音符、直观的效果器视图、让指法一目了然的音阶示意图等实用新功能。下面我们来看Guitar Pro8 Mac如何安装。 guitar pro是一款专业的吉他学习软件&…

【VM服务管家】专题_7.5 异常收集

目录 5.1 信息收集&#xff1a;异常报错信息收集的方法5.2 日志等级&#xff1a;日志等级调低的方法 5.1 信息收集&#xff1a;异常报错信息收集的方法 描述 环境&#xff1a;VM4.0以上VS2013及以上 现象&#xff1a;未知问题、偶发问题、崩溃问题如何收集信息提供给研发排查。…

【网络协议详解】——GNS3的使用(学习笔记)

&#x1f4d6; 前言&#xff1a;在IT领域&#xff0c;网络协议的理解和掌握是至关重要的。GNS3和Wireshark是非常实用的工具&#xff0c;它们可以帮助你深入了解TCP/IP协议和网络的运作情况。 目录 &#x1f552; 1. 网络协议分析工具——GNS3&#x1f558; 1.1 快速上手&#…

一篇你看得懂的SNP

单核苷酸多态性&#xff0c;&#xff08;Single Nucleotide Polymorphism&#xff0c;简称SNP&#xff09;指的是由单个核苷酸—A,T,C或G的改变而引起的DNA序列的改变&#xff0c;造成包括人类在内的物种之间染色体基因组的多样性。是指在基因组上单个核苷酸的变异&#xff0c;…

一篇带你了解大厂都在用的DDD领域驱动设计

一、DDD到底是什么 DDD全称Domain Driven Design&#xff0c;领域驱动设计。 为了解决快速变化、复杂系统的设计问题的 领域驱动设计是Eric Evans在2004年发表的Domain Driven Design&#xff08;领域驱动设计&#xff0c;DDD)著作中提出的一种从系统分析到软件建模的一套方…

Windows安装mariadb,配置环境变量(保姆级教学)

软件下载地址&#xff1a;https://mariadb.com/downloads/ 1.双击下载好的软件 2.点击next 3.勾选我同意&#xff0c;点击next 4.这里那你可以设置你要安装的路径&#xff0c;也可以使用默认的&#xff0c;之后点击next 5.如图所示&#xff0c;设置完点击next 6.接下来就默…

Java面试题总结 | Java面试题总结8- Redis模块(持续更新)

Redis 文章目录 Redisredis的线程模型Redis的Mysql的区别Redis和传统的关系型数据库有什么不同&#xff1f;Redis常见的数据结构zset数据结构Redis中rehash过程redis为什么不考虑线程安全的问题呢Redis单线程为什么还能这么快&#xff1f;为什么Redis是单线程的&#xff1f;red…

JSP 的本质原理解析:“编写的时候是JSP,心里想解读的是 java 源码“

JSP 的本质原理解析&#xff1a;“编写的时候是JSP&#xff0c;心里想解读的是 java 源码” 文章目录 JSP 的本质原理解析&#xff1a;"编写的时候是JSP&#xff0c;心里想解读的是 java 源码"每博一文案1. JSP 概述2. 第一个 JSP 程序3. JSP 的本质就是 Servlet4. J…

R语言 | 日期和时间的处理

目录 一、日期的设定与使用 1.1 as.Date()函数 1.2 weekdays()函数 1.3 months()函数 1.4 quarters()函数 1.5 Sys.localeconv()函数 1.6 Sys.Date()函数 1.7 再谈seq()函数 1.8 使用不同格式表示日期 二、时间的设定与使用 2.1 Sys.time()函数 2.2 as.POSIXct()函数…

【Python】selenium工具

目录 1. 安装 2. 测试 3. 无头浏览器 4. 元素定位 5. 页面滑动 6. 按键、填写登录表单 7. 页面切换 Selenium是Web的自动化测试工具&#xff0c;为网站自动化测试而开发&#xff0c;Selenium可以直接运行在浏览器上&#xff0c;它支持所有主流的浏览器&#xff0c;可以接…