小程序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实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
详解JavaScript对象类型
Jun 16 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 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
ASP知识讲座四
2006/10/09 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php中动态调用函数的方法
2015/03/16 PHP
帝国cms常用标签汇总
2015/07/06 PHP
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Python转码问题的解决方法
2008/10/07 Python
Python字符串处理实例详解
2017/05/18 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Python流程控制 if else实现解析
2019/09/02 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python while true实现爬虫定时任务
2020/06/08 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android