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


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 相关文章推荐
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
jQuery实现计算器功能
Oct 19 jQuery
nuxt 每个页面head标签内容设置方式
Nov 05 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
图像替换新技术 状态域方法
2010/01/28 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
python监控文件或目录变化
2016/06/07 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
一套SQL笔试题
2016/08/14 面试题
一些Solaris面试题
2015/12/22 面试题
护士实习自我鉴定
2013/10/22 职场文书
教师找工作推荐信
2013/11/23 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
半年思想汇报
2013/12/30 职场文书
高校十八大报告感想
2014/01/27 职场文书
离婚案件上诉状
2015/05/23 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
mysql数据库隔离级别详解
2022/06/16 MySQL