小程序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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
js对象的复制继承实例
Jan 10 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
Vue 数据响应式相关总结
Jan 28 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/03 欧美动漫
php session 检测和注销
2009/03/16 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
Node.js实现文件上传
2016/07/05 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
连接Python程序与MySQL的教程
2015/04/29 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
清明节演讲稿
2014/05/27 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
具结保证书
2015/01/17 职场文书
国庆庆典邀请函
2015/02/02 职场文书
市场部岗位职责
2015/02/12 职场文书
预备党员介绍人意见
2015/06/01 职场文书
详解MySQL的半同步
2021/04/22 MySQL