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

我们有些时候 会有一些比较大但并不复杂的界面结构

这个时候 你可以试试这种导入模板的形式

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

参考代码如下

html 复制代码
<template name="textIndex">
    <text class = "testw">{{ name }}</text>
</template>

这里 我们声明自己的模板名字叫 textIndex

然后 我们需要使用我们的地方给一个name变量 然后我们做展示

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

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

html 复制代码
<import src="/template/text/test"/>
<view>
    <template is="textIndex" data = "{{ name }}" />
</view>

这里 我选择了 page下的index 第一个界面文件

这里 我们import 标签根据路径引入模板文件

然后下面is 告诉它我们要用上面的哪一块模板 data中的name 是给模板用的

然后 我们这个page或组件 js中要声明这个name变量

然后 我还在wxss文件夹中 给页面模板中的 testw类名声明了样式

没错 模板的样式 是跟着使用他的应用的 wxss样式来的

运行结果如下

也是没有任何问题

相关推荐
Ama_tor3 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由13 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
一只一只妖15 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设16 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru17 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉19 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊1 天前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
铲子Zzz2 天前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
paopaokaka_luck2 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序