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


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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
Laravel find in set排序实例
2019/10/09 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python程序中设置HTTP代理
2016/11/06 Python
python实现textrank关键词提取
2018/06/22 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
详解如何减少python内存的消耗
2019/08/09 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
快餐公司创业计划书
2014/04/29 职场文书
中层干部培训方案
2014/06/16 职场文书
网吧消防安全责任书
2014/07/29 职场文书
学习党代会心得体会
2014/09/05 职场文书
教师节慰问信
2015/02/15 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL