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


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系列(15) 函数(Functions)
Apr 12 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
JQuery教学之性能优化
May 14 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
详解VUE中的插值( Interpolation)语法
Oct 18 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
详解Python中的文件操作
2016/08/28 Python
python 网络编程常用代码段
2016/08/28 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
自我评价范文
2013/12/22 职场文书
安全生产月活动总结
2014/05/04 职场文书
超市商业计划书
2014/05/04 职场文书
美术教师个人总结
2015/02/06 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Java使用HttpClient实现文件下载
2022/08/14 Java/Android