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


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 中字符串连接的性能的一些问题
May 07 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 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
php在字符串中查找另一个字符串
2008/11/19 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
js字符串转成JSON
2013/11/07 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python 定时修改数据库的示例代码
2018/04/08 Python
flask框架视图函数用法示例
2018/07/19 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python开发游戏的前期准备
2019/05/05 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Django的models中on_delete参数详解
2019/07/16 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python实现LRU热点缓存及原理
2019/10/29 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
小学运动会入场式解说词
2014/02/18 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js