微信小程序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样式来的

运行结果如下

也是没有任何问题

相关推荐
甜甜的资料库32 分钟前
基于微信小程序的睡眠宝系统源码数据库文档
数据库·微信小程序·小程序
华子w90892585934 分钟前
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
spring boot·微信小程序·uni-app
恰薯条的屑海鸥2 小时前
关于我对各开发语言的看法与接下来的文章内容
开发语言·学习·微信小程序·网站开发·全栈开发
勿念4362 小时前
基于鸿蒙(HarmonyOS5)的打车小程序
华为·小程序·harmonyos
Stanford_11063 小时前
关于大数据的基础知识(二)——国内大数据产业链分布结构
大数据·开发语言·物联网·微信小程序·微信公众平台·twitter·微信开放平台
邹荣乐6 小时前
uni-app开发微信小程序的报错[渲染层错误]排查及解决
前端·微信小程序·uni-app
weixin_177297220698 小时前
盲盒一番赏小程序:引领盲盒新潮流
小程序
chaosama1 天前
微信小程序带参分享、链接功能
微信小程序·小程序
胡西风_foxww1 天前
微信小程序动态组件加载的应用场景与实现方式
微信小程序·应用·加载·动态组件
ALLSectorSorft1 天前
上门服务小程序会员系统框架设计
小程序·apache