小程序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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 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制作静态网站的模板框架
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Python单元测试实例详解
2018/05/25 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python能做什么
2020/06/02 Python
Python 里最强的地图绘制神器
2021/03/01 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
党员创先争优心得体会
2014/09/11 职场文书
埃及王子观后感
2015/06/16 职场文书
开业庆典致辞
2015/08/01 职场文书
代码复现python目标检测yolo3详解预测
2022/05/06 Python