【原創】Ionic單頁應用跳轉外鏈，構造路由返回的解決辦法及代碼

在開發客戶微信企業號的填單審批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 = 0; 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:希望上面的方法對你們有所幫助

　　原創文章，轉載請標清出處，謝謝！