【原创】Ionic单页应用跳转外链,构造路由返回的解决办法及代码

在开发客户微信企业号的填单审批webApp的时候出现了一个问题:

单据是带有附件的,而且存在各种不同的格式,需要后台处理后给前台链接地址,点击预览,微信浏览器的特性就是只能存在一个浏览器窗口,

这导致了如果我们的webApp应用跳转到外链(比如百度,不在应用的路由中)之后,在点击微信浏览器的返回后,因为没有路由,导致的无法返回之前的路径。

解决思路:

 1.在跳转外链之前,先将之前的state历史保存到localStorage   ==》

  

1 var storage = window. localStorage;
2
3 var historyData = $ionicHistory.viewHistory();
4
5 //将historyData从object转成JSON  
6 storage.setItem("historyData",Json.stringify(historyData)); 

  

 2.从外链返回后 进入控制器,通过$ionicHistory.backView()判断是否是从外链返回的,如果是,获取本地historyData,构造历史路由  

  

 1 if(!$ionicHistory.backView()){
 2
 3     var ViewArr = {};
 4   //将本地的historyData从json转成object 
 5     var hisData = JSON.parse( window.localStorage.getItem(‘historyData‘));
 6   //因为他的每个路由对象全是view类型,利用框架的createView构造history中的
 7   //所有的view,看清history对象的结构,不然很容易出错 。
 8    
 9   //在构造history中的views对象时,同时构造currentView,backView,forwardView
10    for(var item in hisData.views){
11         ViewArr[item] = $ionicHistory.createView(hisData.views[item]);
12      //构造currentView并赋值
13         if(hisData.currentView && hisData.currentView.viewId == ViewArr[item].viewId){
14             $ionicHistory.viewHistory().currentView = ViewArr[item];
15         }
16      //构造backView并赋值
17         if(hisData.backView && hisData.backView.viewId == ViewArr[item].viewId){
18             $ionicHistory.viewHistory().backView = ViewArr[item];
19         }
20      //构造forwardView并赋值
21         if(hisData.forwardView && hisData.forwardView.viewId == ViewArr[item].viewId){
22             $ionicHistory.viewHistory().forwardView = ViewArr[item];
23         }
24     }
25   //构造history的histories对象
26     var ionicHis = {};
27     ionicHis[‘root‘] = {};
28     ionicHis[‘root‘][‘cursor‘] = hisData.histories.root.cursor;
29     ionicHis[‘root‘][‘historyId‘] = hisData.histories.root.historyId;
30     ionicHis[‘root‘][‘parentHistoryId‘] = hisData.histories.root.parentHistoryId;
31     ionicHis[‘root‘][‘stack‘] = [];
32     if(hisData.histories.root && hisData.histories.root.stack && hisData.histories.root.stack.length){
33         for(var i = 0; i < hisData.histories.root.stack.length ; i ++){
34             for(item in ViewArr){
35                 if(hisData.histories.root.stack[i].viewId == ViewArr[item].viewId){
36                     ionicHis[‘root‘][‘stack‘].push(ViewArr[item]);
37                 }
38             }
39         }
40     }
41    //赋值views对象
42     $ionicHistory.viewHistory().views = ViewArr;
43    //赋值histories对象
44     $ionicHistory.viewHistory().histories = ionicHis;
45 }//这个时候,本地保存的之前的history就已经取出并且赋值给现在的history服务,这个时候就可以执行ioncHistory.goBack()

3.设置backButton的样式为显示,这样就OK了

4.如果出现路由混乱的问题,也请不必担心,这是ionic框架没有对我们自定义构造路由历史进行处理时候做判断,只需在ionic.bundle.js里面加上一段代码就好

 // set a new unique viewId
          // viewId = ionic.Utils.nextUid();
          //Mouse 2017年3月13日01:03:55
          //重新构造的view id 在 next id中不存在,导致计算出重复的viewId,增加判断避免该问题的发生
          var viewId = ‘‘;
          while(true){
              viewId = ionic.Utils.nextUid();
              if(!viewHistory.views[viewId]){
                  break;
              }
          }


 

  END:衷心佩服以及感谢 事业部技术总监:大皓哥 的强有力的技术支持,希望上面的方法对你们有所帮助,尽早跳出单页应用开发微信的坑。

  滑稽:手动艾特@皓哥

  原创文章,转载请标清出处,谢谢!

  来自:事业部Hap技术组赵皖华

				
时间: 2024-10-10 22:40:41

【原创】Ionic单页应用跳转外链,构造路由返回的解决办法及代码的相关文章

Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法(转)

