微信小程序学习日记---模板(template)全解析

1.定义模板:

模板使用<template> </template>定义使用 name 属性作为模板的名字,供下次调用.

<template name='test'><view>测试模板</view><view>{{name}}</view><view>{{age}}</view><view>{{sex}}</view>
</template>

2.使用模板:

使用 is 属性声明要使用的模板名称,然后将模板所需要的数据使用 data 传入.

注意:这里可能会用到 ... 符号用于展开对象.

如果模板内绑定的数据名跟page.js中data对象属性名相同则可以省略value.

详情看代码

//page.wxml
<template is="test" data="{{name:name,age:age,sex:sex}}"/>
<template is="test" data="{{...data1}}"/> <!--注意...这是展开对象的符号,可以理解为去掉对象的大括号-->
<template is="test" data="{{name,age,sex}}"/> <!--可以省略value-->
//page.jspage({data:{name:"爱憎分明",age:20,sex:'男',data1:{name:'苍老师',age:30,sex:'女'}}
})

3.模板作用域:

模板只能使用 is 传入的数据

4.引用模板

例如在page/demo/中定义了页面 demo.wxml 和模板文件template.wxml 就可以使用 import 引入 template.wxml 用 src 属性声明模板路径

注意: import 只会引用目标文件中定义的 template 而不会引用目标文件引用的template

<import src='template.wxml' /><template is="test" data="{{...data1}}"/>

5.导入文件

include可以将目标文件除模板代码块<template />以外的所有代码引入,相当于拷贝到include位置.用src声明文件路径

//template.wxml//template 以及所包括的内容不会被include
<template name='test1'><view>测试模板1</view><view>{{name}}</view><view>{{age}}</view><view>{{sex}}</view>
</template>
//这下面的所有代码会被include
<block><view>测试模板1</view><view>{{name}}</view><view>{{age}}</view><view>{{sex}}</view>
</block>//page.wxml
<include src="template.wxml"/>

微信小程序学习日记---模板(template)全解析相关推荐

微信小程序学习day02-WXSS 模板样式
目录 WXSS 模板样式-介绍: 1. 什么是 WXSS: 2. WXSS 和 CSS 的关系: WXSS 模板样式 - rpx : 2. rpx 的实现原理: 3. rpx 与 px 之间的单位换算 ...
微信小程序学习日记5
1.小程序运行环境运行环境逻辑层渲染层 iOS JavaScriptCore WKWebView 安卓 V8 chromium定制内核小程序开发者工具 NWJS Chrome WebView ...
微信小程序学习日记7
1.微信小程序双线程模型解析: [1]逻辑层和渲染层分开加载,提供了管控型和安全性 [2]沙盒环境运行JS代码,不允许执行任何和浏览器相关的接口,比如跳转页面.操作DOM等 2.Vue的MVVM和小 ...
微信小程序学习日记6
1.WXML冒泡事件列表解析: [1]touchstart:手指触摸动作开始 [2]touchmove:手指触摸后移动 [3]touchcancel:手指触摸动作被打断,如来电提醒,弹窗 [4]to ...
微信小程序学习day01-WXML 模板语法
目录 WXML 模板语法 - 数据绑定: 1.数据绑定的基本原则 2. 在 data 中定义页面的数据 3. Mustache 语法的格式 4. Mustache 语法的应用场景 5. 动态绑定内容 ...
微信小程序学习日记day1
全局文件的设置 1.新增一个页面当你想新建一个页面时,直接在app.json中加入page字段值,如图,保存后,系统自动创建一个页面 2.主界面设置将主界面文件在app.json中page值放在最 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序学习：（五）swiper塌陷问题解决
微信小程序学习:(五)swiper塌陷问题解决 github地址: https://github.com/leoricding/- (一)问题分析需求:实现tab切换,内容切换:内容切换,tab也切 ...
微信小程序学习总结（1）
微信小程序学习总结(1) 一.注册微信小程序访问https://mp.weixin.qq.com/ ,点击"立即注册" 选择"小程序" 然后点击"链 ...
TP5之微信小程序推送模板消息
TP5之微信小程序推送模板消息 1.获取formId并且存储起来,获取formId方法见: https://blog.csdn.net/u010481239/article/details/78239 ...

微信小程序学习日记---模板(template)全解析

微信小程序学习日记---模板(template)全解析相关推荐

最新文章

热门文章