微信小程序页面常见的传参方式

微信小程序页面常见的传参方式

今天一个朋友去面试,问到了小程序传参的问题,看似很简单的问题而且还天天写,但是就是记不住问到说不出来。

1
2
3
4
5
6
7
8
9
10
HHX:
兄弟再不
小程序传值传参,面试时候怎么回答
还有几种跳转方式
我都不知道咋好
还有组件之间的传值
还有什么全局传值
卧槽,都蒙蔽了,问的我
每次都忘了传参,还有跳转方式的区别
还有就是有跳转,什么关闭当前页面

一、页面间参数传递

常见功能比如:列表页点击跳转到具体的详情页面

1.通过页面url拼接传递

小程序中我们通过 wx.navigateTo()方法或 组件进行页面跳转,再跳转前可以将需要传递的参数拼接到url后面。

传递参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 方法一:wx.navigateTo() 方法

<view>
<text bindtap='goDetail' data-id="1">元素1</text>
</view>

Page({
goDetail() {
var curId = e.currentTarget.dataset.id;

wx.navigateTo({
url: '/pages/detail/detail?id='+curId
});
},
})


// 方法二:<navigator> 组件方法
<navigator url="/pages/detail/detail?id=1">
<view>
<text>元素1</text>
</view>
</navigator>

接收参数:

1
2
3
4
5
6
7
8
Page({
onLoad (query) {
// 这里的 query 将是 url 中,问号(?) 后面的键值对组成的一个对象
this.setData({
curId: query.id
});
}
});
2.通过全局变量getApp()传递

小程序可以通过 getApp() 这个全局函数获取到当前小程序的实例;
在开发之前,我们可以将全局的数据放到根目录下的 app.js 文件,然后在其他页面可以通过 getApp() 来获取这些数据。

我们一般把传递数据多,可能要跳转好几个页面的数据放在全局变量中传递。

传递参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<view>
<text bindtap='goDetail' data-id="1">元素1</text>
</view>

const app = getApp();
Page({
goDetail() {
var curId = e.currentTarget.dataset.id;
app.detail = {
id: curId
};

wx.navigateTo({
url: '/pages/detail/detail'
});
},
})

接收参数:

1
2
3
4
5
6
7
8
const app = getApp();
Page({
onLoad () {
this.setData({
curId: app.detail.id
});
}
});
3.将数据放入本地缓存中

缓存的数据,我们可以在任何页面随意调用,有点类似全局变量,只要设置了一次之后,在其他页面都可以随意调用;

我们一般只把一些长期不会改变的数据放在本地缓存中。

传递参数:

1
2
3
4
5
6
7
8
9
10
Page({
onLoad () {
wx.setStorage({
key: "authData",
data: {
appId: 'xxxxx'
}
})
}
})

接收参数:

1
2
3
4
5
6
7
8
9
10
Page({
onLoad () {
wx.getStorage({
key: 'authData',
success: function (res) {
console.log(res.data)
}
})
}
});

二、事件函数参数传递

在小程序中触发事件调用函数时,不能像 js 那样使用圆括号 () 来传递参数,这个时候可以使用 dataset 属性把需要传递的参数放到组件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// index.wxml
<view>
<text bindtap='changeName' data-name="管理员">{{name}}</text>
</view>

// index.js
Page({
data: {
name: ''
},
changeName (e) {
this.setData({
name: e.currentTarget.dataset.name
})
}
});

三、组件传参

实际开发中需要可能很复杂,比如封装组件、模板,对于组件的传参方式很复杂具体可参考官方文档。微信官方文档

最后我还是得哔哔一句,像小程序、vue等都是基于MVVM思想,这不同于传统的html、js方式一定要改变思想、思维方式,遇到复杂的需求才能选择适合的解决方案。

-------------已经触及底线 感谢您的阅读-------------

本文标题:微信小程序页面常见的传参方式

文章作者:趙小傑~~

发布时间:2019年10月30日 - 14:33:54

最后更新:2019年11月01日 - 22:53:01

原始链接:https://cnsyear.com/posts/fd62d149.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%