微信小程序之模版的使用（template）

　　WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

　　分为两部分，定义模板和使用模板

　　（1）、定义模板：使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段。例如：定义一个加载的模板，在资源请求到之前调用该模板，请求到资源之后关闭该模板。

　　例如，我的文件目录是这样的：

　　其中，template文件夹下存放的是需要调用的模板，我现在index文件夹下的index.wxml文件中调用该模板。

　　模版文件load.wxml的代码如下：　　

<template name="loading"><view class='loading-container' wx:if="{{isShowLoading}}"><image src='https://img-blog.csdnimg.cn/2022012917343581065.gif' ></image></view>
</template>

　　模板样式文件load.wxss这里省略了。

　　（2）、使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。

　　那么我在index文件夹下的index.wxml文件中调用该模板，应该这样写：　　

<import src="../../template/load.wxml" />  // 导入摸板文件
<template is="loading" data="{{isShowLoading}}" />  // 使用模板

　　其中isShowLoading是一个boolean值，想让文件处于加载状态就等于true，否则为false

转载于:https://www.cnblogs.com/jf-67/p/8532640.html

微信小程序之模版的使用（template）相关推荐

微信小程序发送模版消息获取 formID 方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 想要发送模板消息,首先需要获取到用户的 formId , 因为用到获取用户 formId 的请求很大可能会复用 ...
微信小程序发送模版消息
使用说明步骤一:获取模板ID 有两个方法可以获取模版ID 通过模版消息管理接口获取模版ID(详见模版消息管理) 在微信公众平台手动配置获取模版ID 登录https://mp.weixin.qq.co ...
微信小程序(6)模板详解 template
2019独角兽企业重金招聘Python工程师标准>>> <template name="userTemp"> <view class=" ...
玩转微信小程序之获取用户信息以及玩转基本列表渲染（2019/04/14）
LZ-Says:总是要各种颠沛流离,才能换得片刻安宁.努力让自己变得更好,加油- 前言前几天,完成了微信小程序的首章,学习起来,还是多多少少有点坑,不舒服. 今天我们继续开启微信小程序 Study ...
微信小程序总结总结心得
今天小程序项目完结了,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. - app.js ...
微信小程序入门五: wxml文件引用、模版、生命周期
实例内容 wxml文件引用(include.import) 模版小程序生命周期实例一: include方式引用header.wxml文件文件引用对于代码的重用非常重要,例如在web开发中我们可以 ...
微信小程序使用template标签实现五星评分
前言微信小程序特点"无须安装,无须卸载,触手可及,用完即走",适合轻量级应用快速开发.小程序模版思想是它开发的核心思想,可以帮助开发者减少很多重复代码,我们来看看怎么在小程 ...
微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ
微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ 一.获取用户信息 1.首先我们需要了解什么是微信用户的OpenID 在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密 ...
微信小程序模块化开发 include与模板开发 template
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 1. include 是引用整个wxml文件,我通常会配合js,css一起使用: 使用场景,需要封装 ...

微信小程序之模版的使用（template）

微信小程序之模版的使用（template）相关推荐

最新文章

热门文章