微信小程序template界面模板导入

我们有些时候 会有一些比较大但并不复杂的界面结构
这个时候 你可以试试这种导入模板的形式

我们在根目录创建一个 template 目录 然后下面创建一个 text文件夹下面创建一个 test.wxml
参考代码如下

<template name="textIndex"><text class = "testw">{{ name }}</text>
</template>

这里 我们声明自己的模板名字叫 textIndex
然后 我们需要使用我们的地方给一个name变量 然后我们做展示

既然要用这种模板方式 就不要想什么css和js了 你在模板里面写是只有wxml界面有效的

然后 我们找到一个page 或者组件都可以 反正就是 找一个 wxml文件 编写代码如下

<import src="/template/text/test"/>
<view><template is="textIndex" data = "{{ name }}" />
</view>

这里 我选择了 page下的index 第一个界面文件
在这里插入图片描述
这里 我们import 标签根据路径引入模板文件
然后下面is 告诉它我们要用上面的哪一块模板 data中的name 是给模板用的

然后 我们这个page或组件 js中要声明这个name变量
在这里插入图片描述
然后 我还在wxss文件夹中 给页面模板中的 testw类名声明了样式
在这里插入图片描述
没错 模板的样式 是跟着使用他的应用的 wxss样式来的
运行结果如下
在这里插入图片描述
也是没有任何问题

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习笔记之微积分及绘图

深度学习笔记之微积分及绘图 学习资料来源&#xff1a;微积分 %matplotlib inline from matplotlib_inline import backend_inline from mxnet import np, npx from d2l import mxnet as d2lnpx.set_np()def f(x):return 3 * x ** 2 - 4 * xdef numerical_lim(f, x, h):retur…

React18入门(第一篇)——JSX、TSX语法详解

文章目录 一、JSX 语法简介二、和 HTML 标签的几点不同三、JSX 属性四、JSX 事件4.1 简单点击事件4.2 类型限制4.3 带参数&#xff0c;箭头函数 五、插入 JS 变量六、JSX 中使用条件判断七、循环 一、JSX 语法简介 JSX - 是 JS 的扩展&#xff0c;写在 JS 代码里面&#xff0c…

云安全之HTTP协议介绍

HTTP的基本概念 什么是网络协议 网络协议是计算机之间为了实现网络通信而达成的一种“约定”或者”规则“&#xff0c;有了这种”约定不同厂商生产的设备&#xff0c;以及不同操作系统组成的计算机之间&#xff0c;就可以实现通信。 网络协议由三个要素构成&#xff1a;1、语…

【Unity2022】Unity实现在两个物体之间连出一条线

文章目录 Line Renderer组件添加Line Renderer组件重要属性Positions&#xff08;位置&#xff09;Width &#xff08;宽度&#xff09;Material&#xff08;材质&#xff09;其他属性 使用脚本绘制直线绳子运行结果其他文章 Line Renderer组件 我们可以使用LineRenderer组件来…

百度交易中台之内容分润结算系统架构浅析

作者 | 交易中台团队 导读 随着公司内容生态的蓬勃发展&#xff0c;内容产出方和流量提供方最关注的“收益结算”的工作&#xff0c;也就成为重中之重。本文基于内容分润结算业务为入口&#xff0c;介绍了实现过程中的重难点&#xff0c;比如千万级和百万级数据量下的技术选型和…

基于SSM的健身房管理系统

基于SSM的健身房管理系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 【主要功能】 角色&#xff1a;管理员、用户 查看健身课程列表、新闻公告查看、推荐课程、购买…

LIMS实验室信息管理系统源码 基于计算机的数据处理技术、数据存储技术、网络传输技术、自动化仪器分析技术于一体

LIMS 是一个集现代化管理思想与基于计算机的数据处理技术、数据存储技术、网络传输技术、自动化仪器分析技术于一体&#xff0c;以实验室业务和管理工作为核心&#xff0c;遵循实验室管理国际规范&#xff0c;实现对实验室全方位管理的信息管理系统。 LIMS将样品管理、数据管理…

[CSCCTF 2019 Qual]FlaskLight 过滤 url_for globals 绕过globals过滤

目录 subprocess.Popen FILE warnings.catch_warnings site._Printer 这题很明显就是 SSTI了 源代码 我们试试看 {{7*7}} 然后我们就开始吧 原本我的想法是直接{{url_for.__globals__}} 但是回显是直接500 猜测过滤 我们正常来吧 {{"".__class__}} 查看当前…

MQ面试题

一、部署架构了解么? 1.1、生产者 1.2、消费者 1.3、brocker 负责接收生产者的消息并且储存起来,同时转发给消费者; 1.4、nameServer 类似注册中心,所有的brocker通过长链接和nameserver链接;通过心跳的方式定期的发送消息给nameserver;每个nameserver节点是对等的; 二…

SketchUp Pro 2023 for Mac——打造你的创意之城

SketchUp Pro 2023 for Mac是一款专业级的3D建模软件&#xff0c;为你提供最佳的设计和创意工具。不论你是建筑师、室内设计师&#xff0c;还是爱好者&#xff0c;SketchUp Pro都能满足你对于创意表达的需求。 SketchUp Pro 2023拥有强大而直观的界面&#xff0c;让你轻松绘制…

【小程序 - 加强】自定义组件、使用npm包、全局数据共享、分包_05

目录 一、自定义组件 1. 组件的创建与引用 1.1 创建组件 1.2 引用组件 1.2.1 局部引用组件 1.2.2 全局引用组件 1.2.3 全局引用 VS 局部引用 1.2.4 组件和页面的区别 2. 样式 2.1 组件样式隔离 2.2 组件样式隔离的注意点 2.3 修改组件的样式隔离选项 2.4 styleIso…

Springboot+vue的在线试题题库管理系统(有报告),Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的在线试题题库管理系统&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的在线试题题库管理系统&#xff0c;采用M&…