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


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 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
JavaScript函数柯里化
Nov 07 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利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
cookie的secure属性详解
2015/04/08 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
2017/09/28 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
js实现图片实时时钟
2020/01/15 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
深入解析Python中的线程同步方法
2016/06/14 Python
python GUI实例学习
2017/11/21 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
入党思想汇报
2014/01/05 职场文书
文案策划求职信
2014/04/14 职场文书
圣诞晚会主持词
2015/07/01 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
初中美术教学反思
2016/02/17 职场文书
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server