小程序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 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
vue完美实现el-table列宽自适应
May 08 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
PHP扩展CURL的用法详解
2014/06/20 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
webpack4简单入门实例
2018/09/06 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
js实现微信聊天界面
2020/08/09 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python 性能提升的几种方法
2016/07/15 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python中类的属性和方法介绍
2018/11/27 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
财务经理的岗位职责
2013/12/17 职场文书
党员大会主持词
2014/04/02 职场文书
酒店开业策划方案
2014/06/02 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
北京导游词
2015/02/12 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
标准发言稿结尾
2019/07/18 职场文书