事件、页面跳转、wxml语法——微信小程序学习笔记
1. 事件
1.1 事件绑定
<!--pages/infoPage/infoPage.wxml-->
<button type="primary" bind:tap="childrenClicked">子按钮</button>// pages/infoPage/infoPage.js
Page({
childrenClicked(){
console.log("childrenClicked")
}
})1.2 事件冒泡
<!--pages/infoPage/infoPage.wxml-->
<view class="parentContainer" style="background-color: burlywood;" bind:tap="parentClicked">
<button type="primary" bind:tap="childrenClicked">子按钮</button>
</view>// pages/infoPage/infoPage.js
Page({
parentClicked(){
console.log("parentClicked")
},
childrenClicked(){
console.log("childrenClicked")
}
})点击子按钮，会先执行子按钮“bind:tap”绑定的函数，再执行父控件“bind:tap”绑定的函数，如下图，
也就是此事件传递了下去，称为“事件冒泡”，如果不想传递给父控件，即阻止事件冒泡，使用“catch:tap”进行绑定，即
<!--pages/infoPage/infoPage.wxml-->
<view class="parentContainer" style="background-color: burlywood;" bind:tap="parentClicked">
<button type="primary" catch:tap="childrenClicked">子按钮</button>
</view>1.3 事件对象-传参
当绑定了事件后 --》函数都可以接收一个参数 事件对象（event）
childrenClicked(event) {
console.log("childrenClicked")
// 通过打印查看event结构
console.log(event);
//获取数据
var dataset = event.target.dataset;
console.log("name:" + dataset.name);
console.log("customName:" + event.mark.customName);
}其中，targert 为事件触发者，currentTarget:事件绑定者，当有事件冒泡时，两个值可能不一样。
传参方式
- data-*
- mark:自定义属性
2. 页面跳转
2.1 navigator组件跳转（声明式导航）
导航 / navigator
- 最基本的跳转
<navigator url="/pages/loginPage/loginPage"> <button type="primary">登录</button> </navigator> - 更多跳转方式--》open-type属性跳转方式：
navigate：保存当前页面，跳转到应用内的某个页面，但不能跳到 tabbar 页面；
redirect：关闭当前页面，跳转到应用内的某个页面，但不能跳到t abbar 页面；
switchTab：跳转到 tabbar 页面，并关闭其他所有非 tabbar页面；
reLaunch：关闭所有页面，打开到应用内的某个页面；
navigateBack：关闭当前页面，返回上一页面或多级页面。(感觉像导航的返回按钮的功能)，如果退回两级页面，delta代码退回的层数，代码这样写
<navigator open-type="navigateBack" delta="2">返回两级</navigator> - 跳转携带数据
携带数据的格式是单参数：[url]?[key1]=[val1] 或多参数[url]?[key1]=[val1]&[key2]=[key2]...
携带参数：
<!--pages/infoPage/infoPage.wxml-->
<navigator url="/pages/loginPage/loginPage?name=小米&age=12">点击跳转到新页面
</navigator>获取参数：
// pages/loginPage/loginPage.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options);
}
})
2.2 js跳转（编程式导航）
比如：
<!--pages/infoPage/infoPage.wxml-->
<button type="primary" bind:tap="switchLoginPage">跳转到登录页</button>// pages/infoPage/infoPage.js
Page({
switchLoginPage(){
wx.navigateTo({
url: '/pages/loginPage/loginPage',
})
}
})3. wxml 语法
3.1 模版语法
- 页面的js中定义一些变量
- 在wxml中使用 {{}} 包裹，显示数据
- 可以显示变量、算数运算、三元运算和逻辑判断，不能编写js语句或js方法
<!--pages/loginPage/loginPage.wxml--> <view>-------wxml语法------</view> <view>- 字符串</view> <view>姓名：{{name}}</view> <view>年龄：{{age}}</view> <view>籍贯：{{postion}}</view> <view>----------------------</view> <view>- 对象</view> <view>名称：{{userInfo.name}}</view> <view>宽：{{userInfo.width}}</view> <view>高：{{userInfo.height}}</view> <view>颜色：{{userInfo.color}}</view> <view>----------------------</view> <view>- 数组</view> <view>狗：{{animalsArr[0]}}</view> <view>猫：{{animalsArr[1]}}</view> <view>猴：{{animalsArr[2]}}</view> <view>----------------------</view> <view>算数运算：10+20={{10+20}}</view> <view>三元运算：num>11 {{num>11?'真':'假'}}</view> <view>逻辑判断：num>11 {{num>11}}</view> // pages/loginPage/loginPage.js Page({ /** * 页面的初始数据 * wxml 中使用的变量，必须放在data中 */ data: { name:"王小明", age:14, postion:"河北", userInfo:{ width:100, height:200 }, animalsArr:["dog","cat","monkey"], num:10 } }) - 如果在js中改变了变量值，想与页面中的一起变化，使用this.setData({key:val})
//改变数据 onChangeNumVal(){ this.setData({ age:this.data.age+1 }) }, //改变对象 onChangeObjectName(){ //修改对象值 // this.setData({ // 'userInfo.name':"矩形" // }); //增加对象参数值和修改 //解压赋值 // const info = {...this.data.userInfo,color:"red",name:"矩形"}; // this.setData({ // userInfo:info // }); //简写 const userInfo = {...this.data.userInfo,color:"red",name:"矩形"}; this.setData({ userInfo }); }, //数组 //增加 onAddOfArr(){ // //方法一 // this.data.animalsArr.push("cow"); // this.setData({ // animalsArr:this.data.animalsArr // }) // //方法二 // const animalsArr = this.data.animalsArr.concat("sheep"); // this.setData({ // animalsArr // }) //方法三 const animalsArr = [...this.data.animalsArr,'rabbit']; this.setData({ animalsArr }) }, //删除 onDelOfArr(){ this.data.animalsArr.pop(); this.setData({ animalsArr:this.data.animalsArr }) }, //修改 onModifyOfArr(){ this.data.animalsArr[0]="puppy"; this.setData({ // animalsArr:this.data.animalsArr 'animalsArr[0]':"puppy" }) },
3.2 列表渲染
列表渲染 | 微信开放文档
在组件上使用
wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为
index，数组当前项的变量名默认为item
## js
goodsList:[{id:'1001',name:'牙膏',price:10},{id:'1002',name:'香皂',price:5},{id:'1003',name:'牛奶',price:50},{id:'1004',name:'八宝粥',price:60}]
## wxml
<view>-----------列表渲染-----------</view>
<view wx:for="{{goodsList}}" wx:key="index">
<text>{{item.id}}--{{item.name}}--{{item.price}}</text>
</view>
<view>-----------列表渲染-block-----------</view>
<view wx:for="{{goodsList}}" wx:key="index">
<block>{{item.id}}--{{item.name}}--{{item.price}}</block>
</view>3.3 条件渲染
3.3.1 wx:if wx:elif wx:else 的简单用法
## js
score:60,
## wxml
<view>
<input type="text" model:value='{{score}}' style="border: 1px solid #555555;" />
<text wx:if="{{score>=90&& score<=100}}">优秀</text>
<text wx:elif="{{score>=80&& score<90}}">良好</text>
<text wx:elif="{{score>=60&& score<80}}">及格</text>
<text wx:else>不及格</text>
</view>3.3.2 wx:if 与 hidden 的区别
- wx:if 删除元素
- hidden 不删除元素（隐藏元素）
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
<view>
<!-- <image src="/img/head.jpg" mode="aspectFit" style="width: 100rpx; height: 100rpx;" hidden="{{isShowImage}}"/> -->
<image src="/img/head.jpg" mode="aspectFit" style="width: 100rpx; height: 100rpx;" wx:if="{{isShowImage}}"/>
<button type="primary" size="mini" bind:tap="onChangeImgVisible">是否显示图片</button>
</view>