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

news/2024/7/20 2:29:28 标签: 微信小程序, 小程序

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

我们在根目录创建一个 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.niftyadmin.cn/n/5066460.html

相关文章

ES6中的数值扩展

1. 二进制和八进制的表示法 二进制和八进制的前缀分别为0b(或0B)和0o(或0O)表示 在ES5的严格模式下&#xff0c;八进制不再允许使用前缀0表示 如果要将0b和0x前缀的字符串数值转为十进制&#xff0c;要使用Number方法 Number(0b111); // 7 Number(0o10); // 82. Number.isF…

数学公式识别

关键词 MathML、LaTeX、OCR OCR识别 simpletex.cnhttps://mathpix.com/https://github.com/LinXueyuanStdio/LaTeX_OCR Mathpix 推荐最多的是Mathpix这个工具, 可以自动识别数学公式, 并转换为LaTex格式, 而且准确率挺高. 这个软件刚开始是免费的, 可惜很快就收费了, 而且…

Android 打开通知中心(StatusBar)

最近接到一个需求&#xff0c;需要在应用内打开通知中心&#xff08;StatsuBar&#xff09;。查了一下资料发现需要用到StatsuBarManagr来操作StatsuBar。但是在使用过程中发现&#xff0c;StatsuBarManagr是非公开的API&#xff0c;我们无法直接获取&#xff0c;所以只有借助反…

小谈设计模式(16)—抽象工厂模式

小谈设计模式&#xff08;16&#xff09;—抽象工厂模式 专栏介绍专栏地址专栏介绍 抽象工厂模式结构抽象工厂&#xff08;AbstractFactory&#xff09;具体工厂&#xff08;ConcreteFactory&#xff09;抽象产品&#xff08;AbstractProduct&#xff09;具体产品&#xff08;C…

(粗糙的笔记)动态规划

动态规划算法框架&#xff1a; 问题结构分析递推关系建立自底向上计算最优方案追踪 背包问题 输入&#xff1a; n n n个商品组成的集合 O O O&#xff0c;每个商品有两个属性 v i v_i vi​和 p i p_i pi​&#xff0c;分别表示体积和价格背包容量 C C C 输出&#xff1a; …

【C++】面向对象编程(一) 继承、多态、动态绑定

面向对象编程概念的两项主要特质&#xff1a;继承和多态。 继承 继承&#xff1a;将一群相关的类组织起来&#xff0c;分享其间的共通数据和操作行为&#xff1b;继承机制定义了父子关系/继承关系&#xff1a; 父类/基类&#xff1a;定义了所有子类的共通的公有接口和私有实现…

Java基础API---euqals 小知识

导入&#xff1a; 大家有没有遇到自定义的类&#xff0c;无法用equals方法比较成员属性呀&#xff1f;那是因为需要重写equals方法 重写原理这里偷个懒&#xff0c;idea中 altinsert 快捷键&#xff0c;快速实现重写equals噢&#xff01; Student类&#xff1a; package ob…

计组——I/O方式

一、程序查询方式 CPU不断轮询检查I/O控制器中“状态寄存器”&#xff0c;检测到状态为“已完成”之后&#xff0c;再从数据寄存器取出输入数据。 过程&#xff1a; 1.CPU执行初始化程序&#xff0c;并预置传送参数&#xff1b;设置计数器、设置数据首地址。 2. 向I/O接口发…