微信小程序定义模板

news2024/12/23 6:32:05

微信小程序提供模板(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.coloradmin.cn/o/477624.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

笔记:对多维torch进行任意维度的多“行”操作

如何取出多维torch指定维度的指定“行” 从二维torch开始新建torch取出某一行取出某一列一次性取出多行取出连续的多行取出不连续的多行 一次取出多列取出连续的多列取出不连续的多列 考虑三维torch取出三维torch的任意两行&#xff08;means 在dim0上操作&#xff09;取出连续…

( 字符串) 9. 回文数 ——【Leetcode每日一题】

❓9. 回文数 难度&#xff1a;简单 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如…

Git的安装与使用+Git在IDEA中的使用

文章目录 一、Git概述1、版本控制器的方式2、Git的工作流程图 二、Git的安装与常用命令1、Git环境安装2、Git环境基本配置3、获取本地仓库4、基础操作指令 三、分支1、常用指令2、解决合并冲突 四、Git远程仓库1、创建远程仓库2、远程操作仓库3、冲突处理 四、IDEA中使用Git1、…

数据结构——二叉树

二叉树 1 二叉树的种类 1.1 满二叉树 节点数量为 2^k - 1 (k是树的深度&#xff0c;底层的叶子节点都是满的&#xff09; 1.2 完全二叉树 完全二叉树是指除了下面一层外&#xff0c;其余层的节点都是满的&#xff1b; 且最下面一层的叶子节点是从左到右连续的。 下面这个…

pci总线协议学习笔记——PCI总线基本概念

1、pci总线概述 (1)PCI&#xff0c;外设组件互连标准(Peripheral Component Interconnection)&#xff0c;是一种由英特尔&#xff08;Intel&#xff09;公司1991年推出的用于定义局部总线的标准; (2)最早提出的PCI总线工作在33MHz频率之下&#xff0c;传输带宽达到133MB/s(33M…

【LeetCode】236. 二叉树的最近公共祖先

1.问题 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是…

1992-2022年31省GDP、第一产业增加值、第二产业增加值 第三产业增加值

1992-2022年31省GDP、第一产业增加值、第二产业增加值 第三产业增加值 1、时间&#xff1a;1992-2022年 2、范围&#xff1a;包括31省 3、指标&#xff1a;省GDP、省第一产业增加值、省第二产业增加值、省第三产业增加值 4、缺失情况说明&#xff1a;无缺失 5、来源&#…

【python知识】__init__.py的来龙去脉

一、说明 我们常见__init__.py文件&#xff0c;但说不清楚它的用途&#xff0c;在本文&#xff0c;我将首先把它的来龙去脉说清楚&#xff0c;然后告诉大家&#xff0c;如何编制python工程&#xff0c;培养全局的编程格局。 二、包-模块-函数结构 在Python工程里&#xff0c;当…

playwright连接已有浏览器操作

文章目录 playwright连接已有浏览器操作前置准备打开本地已有缓存的Chrome&#xff08;理解&#xff09;指定端口打开浏览器连接指定端口已启动浏览器&#xff08;推荐&#xff09; playwright连接已有浏览器操作 前置准备 pip install playwright # 安装playwright的python…

红黑树数据结构

现在JAVASE中HashMap中底层源码是由数组链表红黑树进行设计的&#xff0c;然后很多地方也是用到红黑树&#xff0c;这里单独对红黑树数据结构进行简单的介绍。 目录 红黑树概念 红黑树的性质 自平衡规则 代码 红黑树概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;…

linux常用命令大全(保姆及入门)

linux常用命令大全 一、文件处理命令1、目录处理命令&#xff1a;ls2、目录处理命令2.1 mkdir2.2 pwd2.3 rmdir2.4 cp2.5 mv2.6 rm 3.文件处理命令3.1 touch3.2 cat3.3 tac3.4 more3.5 less3.6 head3.7 tail 4.链接命令4.1 ln 二、权限管理命令2.1 chmod2.2 chown2.3 chgrp 2.4…

VRPTW:新雀优化算法NOA求解带时间窗的车辆路径问题

一、新雀优化算法NOA求解带时间窗的车辆路径问题 1.1VRPTW模型如下&#xff1a; 带时间窗的车辆路径问题(Vehicle Routing Problem with Time Windows, VRPTW) 1.2新雀优化算法NOA求解VRPTW close all clear clc SearchAgents_no30; % 种群大小 Function_nameF1; Max_ite…

准备“开黑”,电脑却“告退”?游戏闪退的解决方法

游戏玩家近期可能会发现&#xff0c;不少大作陆陆续续登录PC市场&#xff0c;比如《死亡岛 2》、《无畏契约》等。但也有不少游戏用户会发现&#xff0c;电脑玩游戏时容易出现闪退的情况。特别是在进行高负荷运算的时候&#xff0c;有一些游戏更为容易出现这种情况&#xff0c;…

[架构之路-176]-《软考-系统分析师》-17-嵌入式系统分析与设计 -1- 实时性(任务切换时间、中断延迟时间、中断响应时间)、可靠性、功耗、体积、成本

目录 前言&#xff1a; 1 7 . 1 嵌 入 式 系 统 概 述 1 . 嵌入式系统的特点 (1) 系统专用性强。 (2) 系统实时性强。 (3) 软硬件依赖性强 (4) 处理器专用。 ( 5 ) 多种技术紧密结合。 (6) 系统透明性。 (7) 系统资源受限。 2 . 嵌入式系统的组成 1 7 . 3 嵌入式实…

拷贝构造函数和赋值重载函数详解

1.拷贝构造函数 1.1拷贝构造函数的概念 拷贝构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存在的类类型对象创建新对象时由编译器自动调用。拷贝构造函数也是特殊的成员函数&#xff0c;其特征如下&#…

Golang每日一练(leetDay0051)

目录 151. 颠倒字符串中的单词 Reverse Words In A String &#x1f31f;&#x1f31f; 152. 乘积最大子数组 Maximum Product Sub-Array &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一…

【分布式】CAP原则和BASE理论

CAP原则概述 CConsistency一致性AAvailability可用性PPartition tolerance分区容错性 1998年&#xff0c;加州大学的计算机科学家Eric Brewer提出&#xff0c;分布式系统有三个指标 一致性&#xff08;C&#xff09;&#xff1a;在分布式系统中的所有数据备份&#xff0c;在同…

TiDB实战篇-基于索引的SQL优化

简介 TiDB实战篇-基于索引的SQL优化。 Online DDL 允许直接在线执行ddl操作&#xff0c;不会锁表&#xff0c;但是执行多个ddl的时候会要排队。 原理 控制创建索引的速度 查看影响 标红的是加了多少行索引。 添加索引的线上的影响&#xff08;读写频繁&#xff09; 只读场…

Linux程序设计之IP地址转换

1.通常&#xff0c;人们习惯于使用可读性好的字符串来表示IP的地址&#xff0c;但是&#xff0c;在实际的使用过程中&#xff0c;需要使用的IP地址应该为无符号的整数(在计算机中存储时是对应的二进制&#xff0c;只有二进制计算机才能识别&#xff0c;即0、1)。已经封装好的函…

windows开机不自动挂载磁盘的方法

本人的电脑系统为win11 写作时间20230430 开机不挂载某块磁盘的理由 1.本人电脑上有个仓库盘是机械硬盘&#xff0c;并不是每次开机都要用到&#xff0c;开机不挂载也许有利于增加数据盘的寿命 2.挂载了数据盘&#xff0c;有时候打开文件页面会比较慢&#xff0c;不够丝滑 …