微信小程序—WXML模板语法
1.数据绑定的基本原则
在页面对应的.js 文件中,把数据定义到data对象中即可:
Page({data: {//字符串类型的数据info: 'init data' ,//数组类型的数据 msgList: [{msg: 'hello'},{msg: 'world'}]} })
3.Mustache语法的格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为:
<view>{{要绑定的数据名称}}</view>
4.Mustache语法的应用场景
Mustache 语法的主要应用场景如下: 1.绑定内容 2.绑定属性 3.运算(三元运算、算术运算等)
5.动态绑定内容
页面的数据如下:
Page({data: {info: "init data" })
页面的结构如下:
<view>{{info}}</view>
6.动态绑定属性
页面的数据如下:
Page({data: {imgSrc: 'http: / Iww.itheima.com/images/logo.png'} })
页面的结构如下:
<image src="{{imgSrc}}"></image>
注解:mode="widthFix" 宽度不变高度自适应
7.三元运算
页面的数据如下:
Page({data:{randomNum: Math.random() * 10 //生成10以内的随机数} })
页面的结构如下:
<view>{{i randomNumber >= 5?'随机数字大于或等于5’:‘随机数字小于5'}}</view>
8.算数运算
页面的数据如下:
Page({data: {randomNum: Math.random().toFixed(2)//生成一个带两位小数的随机数,例如0.34} })
页面的结构如下:
<view>生成100以内的随机数:{{irandomNum * 100}}</view>
9.什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
10.小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap 或 bind:tap | 手指触摸后马上离开,类似于HTML中的click事件 |
input | bindinput或 bind:input | 文本框的输入事件 |
change | bindchange 或 bind:change | 状态改变时触发 |
11.事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下表所示:
属性 | 类型 | 说明 |
---|---|---|
tyge | string | 事件类型 |
timestamp | lnteger | 页面打开到触发事件所经过的毫秒数 |
target | object | 触发事件的组件的一些属性值集合 |
currentTarget | object | 当前组件的一些属性值集合 |
detail | object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
12.target 和currentTarget的区别
target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。举例如下:
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。
此时,对于外层的view来说: e.target 指向的是触发事件的源头组件,因此,e.target是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的view组件
bindtap 的语法格式
在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。通过bindtap,可以为组件绑定tap触摸事件,语法如下:
<button type=""primary" bindtap="btnTapHandler">按钮</button>
在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e)来接收:
Page(btnTapHlandler(e)//按钮的 tap事件处理函效 console.log(e)//事件参数对象e))
13.在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值,示例如下:
//页面的.js文件 Page({data: {count: 0 }, //修改count的值changeCount() {this.sctData({count: this.data.count + 1})} })
14.事件传参 小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。
例如,下面的代码将不能正常工作:
<button type="primary" bindtap='btnHandler(123)'>事件传参</button>
因为小程序会把 bindtap的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123)的事件处理函数。
可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字,示例代码如下:
<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>
最终: info会被解析为参数的名字
数值⒉会被解析为参数的值
在事件处理函数中,通过event.target.dataset.参数名即可获取到具体参数的值,示例代码如下:
btnHandler(event) { // dataset是一个对象,包含了所有通过data-传递过来的参数项console.log(event.target.dataset) //通过dataset可以访问到具体参数的值console.log(event.target.dataset.info) }
15.bindinput的语法格式
在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:
15.1通过bindinput,可以为文本框绑定输入事件:
<input bindinput= "inputHandler"><input>
15.2在页面的.js 文件中定义事件处理函数:
inputHandler(e) { // e.detail.value是变化过后,文本框最新的值console.log(e.detail.value) }
16.实现文本框和data之间的数据同步
实现步骤: 1.定义数据 2.渲染结构 3.美化样式 4.绑定input事件处理函数
定义数据:
Page({data:{mSg:'你好',} })
渲染结构:
<input value="{{imsg}}" bindinput="iptHandler"></input>
美化样式:
input {border: 1px solid #eee;padding: 5px;margin: 5px;border-radius: 3px; }
绑定input事件处理函数
//文本框内容改变的事件 iptHandler(e){this.setData({ //通过e.detail.value 获取到文本框最新的值msg: e.detai1.value}) )
17.wx:for
通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
默认情况下,当前循环项的索引用index表示;当前循环项用item表示。
18.手动指定索引和当前项的变量名*
使用wx:for-index可以指定当前循环项的索引的变量名
使用 wx:for-item可以指定当前项的变量名 示例代码如下:
19.WX:key的使用
类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key值,从而提高渲染的效率,示例代码如下:
微信小程序—WXML模板语法相关推荐
- 微信小程序---WXML 模板语法(附带笔记文档)
目录 学习文档 WXML模板语法-数据绑定 数据绑定基本原则 在data中定义页面数据 Mustache语法的格式 动态绑定属性 三元运算 算数运算 WXML模板语法-事件绑定 什么是事件 小程序中常 ...
- 微信小程序 - WXML 模板语法 - 条件渲染
1.wx:if (1)在微信小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{conditio ...
- 微信小程序在模板语法中使用indexOf失效问题解决办法
失效问题: 小程序的mastache语法不支持js的方法. 即在页面标签中,使用以下js方法无效: Object.keys() toString() indexOf() 解决办法-wxs: WXS(W ...
- (学习笔记)微信小程序 -- WXML模板、WXSS样式、JS逻辑交互
WXML是小程序框架下的标签语言,类似于网页开发中HTML WXML 和 HTML 的区别 1)使用的标签名不同 2)属性节点不同 3) 提供了类似于Vue中的模板语法 数据绑定.列表渲染.条件 ...
- 微信小程序----------WXML模板文件一
一.页面根元素page 每一个页面都具备一个根元素:<page></page>. 页面根元素可以在控制台的WXML选项卡中看到. 允许在wxss文件中对page根元素进行样式设 ...
- 微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
- 微信小程序-WXML转换类型
微信小程序-WXML转换类型 情景:需要在WXML中把字符串转化成数字类型 解决:引入WXS wxs是小程序的一套脚本语言,结合wxml,可以构建出页面的结构. wxs不依赖于运行时的基础库版本,可以 ...
- 修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样?
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
- 小程序 长按api_高质量的微信小程序样式模板应该长什么样?
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
最新文章
- Android 跳转Activity 的时候出现闪屏问题处理
- lnmp一键安装调优,lnmp,memcache,全文检索
- Redis事务(transaction)
- boost::graph::distributed用法的测试程序
- Java中继承、this关键字、super关键字
- MUI 图标显示不出来 - 分析篇
- grup2命令启动windows
- python中superclass是什么_Python中super()函数简介及用法分享
- javaSE----进制
- 全手工制作arm-linux交叉编译工具链《一》-转
- java对获取的字节数组进行处理
- (转)C# System.Diagnostics.Process.Start使用
- python跳出if_python跳出if
- 2020 数据中心机房建设方案
- Thinkpad E430C 跳过电池检测更新bios
- 常见flash讲解——NAND、SPI、EMMC
- [基础]-向量点乘和叉乘
- 诺基亚手机锁码忘记了,手机锁了,格式化忘记锁码了怎么办?
- 网络安全-技术与实践-第一章
- EOG-based eye movement detection and gaze estimation for an asynchronous virtual keyboard基于EOG的异步虚
热门文章
- SQL 2014新功能介绍系列3 - 备份还原篇
- 毕业答辩ppt计算机科学与技术,计算机科学与技术专业论文答辩PPT范例.ppt
- Java 使用Reactive Redis
- React动画实现方案之 Framer Motion,让你的页面“自己”动起来
- 机器深度学习笔记(1)——神经网络从一张图片中识别狗的过程
- 你真的认为自己熟练Python?带你一篇文章 查漏补缺,感受自己离深入掌握 Python 还有多远。
- 使用MATLAB提取图片中特定颜色
- JavaScript 事件节流
- TensorFlow-神经网络初体验
- Android 使用OkHttp支持HttpDNS