小程序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 相关文章推荐
jquery 日期分离成年月日的代码
May 14 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
vue实现表格过滤功能
Sep 27 Javascript
js实现简单掷骰子小游戏
Oct 24 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加密解密类代码
2011/11/27 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
个人社会实践自我鉴定
2014/03/24 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
收银员岗位职责
2015/02/03 职场文书
预备党员入党感言
2015/08/01 职场文书
安全生产标语口号
2015/12/26 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Pandas 稀疏数据结构的实现
2021/07/25 Python