小程序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小测验(代码集合)
Jul 27 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
详解vue-cli3使用
Aug 14 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php xml实例 留言本
2009/03/20 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python 查看文件的编码格式方法
2017/12/21 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python如何实现异步调用函数执行
2019/07/08 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
C#笔试题和英文面试题
2013/02/07 面试题
销售高级职员求职信
2013/10/29 职场文书
教师评语大全
2014/04/28 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB