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


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 相关文章推荐
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
Python求导数的方法
2015/05/09 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python多线程并发及测试框架案例
2019/10/15 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
中学生校园广播稿
2014/01/16 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
Python初学者必备的文件读写指南
2021/06/23 Python