【事件绑定】
基本使用
新建项目，使用模板可以选择：JS基础版本
# 1 方式一
<view bind:tab="js中写方法"></view>
# 2 方式二
<view bindtab="js中写方法"></view>
# 3 js中写方法
showLog(){
console.log("我被点了")
}
1 vxml
2
3
4 <!--index.wxml-->
5 <view>-------事件基本使用---------</view>
6
7 <button size="mini" type="warn" loading bind:tap="handleShow">点击看控制台</button>
8
9 <button size="mini" type="primary" bindtap="handleShow2">看控制台</button>
10
11
12 *****************************
13 index.js
14
15 Page({
16 handleShow(){
17 console.log('已经点了')
18 },
19 handleShow2(){
20 console.log('我也能点')
21 },
22 })
阻止事件冒泡
1 <!--index.wxml-->
2
3 <view>-------事件冒泡---------</view>
4 <view class="view1" bind:tap="handleView1"></view>
5 <button type="warn" plain bind:tap="handleButton1">冒泡案例</button>
6 <view>上述案例是点击子事件，然后也会冒泡到父事件上</view>
7 <view class="view1" bind:tap="handleView2"></view>
8 <button type="primary" plain catch:tap="handleButton2">阻止冒泡案例</button>
9
10
11
12 <view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: pink;" bind:tap="handleView1">
13 <button type="warn" plain bind:tap="handleButton1">冒泡案例</button>
14
15 </view>
16 //catch
17 <view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: orange;" bind:tap="handleView2">
18 <button type="primary" plain catch:tap="handleButton2">阻止事件冒泡</button>
19 </view>
20
21 ********************************
22 样式
23
24 .view1{
25 height: 300rpx;
26 display: flex;
27 justify-content: center;
28 align-items: center;
29 background-color: pink;
30 }
31
32
33 ******************
34 js
35
36 Page({
37
38 handleView1() {
39 console.log("view1被点了")
40
41 },
42 handleButton1() {
43 console.log("button1被点了")
44 },
45 handleView2() {
46 console.log("view2被点了")
47 },
48 handleButton2() {
49 console.log("button2被点了")
50 },
51 })
事件对象和传参
data-*方案
mark:自定义属性
target :事件触发者 :dataset data定义的属性
currentTarget:事件绑定者 :dataset data定义的属性
1 <view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: orange;" bind:tap="handleView3">
2 <view>handleView3事件冒泡上来的取不到被点击的组件的参数的</view>
3 <button type="primary" plain bind:tap="handleButton" data-name="justin" data-xx="xx" mark:name="lqz">事件传参</button>
4 </view>
5
6
7 ***************************************
8 js
9
10 handleButton(event){
11 console.log(event)
12 console.log('mark传入的参数：',event.mark.name)
13 console.log('data-字段名传入的参数：',event.currentTarget.dataset.xx)
14 console.log('data-字段名传入的参数：',event.currentTarget.dataset.name)
15
16 console.log('data-字段名传入的参数：',event.target.dataset.xx)
17 console.log('data-字段名传入的参数：',event.target.dataset.name)
18 // mark
19 // target:dataset
20 // currentTarget:dataset
21 },
22 handleView3(event){
23 console.log(event)
24 }
页面跳转
wxml-组件跳转--声明式导航
# 1 使用 navigator 组件实现跳转
-url ：当前小程序内的跳转链接
-open-type ：跳转方式
navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch：关闭所有页面，打开到应用内的某个页面
navigateBack：关闭当前页面，返回上一页面或多级页面
# 2 普通跳转 --注意带 /
<view><navigator url="/pages/log/log"><button type="primary">登录</button></navigator></view>
# 3 open-type 属性
## 3.1 navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
<view>
<navigator url="/pages/my/my" open-type="navigate"> <button type="primary">不能跳转到我的</button></navigator>
</view>
<navigator url="/pages/log/log" open-type="navigate">跳转到登录</navigator>
</view>
## 3.2 redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
<view>
<navigator url="/pages/log/log" open-type="redirect">跳转到登录关闭上一个页面</navigator>
</view>
## 3.3 switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
<view>
<navigator url="/pages/my/my" open-type="switchTab">跳转到my-tab页</navigator>
</view>
## 3.4 reLaunch：关闭所有页面，打开到应用内的某个页面
<view>
<navigator url="/pages/my/my" open-type="reLaunch">跳转到my-tab页</navigator>
<navigator url="/pages/log/log" open-type="reLaunch">跳转到login页</navigator>
</view>
## 3.5 navigateBack：关闭当前页面，返回上一页面或多级页面
<view>
<navigator url="/pages/log/log" open-type="navigate">跳转到login页</navigator>
</view>
# 默认只能返回一页，通过delta 控制返回层级 delta="2"
<navigator open-type="navigateBack">跳转到login页</navigator>
# 4 携带参数
## 4.1 跳转
<view>
<navigator url="/pages/login/log?name=justin&age=19" open-type="navigate">跳转到login页</navigator>
</view>
## 4.2 在 onl oad的options中获取参数
onl oad(options) {
console.log(options)
},
## 4.3 注意跳转tabbar不能携带参数
js-跳转--编程式导航
# 1 5 个方法
wx.navigateTo({
url: 'url',
})
wx.redirectTo({
url: 'url',
})
wx.switchTab({
url: 'url',
})
wx.reLaunch({
url: 'url',
})
wx.navigateBack()
# 2 页面
<button type="default" bind:tap="handlenavigateTo">navigateTo</button>
<button type="warn" bind:tap="handleredirectTo">redirectTo</button>
<button type="primary" bind:tap="handleswitchTab">switchTab</button>
<button type="default" bind:tap="handlereLaunch">reLaunch</button>
<button type="warn" bind:tap="handlenavigateBack">navigateBack</button>
# 3 js
handlenavigateTo(){
wx.navigateTo({
url: '/pages/log/log',
})
},
handleredirectTo(){
wx.redirectTo({
url: '/pages/log/log',
})
},
handleswitchTab(){
wx.switchTab({
url: '/pages/my/my',
})
},
handlereLaunch(){
wx.reLaunch({
url: '/pages/log/log',
})
},
handlenavigateBack(){
// 关闭当前页面，返回上一页或上某一页，传入数字
wx.navigateBack()
wx.navigateBack({
delta:1
})
},
wxml语法
模版语法
# 1 在页面 xx.js 的 Page() 方法的 data 对象中进行声明定义
# 2 在xx.wxml 中使用 {{}} 包裹，显示数据
# 3 可以显示如下，不能编写js语句或js方法
-变量
-算数运算
-三元运算
-逻辑判断
# 4 只是单纯通过赋值，js中变量会变化，但是wxml中的页面不会变化，没有联动效果，需要使用setData()方法修改
- 更新数据
- 页面更新
# 5 setData案例 修改数字
## 5.1 wxml
<view>
<view>姓名是：{{name}}</view>
<view>年龄是：{{age}}</view>
<button bind:tap="handleAddAge" plain="true" type="primary" size="mini">点击增加年龄</button>
</view>
##5.2 js
handleAddAge(){
//this.data.age++
console.log(this.data.age)
this.setData({
age:this.data.age+1
})
},
# 6 setData案例 修改对象
## 6.1 wxml<view>
<view>姓名是：{{userinfo.name}}</view>
<view>年龄是：{{userinfo.age}}</view>
<view>爱好是：{{userinfo.hobby}}</view>
<button bind:tap="handleChangeName" plain="true" type="primary" size="mini">点击修改对象-姓名</button>
</view>
## 6.2 js
data: {
name: 'justin',
age: 19,
userinfo: {
name: 'lqz',
age: 99
}
},
handleChangeName() {
// 增加数据
this.setData({
'userinfo.hobby': '篮球'
})
// 修改数据
this.setData({
'userinfo.name': '彭于晏'
})
// 修改多个数据--》简便方案--》展开运算符
// const userinfo = {
// ...this.data.userinfo,
// name: '新名字',
// hobby: '乒乓球'
// }
// this.setData({
// // userinfo:userinfo
// userinfo //简写形式
// })
// 修改多个数据--》简便方案-->assign
const userinfo = Object.assign(this.data.userinfo, {
name: 'xxzz',
hobby: '烫头'
})
this.setData({
// userinfo:userinfo
userinfo //简写形式
})
//删除数据-->单个
delete this.data.userinfo.name // 页面删除不了，需要用setData更新
this.setData({
userinfo:this.data.userinfo
})
//删除数据-->多个--解构赋值
const {name,age,...res}=this.data.userinfo
this.setData({
userinfo:res
})
},
# 7 setData 修改数组
## 7.1 js
data: {
names:['刘亦菲','迪丽热巴','古力娜扎','马尔扎哈']
},
handleChangeList(){
//1 增加数组
// 1.1 增加再设置值
this.data.names.push('亚瑟王')
this.setData({
names:this.data.names
})
// 1.2 通过数组拼接
// const newList=this.data.names.concat("甄姬")
// this.setData({
// names:newList
// })
// 1.3 通过解构赋值
const newList=[...this.data.names,"李白"]
this.setData({
names:newList
})
// 2 修改数组
this.setData({
'names[1]':'justin'
})
// 3 删除数组
this.data.names.slice(1)
this.setData({
names:this.data.names.slice(1)
})
},
## 7.2 wxml
<view wx:for="{{names}}" wx:key="index">
{{item}}
</view>
<button bind:tap="handleChangeList" plain="true" type="primary" size="mini">修改数组</button>
# 8 双向数据绑定：input checkbox
<view>
<!-- 不支持数组和对象 -->
<input type="text" model:value='{{name}}' style="border:orange solid 1rpx"/>
<checkbox model:checked="{{isCheck}}"/>
<text>{{isCheck}}</text>
</view>
标签：log,微信,程序,语法,userinfo,跳转,setData,data,页面 From： https://www.cnblogs.com/liuliu1/p/18211805