转载: Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法   首先感谢博主分享,本文作为学习记录 惊鸿一瞥 微信的启动页,相信大家都不陌生. 不知道大家有没有发现一个现象,微信每次启动的时候,是直接进入这个启动页面. 我的意思是,很多应用,往往会先白屏停顿一下后再进入启动页面(Splash).为了印证这一点,我把手机上所有的App都点了一遍.选几个例子 如下图: 微信:  斗鱼:  斗鱼和微信是直接进入了,他们的Splash页面. 知乎:  B站:  知乎和B站要先

exchange 2010 server内网邮箱突然不能收发外网邮件的问题分析解决办法

环境是,域控+exchange2010server+edge边缘服务器的邮件系统. 故障现象:某个内网邮箱以前可以收发外网邮件,现在突然不能收发外网邮件了. 故障分析:分析最近对服务器做了那些操作. 解决办法:原来是自己更改了设置,没有留意这个内网邮箱用户加了多个通讯组,通讯组有交叉,对这些通讯组设置禁止收发邮件的规则,把这个邮箱也给禁止了,增加了允许这个邮箱的邮件传输规则,故障排除.

服务器 | 服务器能访问,外网访问不了的解决办法

在使用华为云服务器的时候,域名解析了仍然访问不了,后来发现是云主机设置了白名单机制,需要把端口号加入白名单. 参考资料: 服务器能访问外网访问不了的情况,具体表现如下: 1.服务器环境启动正常,PHP探针文件可见,域名解析成功,服务器上输入域名可访问对应网站但外网无法访问. 2.本地局域网上搭建服务器环境,局域网IP已绑定,搭建环境那台机器访问正常局域网内其它机器均无法访问. 以上两种情况都是由windows自带的防火墙已开启但是没有添加80端口造成的 解决办法: 1.开始---设置---控制面

单页应用跳转ui-view,$stateProvider,$urlRouterProvider

<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no"&g

[原创] ASP.NET WEBAPI 接入微信公众平台 总结,Token验证失败解决办法

首先,请允许我说一句:shit! 因为这个问题不难,但是网上有关 ASP.NET WEBAPI的资料太少.都是PHP等等的. 我也是在看了某位大神的博客后有启发,一点点研究出来的. 来看正题! 1.微信公众平台的接入方法,无非4个参数(signature, timestamp, nonce, echostr)加1个Token(两边对应) 2.Token, timestamp, nonce字典排序后,按照字符串“SHA1”加密.得出一串字符串 tmpStr(转化为小写) 3.然后比对 tmpStr

[原创]python MySQLdb在windows环境下的安装、出错问题以及解决办法

版权声明:本文为博主原创文章,未经博主允许不得转载. 问题:windows下安装MySQLdb的方法 解析:python没有php那种集成环境,比如wamp那种集成软件直接把所有需要的东西全部一次性搭建好,但是python也有好的就是在linux环境下特别的简单方便,只是windows下麻烦点啦!但是只要大家去努力不要放弃,还是能成功的:最为windows环境的我,为了python搭建环境我也会各种百度谷歌找了很多博文以及其他文章,苦恼! 注释:其实也很简单,只是大家刚开始接触,还不太明白而已,

在ECSHOP商品列表页和搜索页面,最后出现空商品的解决办法

有客户购买了我们的ecshop模板后,自己做了大量的修改和改动,后来出现了商品列表页面和搜索页面出现了多一个商品的问题.没有商品数据,但是多显示了一个商品的样式.下面就由我们68ecshop为大家解决一下这个问题吧!解决的方法如下:<!– {if $goods.goods_id} –> <!– {/if} –>代码框起来即可解决.

ionic tab导航在android 真机测试中 导航在顶部解决办法

1.打开app.js文件 2.找到.config(function($stateProvider, $urlRouterProvider)){ $stateProvider ... ... } 3.加入红色部分代码.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider)){ $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicCo

关于如何控制一个页面的Ajax读数据只读一次的简单解决办法!

例如:一个页面有一个按钮,点击的时候用ajax去后台获取数据,获取成功以后返回.下次再点击的时候就不要去获取数据了. 解决办法有很多: 1.用Get方法去读数据,会缓存. 2.用jquery的data方法去手动缓存,读数据的时候判断缓存是否存在. 我的解决办法是在按钮加载的时候给按钮一个标志它未去后台获取过数据的属性(如readnot). 然后在第一次去后台获取数据成功后使用removeAttr("readnot")移除这个属性即可. 这样只要在每次点击按钮的时候判断是否存在readn