微信小程序——template标签详解

2024-05-10 11:29:29

微信的模版主要是用于公共界面管理，比如弹窗或公共页面都可以用模版定义。

一、模版创建

1、首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件

<!--template.wxml-->
<template name="msgItem"><view><text class="info">This is template.wxml文件，我是一个模板</text></view>
</template>

2、接下来我们就给模板增加样式文件，在pages/template文件夹中新建一个template.wxss文件,然后对模板文件，添加一个简单样式。

/* pages/template/template.wxss */
.template_style{font-size: 30rpx;color: #000000;
}

二：模版使用

1、然后在我们要使用的wxml加载

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/><view>This is index.wxml</view>
<!--使用-->
<template is="msgItem"/>

2、当前页面样式导入

/**index.wxss**/
@import "../template/template.wxss";

注意：（1）index.wxml中template 标签的is属性与template.wxml中template 标签的name属性值相同

（2）index.wxml文件中要通过import标签声明需要使用的模板文件
运行效果：

三：数据传递

1、有时候模版需要外面给他传递数据显示，这时先定义参数

<!--template.wxml-->
<template name="msgItem"><view><text class="info">{{infoData}}</text></view>
</template>

2、接下来我们在index.wxml中传递模板中所需要的参数，修改后的代码如下：

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/><view>This is index.wxml</view>
<!--使用-->
<template is="msgItem"  data="{{'这是一个参数'}}"/>

注意：在<data="{{'这是一个参数'}}">中传多少个参数，模版里才能获取多少个参数，比如模版需要2个参数，传参的时候要逗号添加，如：<data="{{'这是一个参数','这是第二个参数'}}">
作者：木马不在转
链接：https://www.jianshu.com/p/cfca91e9a78b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

微信小程序——template标签详解相关推荐

小程序向Java传值,微信小程序页面传值详解
微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
php 微信小程序循环多选,微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wx ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
微信小程序底部菜单详解
微信小程序底部菜单详解只需要在app.json里面修改配置,即可 {"pages":["pages/index/index","pages/logs ...
【迷宫】地下迷宫游戏-微信小程序开发流程详解
可曾记得,小时候上学路边买的透明铅笔盒,里面内嵌了一个小球,它用重力可从起点滚动到终点,对小朋友来说是感觉有趣的,在这个游戏的基础上,弄一款微信小程序的迷宫探索游戏试试,在不同关卡的迷宫中解开机关与谜 ...
微信小程序退款功能(详解完整)
微信小程序支付->退款微信小程序退款的时候如果是线上,就会涉及到Linux读取打包后项目存放文件路径失败问题,获取不到其中的微信退款证书,在这里就需要使用流的方式进行读取路径,经大佬指点才最终 ...
微信小程序后台开发详解
微信小程序后台开发前言开发环境开发流程项目整体结构接口开发项目部署 ip映射 Nginx反向代理 gunicorn+super多进程开启服务+进程监控 ssl证书小程序常用功能微信支付 ...

最新文章

热门文章