当前位置: 首页 > news >正文

微信小程序:模板使用

目录

模板的优点:

一、静态模板创建

二、静态模板使用

1.*.wxml引入模板

 2.模板使用

 3.*.wxss引入模板的样式

 三、动态模板创建

四、动态模板使用

1.*.wxml引入模板

2.模板使用

3.*.js定义动态数据

五、结果展示

总结


模板的优点:

  1. 有利于保持网页风格的一致;提高工作效率。
  2. 减少代码的复用性

一、静态模板创建

//唯一标识name
<template name="mytemp"> <view><view class="title">这是我自定义的模板</view></view>
</template>
<!-- 引入模板 -->

二、静态模板使用

1.*.wxml引入模板

<import  src="/temp/mytemp/mytemp"></import>

 2.模板使用

注意点:利用is属性,写入上边定义模板的name字段,两个字段要统一

<!-- 引入模板 -->
<import  src="/temp/mytemp/mytemp"></import>
<view class="otherContainer"><!-- 测试模板 --><view>测试使用模板</view><template is='mytemp'></template> 
</view>

 3.*.wxss引入模板的样式

/* 样式引入 */
@import "/temp/mytemp/mytemp.wxss";

 三、动态模板创建

注意点:依旧利用 {{}} 形式来进行数据绑定

<!-- 定义模板 -->
<template name="mytemp"><view><view class="title">这是我自定义的模板</view></view><view class="userInfo"><view class="userName">用户名:{{userName}}</view><view class="age">年龄:{{age}}</view></view>
</template>

四、动态模板使用

1.*.wxml引入模板

<!-- 引入模板 -->
<import  src="/temp/mytemp/mytemp"></import>
<view class="otherContainer"><!-- 测试模板 --><view>测试使用模板</view><template is='mytemp' data="{{...persion}}"></template>
</view>

2.模板使用

注意点:利用 data="{{}}" 标签传入数据,并利用  ... 进行拆包

3.*.js定义动态数据

注意点:这字段的名称需要与模板字段一致

