一、数据处理

1.字符数据的绑定

2.图片数据的动态绑定

3.数据运算

4.总代码与测试截图

二、事件处理

1.概念

2.事件绑定

（1）bindtap

（2）bindinput

3.事件传参

（1）小程序中的事件传参比较特殊，即不能在绑定事件的同时进行参数的传递。

（2）获取参数值

4.数据赋值与同步

（1）数据赋值

（2）文本框和data之间的数据同步

三、条件渲染

（1）根据指定条件来选择性的渲染某个页面

（2）根据指定条件控制多个组件的展示与隐藏

四、列表循环渲染

（1）wx:for循环渲染

（2）wx:key提高循环渲染效率

一、数据处理

原理：在.js文件中的data:{ }页面数据块中进行变量的声明，然后在.wxml文件中使用Mustache语法格式，即{{ }}进行数据的使用。另外{{ }}可以支持数据的运算包括三元运算以及图片数据的动态绑定。

1.字符数据的绑定

声明数据

data: {info:'hello word!',//定义变量info},

使用数据

<view>{{info}}</view>

2.图片数据的动态绑定

声明数据

 //变量值存放的是图片的地址
data: {
imageSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F01%2F210924134Q43357-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659682783&t=228a191082446f27834a00087ebf252b',},

使用数据

<image src="{{imageSrc}}" mode="widthFix"></image>

3.数据运算

以生成随机数并用三目运算符判断值的范围为例

声明数据

data: {randomNumber:(Math.random()*10).toFixed(2),//生成10以内的随机生成数，并保留两位小数randomNumber2:Math.random().toFixed(2),//将0~1之间的随机数保留两位小数},

使用数据

<view><view><text class="container1">随机数1为：{{randomNumber}}</text><!-- 使用Mustache即{{}}进行三元运算 -->{{randomNumber >= 5 ? '随机数大于或等于5' : '随机数小于5'}}</view><view><text class="container2">随机数2为：{{randomNumber2*100}}</text>{{randomNumber >= 50 ? '随机数大于或等于50' : '随机数小于50'}}</view>
</view>

4.总代码与测试截图

.js文件(仅展示页面数据data部分)

 /*** 页面的初始数据*/// 数据绑定 data: {info:'hello word!',//定义变量infoimageSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F01%2F210924134Q43357-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659682783&t=228a191082446f27834a00087ebf252b',randomNumber:(Math.random()*10).toFixed(2),//生成10以内的随机生成数randomNumber2:Math.random().toFixed(2),//将随机数保留两位小数},

.wxml文件

<!-- 使用Mustache语法调用.js文件中data中所声明的变量info,将其渲染到页面上 -->
<!-- 字符数据的绑定 -->
<view>{{info}}</view>
<!-- 图片数据的动态绑定 -->
<image src="{{imageSrc}}" mode="widthFix"></image><view><view><text class="container1">随机数1为：{{randomNumber}}</text><!-- 使用Mustache即{{}}进行三元运算 -->{{randomNumber >= 5 ? '随机数大于或等于5' : '随机数小于5'}}</view><view><text class="container2">随机数2为：{{randomNumber2*100}}</text>{{randomNumber2*100 >= 50 ? '随机数大于或等于50' : '随机数小于50'}}</view>
</view>

.wxss文件

/* pages/databind/dayabind.wxss */
.container1{background-color: lightgreen;
}.container2{background-color:lightpink;
}

测试截图

获取图片地址

（也可以绑定根目录下image文件夹里面的图片，给出路径即可）

二、事件处理

1.概念

事件是渲染层（.wxml）到逻辑层（.js）的通讯方式。
通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务处理

常用的事件：

当事件回调函数被触发时，会接收到一个事件对象event，它的详细属性如下：

另外，target与currentTarget的区别：

2.事件绑定

（1）bindtap

在小程序中，没有HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为

.wxml代码

<button type="primary" bindtap="btntap">按钮</button>

.js代码

Page({// 触摸事件的处理函数btntap(event){console.log("hello world!");console.log(event);},
})

测试截图

当点击按钮，则会触发按钮事件处理函数，接收到事件对象后，在调试器输出打印一个hello world!和事件源组件的属性集合··

（2）bindinput

在小程序中，通过input事件来响应文本框的输入事件
通过bindinput来为文本框绑定事件

.wxml

<input bindinput="handleInput"></input>

.js

Page({//文本框输入事件响应handleInput(e){//打印输出文本框内最新的值console.log(e.detail.value)},
})

3.事件传参

（1）小程序中的事件传参比较特殊，即不能在绑定事件的同时进行参数的传递。

例如如下代码，本想在绑定事件将参数123传递过去，但是这样会被小程序编译器当做统一事件名称来处理，相当于调用一个名称为btntap(123)的事件处理函数，而不是传递参数123

错误代码

<button type="primary" bindtap="btntap(123)">事件传参</button>

正确代码

<button type="primary" bindtap="btntap" data-info="{{123}}">事件传参</button>

可以为组件提供data-*自定义属性传参，其中*表示在data结点中定义的参数变量名字

（2）获取参数值

通过调用event.target.dataset.*来获取，*为参数变量名称

.wxml

<button type="primary" bindtap="btntap" data-info="{{2}}">按钮</button>

.js

// 触摸事件的处理函数btntap(event){console.log("hello world!");//在原来值的基础上加上传递进来的参数值count:this.data.count+event.target.dataset.info})console.log(event);},

4.数据赋值与同步

（1）数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值

页面结构不变，.js文件中代码为

Page({/*** 页面的初始数据*/data: {count:0},// 触摸事件的处理函数btntap(event){console.log("hello world!");this.setData({count:this.data.count+1})console.log(this.data.count);},
})

可以看到每点击一次按钮，count值加1

（2）文本框和data之间的数据同步

原理：先获取文本框内输入的最新值，再使用this.setData方法将数据重新赋值

.wxml

<input  value="{{msg}}" bindinput="handleInput"></input>

.js

Page({data: {  msg:'你好'},//文本框输入事件响应handleInput(e){//更新数据，实现数与文本框内输入一致this.setData({msg:e.detail.value})//打印输出文本框内最新的值console.log(this.data.msg)},})

.wxss

input{border: 1px solid #eee;padding: 5px;margin: 5px;border-radius: 3px;}

测试

可见在文本框内每输入一个字符都将同步到data中的参数msg中，这样实现了数据的同步

三、条件渲染

（1）根据指定条件来选择性的渲染某个页面

例如下面的代码，type为js文件data节点下的变量值为2，根据type的值来选择在页面上渲染的内容

（条件判断是3个等于号===，这一点要注意）

<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else="{{type===3}}">保密</view>

另外，也可以使用hidden来实现相同的功能

<view hidden="{{type===1}}">男</view>
<view hidden="{{type===2}}">女</view>
<view hidden="{{type===3}}">保密</view>

使用hidden与wx:if的区别：

wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden以切换样式的方式（display:none/block;）来控制元素的显示与隐藏
当需要频繁切换时，建议使用hidden
当控制条件较多，建议使用wx:if

（2）根据指定条件控制多个组件的展示与隐藏

需要使用<bolck></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性

注意：<block>并不是组件，它只是一个包裹性质的容器，不会在页面中做任何的渲染

<block wx:if="{{type===2}}"><view>view1</view><view>view2</view><button type="primary">点我</button>
</block>

四、列表循环渲染

（1）wx:for循环渲染

数组内容

  arr2:['华为','小米','苹果']

渲染

<view wx:for="{{arr2}}">下标：{{index}} ,名字：{{item}}
</view>

index为数组默认的下标，item为数组默认的每一项，当数组不是一维数组时，item项指代里面的每一个对象，打印的话就要使用item.XX来进行打印输出，而只打印 item 会发现是个Object对象

数组内容

arr:[{id:0,name:'华为'},{id:1,name:'小米'},{id:2,name:'苹果'}]

渲染

<view wx:for="{{arr}}">下标：{{item.id}} ,名字：{{item.name}}
</view>

（2）wx:key提高循环渲染效率

<view wx:for="{{arr}} wx:key="id">下标：{{item.id}} ,名字：{{item.name}}
</view>

不妨点个赞再走哦~

微信小程序开发之WXML模板语法相关推荐

微信小程序开发之WXML：数据绑定
WXML语言最终会被转译为宿主端对应的语言,所以WXML语言中使用的标签一定是小程序定义的标签,不能使用自定义的标签,这样才能保持页面的正确转译.(这是对上一篇标签的补充) WXML具有数据绑定.列表 ...
微信小程序2（WXML模板语法）
WXML模板语法-数据绑定数据绑定的基本原则在data中定义数据在WXML中使用数据在data中定义数据在页面对应的.js文件中,把数据定义到data对象中即可: Page({data: { ...
微信小程序开发之WXSS模板样式与WXS脚本语言
目录一.WXSS (1)rpx尺寸单位 (2)样式导入 (3)全局样式与局部样式 (4)常用样式二.WXS (1)概念 (2)应用场景 (3)WXS与JavaScript的关系 (4)基本用法内 ...
微信小程序中的WXML模板语法
目录一.数据绑定 1. 数据绑定的基本原则 2. 在 data 中定义页面的数据 3. Mustache 语法的格式 4. Mustache 语法的应用场景 5. 动态绑定内容 6. 动态绑定属性 ...
微信小程序开发之wxss中的那些事（一）
微信小程序开发之wxss中的那些事微信小程序开发中,页面的布局怎么整? 啥是WXSS? 基本语法什么是rpx 什么是 flex 微信小程序开发中,页面的布局怎么整? 各位道友请留步,如果你是新手, ...
微信小程序开发之SVG的使用
因为工作的原因,最近开始接触并且了解微信小程序.太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下.这一篇先总结一下svg在小程序中的使用. S ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
微信小程序开发之formId使用（模板消息）
基于微信小程序的模板消息下发条件:用户本人在微信体系内与页面有交互行为后触发 1. 使用说明 1.1 获取模板id 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板, ...
微信小程序开发之mpVue
1 mpVue是什么 1.1 简介美团工程师推出的基于Vue.js封装的用于开发小程序的框架融合了原生小程序和Vue.js的特点可完全组件化开发 1.2 特点组件化开发完成的Vue.js开发 ...

微信小程序开发之WXML模板语法

一、数据处理

1.字符数据的绑定

2.图片数据的动态绑定

3.数据运算

4.总代码与测试截图

二、事件处理

1.概念

2.事件绑定

（1）bindtap

（2）bindinput

3.事件传参

（1）小程序中的事件传参比较特殊，即不能在绑定事件的同时进行参数的传递。

（2）获取参数值

4.数据赋值与同步

（1）数据赋值

（2）文本框和data之间的数据同步

三、条件渲染

（1）根据指定条件来选择性的渲染某个页面

（2）根据指定条件控制多个组件的展示与隐藏

四、列表循环渲染

（1）wx:for循环渲染

（2）wx:key提高循环渲染效率

微信小程序开发之WXML模板语法相关推荐

最新文章

热门文章