(四)、小程序-模板与配置
1.WXML模板语法- (数据绑定)
(1).数据绑定的基本原则
- 在data中定义数据。
- 在WXML中使用数据。
(2).在data中定义页面的数据
在页面对应的.js文件中，把数据定义到data对象中即可:
Page({ data:{ // 字符串类型的数据 info: 'init data', //数组类型的数据 msgList:[{msg:'hello'},{msg:'word'}] } })
(3).Mustache语法的格式
把data中的数据绑定到页面进行渲染，使用Mustache语法(双大括号)将变量包起来即可。
<view>{{要绑定的数据名称}}</view>
list.js
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info:'hello world' }, })
list.wxml
<!--pages/list/list.wxml--> <view>{{info}}</view>
(4).Mustache 语法的应用场景
Mustacher 语法的主要应用场景如下:
- 绑定内容: 直接写Mustache语法即可
- 绑定属性: 在小程序中不需要像Vue使用 v- 了。直接写Mustache就行
- 运算(三元运算符、算数运算符)
list.wxml
<!--pages/list/list.wxml--> <view>----------------------绑定内容:--------------------</view> <view>绑定内容: {{info}}</view> <view>----------------------绑定属性:--------------------</view> <image src="{{ImagSrc}}" mode="widthFix"></image> <view>----------------------绑定三元:--------------------</view> <view>{{random>5 ? '结果大于5' : '结果小于5'}}</view> <view>----------------------算法运算:--------------------</view> <view>{{random*100}}</view>
lists.js
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info:'hello world', ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46', random: Math.random()*10 }, })
2.WXML模板语法-(事件绑定)
event:
(1).什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
(2).小程序常用的事件
tap类型: 手指触摸后马上离开，类似于HTML的click事件。 绑定方式:bindtap或bind:tap。input类型: 文本框的输入事件。绑定方式: bininput或bind:inputchange类型: 状态改变时触发。bindchange或bind:change。
当事件回调触发的时候，会收到一个事件对象event，他的详细属性如下表所示。
属性 类型 说明 type String 事件类型 timeStamp Integer 也买你打开到触发事件所经过的毫秒数 target Object 出发时间的组件的一些属性值集合 currentTarget Object 当前组件的一些属性值集合 detail Object 额外的信息 touches Array 触发事件，当前停留在屏幕中的触摸点信息的数组 changedTouches Array 触摸事件，当前变化的触摸点信息的数组。
(2).target和currentTarget的区别
target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。
点击内部的按钮时，点击事件以冒泡的方式向外扩展，也会触发外层的view的tap事件函数，此时对于外层的view来说:
e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件。e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件。
(5).bindtap的语法格式及传参
1. 绑定按钮的事件
在小程序中,不存在HTML中的onclik鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
- 通过bindtap,可以为组件绑定tap触摸事件，语法如下:
- 通过页面的.js文件中对应的事件处理函数，事件形参event(一般简写为e)来接受。
lists.wxml
绑定->bindtap="btnTapHandler" <button type="primary" bindtap="btnTapHandler">按钮</button>
<!--pages/list/list.wxml--> <view> <button type="primary" bindtap="btnTapHandler">按钮</button> </view> <view style="background-color: aquamarine;"> 你好压 </view>
list.wxss
// 定义按钮的事件处理函数 btnTapHandler(){ console.log('s') },
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info:'hello world', ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46', random: Math.random()*10 }, // 定义按钮的事件处理函数 btnTapHandler(){ console.log('s') }, })
2. 在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值。
list.wxml
<!--pages/list/list.wxml--> <button type="primary" bindtap="Count">点我+1</button> <text>{{count}}</text>
list.wxss
Count(){ this.setData({ count:this.data.count+1 }) },
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info:'hello world', ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46', random: Math.random()*10, count:0 }, // 定义自增 Count(){ this.setData({ count:this.data.count+1 }) }, })
3. 事件传参 ⭐
小程序中的事件传参比较特殊，不能再绑定事件的同时为事件处理函数传递参数。因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于调用一个事件名为: xxx 的事件。
微信小程序为组件提供 data-*自定义属性传参，其中*代表的是参数的名字。
在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值。
lists.wxml
info->参数名 2->传给事件的值 data-info="{{2}}"
<!--pages/list/list.wxml--> <!-- "{{2}}"->传递到Js的类型是数字 "2"->传递过去的类型是字符串 --> <button type="primary" bindtap="Count" data-info="{{2}}">点我传参</button> {{count}}
lists.js
Count(e){ // 进行接受且修改的操作 this.setData({ count:this.data.count=e.target.dataset.info })
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { info:'hello world', ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46', random: Math.random()*10, count:0 }, // 定义按钮的事件处理函数 btnTapHandler(e){ console.log(e) }, Count(e){ console.log(e) console.log(this) this.setData({ count:this.data.count=e.target.dataset.info }) }, })
this获取data区域的值
event获取事件传递过来的值
