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


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 相关文章推荐
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python绘制彩虹图
2019/12/16 Python
python解析多层json操作示例
2019/12/30 Python
Python jieba库分词模式实例用法
2021/01/13 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
前台接待员岗位职责
2014/01/02 职场文书
报关专员求职信范文
2014/02/22 职场文书
业务员辞职信范文
2015/03/02 职场文书
个人简历求职信范文
2015/03/20 职场文书
求职自我评价参考范文
2019/05/16 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