data: {persion:{userName:'小明',//姓名age:18,//年龄}},

五、结果展示

 

总结

  • 模板的引入减少代码的复用性
  • 模板可以方便后期管理,统一整改

相关文章:

微信小程序:模板使用

目录 模板的优点&#xff1a; 一、静态模板创建 二、静态模板使用 1.*.wxml引入模板 2.模板使用 3.*.wxss引入模板的样式 三、动态模板创建 四、动态模板使用 1.*.wxml引入模板 2.模板使用 3.*.js定义动态数据 五、结果展示 总结 模板的优点&#xff1a; 有利于保持网…...

AUTOSAR NvM Block的三种类型

Native NVRAM block Native block是最基础的NvM Block&#xff0c;可以用来存储一个数据&#xff0c;可以配置长度、CRC等。 Redundant NVRAM block Redundant block就是在Native block的基础上再加一个冗余块&#xff0c;当Native block失效&#xff08;读取失败或CRC校验失…...

Vue+ElementUI实现选择指定行导出Excel

这里记录一下&#xff0c;今天写项目时 的一个需求&#xff0c;就是通过复选框选中指定行然后导出表格中选中行的Excel表格 然后这里介绍一个工具箱(模板)&#xff1a;vue-element-admin 将它拉取后&#xff0c;运行就可以看到如下界面&#xff1a; 这里面的很多功能都已经实现…...

SNMP简单介绍

SNMP SNMP是广泛应用于TCP/IP网络的网络管理标准协议&#xff0c;该协议能够支持网络管理系统&#xff0c;用以监测连接到网络上的设备是否有任何引起管理上关注的情况。SNMP采用轮询机制&#xff0c;提供最基本的功能集&#xff0c;适合小型、快速、低价格的环境使用&#xf…...

使用python对图像加噪声

加上雨点噪声 import cv2 import numpy as npdef get_noise(img, value10):#生成噪声图像>>> 输入&#xff1a; img图像value 大小控制雨滴的多少 >>> 返回图像大小的模糊噪声图像noise np.random.uniform(0, 256, img.shape[0:2])# 控制噪声水平&#xff…...

以 Java NIO 的角度理解 Netty

文章目录 前言Java NIO 工作原理Selector 的创建ServerSocketChannel 的创建ServerSocketChannel 注册 Selector对事件的处理总结 前言 上篇文章《Netty 入门指南》主要涵盖了 Netty 的入门知识&#xff0c;包括 Netty 的发展历程、核心功能与组件&#xff0c;并且通过实例演示…...

Maven自定义脚手架(多module模块)+自定义参数

脚手架 视频教程&#xff1a; Maven保姆级教程 脚手架是一个项目模板&#xff0c;包含常用的工程结构、代码。 1 自定义脚手架 脚手架创建的步骤如下&#xff0c;先创建一个工程&#xff0c;把常用的代码写好&#xff0c;进入工程根目录&#xff0c;进行如下操作&#xff1a; …...

爬虫逆向实战(七)--猿人学第十六题

一、数据接口分析 主页地址&#xff1a;猿人学第十六题 1、抓包 通过抓包可以发现数据接口是api/match/16 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以看出m是加密参数 请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无cook…...

Qt 杂项(Qwt、样式等)

Qt隐藏窗口边框 this->setWindowFlags(Qt::FramelessWindowHint);Qt模态框 this->setWindowModality(Qt::ApplicationModal);QLable隐藏border 代码中设置 lable->setStyleSheet("border:0px");或者UI中直接设置样式&#xff1a;“border:0px” Qwt开源…...

Python程序设计——列表

一、引言 关键点&#xff1a;一个列表可以存储任意大小的数据集合。 程序一般都需要存储大量的数值。假设&#xff0c;举个例子&#xff0c;需要读取100个数字&#xff0c;计算出它们的平均值&#xff0c;然后找出多少个数字是高于这个平均值的。程序首先读取100个数字并计算它…...

NPDP含金量高吗?难考吗?

一&#xff0c;什么是NPDP认证&#xff1f; NPDP认证中文名为产品经理国际资格认证&#xff0c;New Product Development Professional (NPDP) &#xff0c;是由美国 产品开发与管理协会 (PDMA) 所发起&#xff0c; 是国际公认的唯一的新产品开发专业认证&#xff0c;集理论、方…...

windows pip安装出现 error: Microsoft Visual C++ 14.0 is required

可参考&#xff1a;如何解决 Microsoft Visual C 14.0 or greater is required. Get it with “Microsoft C Build Tools“_不吃香菜的小趴菜的博客-CSDN博客 一、安装Visual Studio2022 1、下载&#xff1a;下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 我这使…...

威胁分析风险评估(TARA)影响和攻击可行性评估参考

在威胁分析风险评估&#xff08;TARA)过程中&#xff0c;风险等级由对资产安全属性侵害造成后果的影响等级和威胁的可能性两方面综合评估。 备注&#xff1a;以上内容的评估皆是建立在由信息安全问题引起并导致的前提下。 影响等级评估 影响等级说明&#xff0c;影响从安全&a…...

【教程】H5匿名信源码下载一封来信系统安装流程搭建教程

1、下载源码 匿名信2.0&#xff1a;匿名信h5源码 - 万策云盘 提取码&#xff1a;hOC4 2、查看搭建和使用教程 1,准备授权好的域名和服务器还有源码 2&#xff0c;创建网站和数据库&#xff0c;版本选择7.1【不可以选7.2】 3&#xff0c;上传源码并解压&#xff0c;导入数据…...

PyTorch训练简单的生成对抗网络GAN

文章目录 原理代码结果参考 原理 同时训练两个网络&#xff1a;辨别器Discriminator 和 生成器Generator Generator是 造假者&#xff0c;用来生成假数据。 Discriminator 是警察&#xff0c;尽可能的分辨出来哪些是造假的&#xff0c;哪些是真实的数据。 目的&#xff1a;使…...

django实现文件上传

在django中实现文件上传有三种方法可以实现&#xff1a; 自己手动写使用Form组件使用ModelForm组件 其中使用ModelForm组件实现是最简单的。 1、自己手写 先写一个上传的页面 upload_file.html enctype"multipart/form-data 一定要加这个&#xff0c;不然只会上传文件名…...

Java地图专题课 基本API BMapGLLib 地图找房案例 MongoDB

本课程基于百度地图技术&#xff0c;由基础入门开始到应用实战&#xff0c;适合零基础入门学习。将企业项目中地图相关常见应用场景的落地实战&#xff0c;包括有地图找房、轻骑小程序、金运物流等。同时讲了基于Netty实现高性能的web服务&#xff0c;来处理高并发的问题。还讲…...

vue实现可缩放拖拽盒子(亲测可用)

特征 没有依赖 使用可拖动&#xff0c;可调整大小或两者兼备定义用于调整大小的句柄限制大小和移动到父元素或自定义选择器将元素捕捉到自定义网格将拖动限制为垂直或水平轴保持纵横比启用触控功能使用自己的样式为句柄提供自己的样式 安装和基本用法 npm install --save vue-d…...

python一次性导出项目用到的依赖

导出依赖列表 如果你用到了Anaconda&#xff0c;记得先激活环境!!!! 下载pipreqs pip install pipreqs 在项目的根目录新建一个run_pipreqs.py文件&#xff0c;复制一下代码&#xff1a; # -*- coding: utf-8 -*- import os import subprocessos.environ["PYTHONIOE…...

移动端网页中的前端视频技术探索

引言 随着移动设备的普及和网络速度的提升&#xff0c;移动端网页中的视频播放已经成为了越来越重要的功能需求。本篇博客将介绍一些在移动端网页中实现前端视频播放的技术探索&#xff0c;并提供详细的代码示例。 1. 基本视频标签 在移动端网页中实现视频播放最基本的方法就…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

DeepSeek越强,Kimi越慌?

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...