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


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 程序编码规范
Nov 23 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php验证码生成代码
2015/11/11 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
Python中random模块生成随机数详解
2016/03/10 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python使用贪婪算法解决问题
2019/10/22 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
什么是岗位职责
2013/11/12 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
新手入门Mysql--sql执行过程
2021/06/20 MySQL
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
Python+DeOldify实现老照片上色功能
2022/06/21 Python