小程序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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
javascript编程起步(第一课)
Jan 10 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
js+css实现select的美化效果
Mar 24 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
AngularJS实现多级下拉框
Mar 25 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获取网络文件的实现代码
2010/01/01 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python能做什么 python的含义
2019/10/12 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
Python实现直播推流效果
2019/11/26 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
《月光启蒙》教学反思
2014/03/01 职场文书
公司年会策划方案
2014/05/17 职场文书
个人先进事迹总结
2015/02/26 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
通讯稿范文
2015/07/22 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
python实现剪贴板的操作
2021/07/01 Python