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


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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
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面试题附答案
2009/01/07 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP 断点续传实例详解
2017/11/11 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
js回调函数仿360开机
2019/12/26 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
用python写测试数据文件过程解析
2019/09/25 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python如何编写win程序
2020/06/08 Python
python 调整图片亮度的示例
2020/12/03 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
运动会演讲稿300字
2014/08/25 职场文书
男方婚前保证书
2015/02/28 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python