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

2022-08-23 12:32:42

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

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

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

解决思路：

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

 var storage = window. localStorage;

 var historyData = $ionicHistory.viewHistory();

 //将historyData从object转成JSON　　

 storage.setItem("historyData",Json.stringify(historyData));

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

 if(!$ionicHistory.backView()){

     var ViewArr = {};

 　　//将本地的historyData从json转成object　

     var hisData = JSON.parse( window.localStorage.getItem('historyData'));

 　　//因为他的每个路由对象全是view类型，利用框架的createView构造history中的

 　　//所有的view，看清history对象的结构，不然很容易出错 。

 　　　

 　　//在构造history中的views对象时，同时构造currentView，backView，forwardView

 　　　for(var item in hisData.views){

         ViewArr[item] = $ionicHistory.createView(hisData.views[item]);

 　　　　　//构造currentView并赋值

         if(hisData.currentView && hisData.currentView.viewId == ViewArr[item].viewId){

             $ionicHistory.viewHistory().currentView = ViewArr[item];

         }

 　　　　　//构造backView并赋值

         if(hisData.backView && hisData.backView.viewId == ViewArr[item].viewId){

             $ionicHistory.viewHistory().backView = ViewArr[item];

         }

 　　　　　//构造forwardView并赋值

         if(hisData.forwardView && hisData.forwardView.viewId == ViewArr[item].viewId){

             $ionicHistory.viewHistory().forwardView = ViewArr[item];

         }

     }

 　　//构造history的histories对象

     var ionicHis = {};

     ionicHis['root'] = {};

     ionicHis['root']['cursor'] = hisData.histories.root.cursor;

     ionicHis['root']['historyId'] = hisData.histories.root.historyId;

     ionicHis['root']['parentHistoryId'] = hisData.histories.root.parentHistoryId;

     ionicHis['root']['stack'] = [];

     if(hisData.histories.root && hisData.histories.root.stack && hisData.histories.root.stack.length){

         for(var i = ; i < hisData.histories.root.stack.length ; i ++){

             for(item in ViewArr){

                 if(hisData.histories.root.stack[i].viewId == ViewArr[item].viewId){

                     ionicHis['root']['stack'].push(ViewArr[item]);

                 }

             }

         }

     }

 　　　//赋值views对象

     $ionicHistory.viewHistory().views = ViewArr;

 　　　//赋值histories对象

     $ionicHistory.viewHistory().histories = ionicHis;

 }//这个时候，本地保存的之前的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:希望上面的方法对你们有所帮助

　　原创文章，转载请标清出处，谢谢！

码农公寓

相关文章