小程序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+xml生成级联下拉框代码
Jul 24 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
prettier自动格式化去换行的实现代码
Aug 25 Javascript
原生JavaScript实现轮播图
Jan 10 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数组无限分级数据的层级化处理代码
2012/12/29 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
vue实现购物车小案例
2019/09/27 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
Python解析树及树的遍历
2016/02/03 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
文化建设工作方案
2014/05/12 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang