小程序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 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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
介绍几个array库的新函数 php
2006/12/29 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
python 远程统计文件代码分享
2015/05/14 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
后勤人员岗位职责
2013/12/17 职场文书
大学军训感言
2014/01/10 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
小学生校园广播稿
2014/09/28 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
六一活动主持词
2015/06/30 职场文书
三八妇女节主持词
2015/07/04 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
mysql 获取时间方式
2022/03/20 MySQL