小程序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 相关文章推荐
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
7个jQuery最佳实践
Jan 12 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
详解javascript replace高级用法
Feb 17 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
在vue中使用jsx语法的使用方法
Sep 30 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/06/08 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
解析php5配置使用pdo
2013/07/03 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
python_mask_array的用法
2020/02/18 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
精选干货:Java精选笔试题附答案
2014/01/18 面试题
应届生财务管理求职信
2013/11/06 职场文书
小区门卫工作职责
2013/12/14 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
三方合作意向书范本
2015/05/09 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Redis基本数据类型Set常用操作命令
2022/06/01 Redis