IT评测·应用市场-qidao123.com

标题: 变乱、页面跳转、wxml语法——微信小程序学习笔记 [打印本页]

作者: 商道如狼道 时间: 2025-3-20 10:47
标题: 变乱、页面跳转、wxml语法——微信小程序学习笔记
1. 变乱

1.1 变乱绑定

<button type="primary" bind:tap="childrenClicked">子按钮</button>

复制代码

// pages/infoPage/infoPage.js
Page({
childrenClicked(){
console.log("childrenClicked")
}
})

复制代码

1.2 变乱冒泡

<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”举行绑定，即

<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

最基本的跳转
1. <navigator url="/pages/loginPage/loginPage">
2. <button type="primary">登录</button>
3. </navigator>
复制代码
更多跳转方式--》open-type属性跳转方式： navigate：生存当前页面，跳转到应用内的某个页面，但不能跳到 tabbar 页面；
redirect：关闭当前页面，跳转到应用内的某个页面，但不能跳到t abbar 页面；
switchTab：跳转到 tabbar 页面，并关闭其他所有非 tabbar页面；
reLaunch：关闭所有页面，打开到应用内的某个页面；
navigateBack：关闭当前页面，返回上一页面或多级页面。(感觉像导航的返回按钮的功能)，如果退回两级页面，delta代码退回的层数，代码这样写
1. <navigator open-type="navigateBack" delta="2">返回两级</navigator>
复制代码
跳转携带数据

携带数据的格式是单参数：[url]?[key1]=[val1] 或多参数[url]?[key1]=[val1]&[key2]=[key2]...
携带参数：

<navigator url="/pages/loginPage/loginPage?name=小米&age=12">点击跳转到新页面
</navigator>

复制代码

获取参数：

// pages/loginPage/loginPage.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options);
}
})

复制代码

2.2 js跳转（编程式导航）

比如：

<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方法
1. 
2. <view>-------wxml语法------</view>
3. <view>- 字符串</view>
4. <view>姓名：{{name}}</view>
5. <view>年龄：{{age}}</view>
6. <view>籍贯：{{postion}}</view>
7. <view>----------------------</view>
8. <view>- 对象</view>
9. <view>名称：{{userInfo.name}}</view>
10. <view>宽：{{userInfo.width}}</view>
11. <view>高：{{userInfo.height}}</view>
12. <view>颜色：{{userInfo.color}}</view>
13. <view>----------------------</view>
14. <view>- 数组</view>
15. <view>狗：{{animalsArr[0]}}</view>
16. <view>猫：{{animalsArr[1]}}</view>
17. <view>猴：{{animalsArr[2]}}</view>
18. <view>----------------------</view>
19. <view>算数运算：10+20={{10+20}}</view>
20. <view>三元运算：num>11 {{num>11?'真':'假'}}</view>
21. <view>逻辑判断：num>11 {{num>11}}</view>
24. // pages/loginPage/loginPage.js
25. Page({
27. /**
28. * 页面的初始数据
29. * wxml 中使用的变量，必须放在data中
30. */
31. data: {
32. name:"王小明",
33. age:14,
34. postion:"河北",
35. userInfo:{
36. width:100,
37. height:200
38. },
39. animalsArr:["dog","cat","monkey"],
40. num:10
42. }
43. })
复制代码
如果在js中改变了变量值，想与页面中的一起变化，使用this.setData({key:val})
1. //改变数据
2. onChangeNumVal(){
3. this.setData({
4. age:this.data.age+1
5. })
6. },
7. //改变对象
8. onChangeObjectName(){
9. //修改对象值
10. // this.setData({
11. // 'userInfo.name':"矩形"
12. // });
13. //增加对象参数值和修改
14. //解压赋值
15. // const info = {...this.data.userInfo,color:"red",name:"矩形"};
16. // this.setData({
17. // userInfo:info
18. // });
19. //简写
20. const userInfo = {...this.data.userInfo,color:"red",name:"矩形"};
21. this.setData({
22. userInfo
23. });
24. },
26. //数组
27. //增加
28. onAddOfArr(){
29. // //方法一
30. // this.data.animalsArr.push("cow");
31. // this.setData({
32. // animalsArr:this.data.animalsArr
33. // })
34. // //方法二
35. // const animalsArr = this.data.animalsArr.concat("sheep");
36. // this.setData({
37. // animalsArr
38. // })
39. //方法三
40. const animalsArr = [...this.data.animalsArr,'rabbit'];
41. this.setData({
42. animalsArr
43. })
44. },
45. //删除
46. onDelOfArr(){
47. this.data.animalsArr.pop();
48. this.setData({
49. animalsArr:this.data.animalsArr
50. })
51. },
52. //修改
53. onModifyOfArr(){
54. this.data.animalsArr[0]="puppy";
55. this.setData({
56. // animalsArr:this.data.animalsArr
57. 'animalsArr[0]':"puppy"
58. })
59. },
复制代码

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 不删除元素（隐藏元素）

<view>
<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>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)