小程序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 兼容firefox的一些问题
May 21 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
JS中的BOM应用
Feb 02 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 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简单浏览目录内容的实现代码
2013/06/07 PHP
PHP生成条形图的方法
2014/12/10 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
vue实现记事本功能
2019/06/26 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Python第三方库的安装方法总结
2016/06/06 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Django框架验证码用法实例分析
2019/05/10 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
年级组长自我鉴定
2014/02/22 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
老公给老婆的保证书
2014/04/28 职场文书
2014年科室工作总结
2014/11/20 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
python解析照片拍摄时间进行图片整理
2022/07/23 Python