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


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 数值项目的格式化函数代码
May 14 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
jquery仿微信聊天界面
May 06 jQuery
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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
多重?l件?合查?(二)
2006/10/09 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
十个Python程序员易犯的错误
2015/12/15 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python实现交并比IOU教程
2020/04/16 Python
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
研发工程师岗位职责
2014/04/28 职场文书
毕业生求职信
2014/06/10 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS