微信小程序 空白页重定向解决办法


Posted in Javascript onJune 27, 2017

微信小程序 空白页重定向解决办法

 在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时;不会经过onLoad过程解析scene参数;

官方中解释:tabbar跳转方式触发的生命周期是 onShow,不经过onLoad,下图:

微信小程序 空白页重定向解决办法

此时,和小伙伴讨论重定向问题时,想到用类似的方法可以做到,就立马实行:

app.json中加pages/index/index(入口文件),pages/home/home(tabbar页面主页),pages/detail/detail(详情页);pages/exclusive/exclusive

在index.js中 onLoad处理:

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  // 入口文件 决定进入哪个页面
  console.log('入口文件,参数scene,值detail%2C1127')
  var scene = options.scene; //扫码进入有此参数
var scene = decodeURIComponent(options.scene);
  if (scene) {
   //'scene=detail%2C1127' 分隔符, 测试时为 , 号;真机时为%2C 原因是url编码,但是使用decodeURI()解析不出来,所以走了兼容
   
   let info_arr = [];
   info_arr = scene.split(',');
   //console.log(info_arr)
   let _type = info_arr[0];
   let id = info_arr[1];
   if (_type == 'detail') {
    wx.redirectTo({ url: `../detail/detail?id=${id}`, })
   } else if (_type == 'exclusive') {
    wx.redirectTo({ url: `../exclusive/exclusive?id=${id}`, })
   }
  }else{
   wx.switchTab({
    url: '../home/home',
   })
  }
 },

此时,完美解决 从 扫码-->home-->detail;再次扫码-->home 不能到-->detail的问题;

此时 扫码-->index(redirectTo)-->detail;再次扫码-->index(redirectTo)-->detail的问题;越过home页面

由于home页面有大量的请求,不适宜用redirectTo;所以此方法算是折中的选择了

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
ionic 自定义弹框效果
Jun 27 #Javascript
js脚本编写简单刷票投票系统
Jun 27 #Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 #Javascript
详解vue.js的事件处理器v-on:click
Jun 27 #Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 #Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 #Javascript
js获取地址栏参数的两种方法
Jun 27 #Javascript
You might like
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python搜索包的路径的实现方法
2019/07/19 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
python lambda的使用详解
2021/02/26 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
python运行脚本文件的三种方法实例
2022/06/25 Python