小程序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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
javascript动画效果类封装代码
Aug 28 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JavaScript常见JSON操作实例分析
Aug 08 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
详解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
日本十大惊悚动漫
2020/03/04 日漫
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python 多进程原理及实现
2020/12/21 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
审核会计岗位职责
2013/11/08 职场文书
前处理组长岗位职责
2014/03/01 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
2014年城管工作总结
2014/11/20 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技