小程序tab页无法传递参数的方法


Posted in Javascript onAugust 03, 2018

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

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

2.小程序本地存储

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

遇到的问题如下:

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

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

<navigator url="/page/index/index" open-type="switchTab">切换 Tab</navigator>
api:wx.switchTab({}) / wx.reLaunch()

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

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

1.改为通过api跳转,

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 (id != "1") {
   global_data.scenic_link_id = "1"
  };
  this.setData({
   scenic_link_id: id
  }, () => {
   // 网络请求
   this.fetch();
  });

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

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
javascript背投广告代码的完善
Apr 08 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
详解Webpack多环境代码打包的方法
Aug 03 #Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
浅析Vue 和微信小程序的区别、比较
Aug 03 #Javascript
Vue 项目分环境打包的方法示例
Aug 03 #Javascript
如何在vue里添加好看的lottie动画
Aug 02 #Javascript
原生js实现form表单序列化的方法
Aug 02 #Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 #Javascript
You might like
php自动适应范围的分页代码
2008/08/05 PHP
php二分查找二种实现示例
2014/03/12 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
django将数组传递给前台模板的方法
2019/08/06 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
学习Python列表的基础知识汇总
2020/03/10 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
优秀工作者事迹材料
2014/12/26 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
运动会广播稿50字
2015/08/19 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle