菜单

Wechat小程序之页面间传值澳门太阳集团

2020年3月30日 - 首页

微信小程序tab页面不能传参解决方案:

澳门太阳集团,微信小程序页面间传值有很多种方法,目前我这个初学者所了解的方法大概有以下四种,第一种就是页面跳转,依靠跳转的url带参传值,第二种就是本地存取,这里有分为同步或者异步,以及移除或清除本地缓存的API接口,还有一种就是将值设置为全局变量,在需要的页面获取,这种的话就不是很建议使用,因为很多需要传递的值是你需要从后台拿数据的。

接下来。我将按照我的理解详细的介绍一下这四种方法。

1.设置全局变量,通过全局变量访问

Wechat小程序之页面间传值澳门太阳集团。首先我们直接采用<navigator></navigator>组件,这个组件的属性可以自己了解一下,open-type为跳转方式,默认为navigator,当然有redirect,switchTab,reLaunch,navigitorBack,exit(退出小程序,target=”miniProgram”时生效),相当于页面导航的那几个API。自己了解一下好的噢!

好滴好滴,我们继续来说页面传值

小程序不支持tab页面传递queryString参数,无论是navigator,还是通过api跳转

在A页面有一个固定的值要传递到B页面,比如说一个固定的值user_id要传递给B
<!--pages/pageA/pageA.wxml--><navigator url="../pageB/pageB?user_id='12345678'" hover->跳转到B页面</navigator>

小程序navigator组件默认不能跳转到tabbar页面

?后面为你要传递的值

这样在B页面js的onload函数里面,使用setData方法可以获取到传递过来的值,并将它赋值给B页面初始数据在B页面的data里面声明一个初始数据

data: { user_id:'' },

然后在onload函数中进行操作,页面加载时获取

onLoad: function  { this.setData({ user_id:options.user_id }) console.log(this.data.user_id) },

这个官方文档写了需要设置open-type为reLaunch或者switchTab,通过api跳转的话同上

这样页面间传一个值得方法就学会了,传多个值得方法同理,只不过需要用&链接起来
切换 Tabapi:wx.switchTab
举一个栗子

A页面

<!--pages/pageA/pageA.wxml--><navigator url="../pageB/pageB?user_id='12345678'" hover->跳转到B页面</navigator>

B页面

data: { user_id:'', user_name:'', user_age:'' },onLoad: function  { this.setData({ user_id:options.user_id, user_name: options.user_name, user_age: options.user_age }) console.log(this.data.user_id) console.log(this.data.user_name) console.log(this.data.user_age) },

在跳转时通过在点击事件中设置本地存储后在另一个页面获取不到的问题

这种有固定值的传值,emmm,我觉得很没有必要,既然都知道值了,直接在B页面的初始数据中使用不就行了,所以上面全都很废,这里我说一下从后台获取参数传递

通过wx.getStorage()获取不到数据,遂改为了wx.getStorageSync()此种方式在开发者工具上可以获取到,但是发现在部分android机型上无法获取,猜测是因为navigator跳转时可能并没有立即存储数据,导致另一边获取不到,于是改成了将数据保存为全局变量,而不是本地存储,然而,此种方法还是有问题,在真机上部分机型会出现”OnWebviewEvent:
goPage, WebViewId xxxxxxxxx not
found”警告,猜测是navigator组件的问题,所以改用了下面这种办法

栗子

在A页面发送wx.request()请求后端数据响应,将响应得到的数据选择需要的参数传递给B页面,例如我们需要传递user_id以及user_name首先,在A页面的声明初始数据

data: { user_id:'', user_name:'' },

在点击跳转的函数下发送wx.request()请求,并获取数据,在请求成功后进行页面跳转并传递参数

 bindTap: function () { var that = this; wx.request({ url: 'test/test',//开发者服务器接口地址 data:{ ........................ },//服务器响应的请求参数 header: { 'content-type': 'application/json' // 默认值,根据服务器给出的请求头进行调整 }, success: function  {//请求成功调用函数 console.log //在这里,可以将请求到的数据赋值给原始数据,我只是举一个栗子,具体如何赋值,跟后台返回参数的形式有关 that.setData({ used_id:res.data.user_id, used_name:res.data.user_name }) //ok,接下来进行页面跳转,要将这些值传递到B页面 wx.navigateTo({ url: '../pageB/pageB?used_id=' + that.data.used_id + '&used_name=' + that.data.used_name, }) } }) },

这里可能有点疑问,就是为什么要用’+’进行拼接,哈哈哈,因为你现在传递的参数只是实际参数的名字,如果你直接和前面传参的方式一样的话,是得不到值的,因为脑子秀逗
吃过亏,所以特此提醒

1.改为通过api跳转,

还有还有,switchTab这种导航方式,不能带参,也就是说不能通过url进行传参,解决方法就是如果要跳转到tab页面,使用reLaunch方法,当然也可以跳过这个,使用其他的传值方法,该用switchTab还是要用的,不将就是一种人生态度,哈哈哈,开玩笑了

第二种页面间传值方法,请见下节,麻烦了。。。

goToMall: function() { /* global_data 为小程序的全局变量, */ global_data.scenic_link_id = this.data.scenic_link_id; wx.switchTab({ url: '/pages/mall/index/index', }); }

2.在接收数据的onShow中接收,如果写在onLoad中,在跳转的时候不应该用wx.switchTab跳转,而应该用wx.reLaunch跳转,因为如果要跳转的页面以前已经被打开了,用switchTab并不会重新渲染页面,只会把页面栈中的这个页面重新显示出来

let id = global_data.scenic_link_id || "1"; // 获取到值后清除,然后重新设置为默认值,这样下次如果是从默认的页面进来的话才会读取默认的数据 if  { global_data.scenic_link_id = "1" }; this.setData({ scenic_link_id: id }, () => { // 网络请求 this.fetch;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图