在开发客户微信企业号的填单审批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:希望上面的方法对你们有所帮助

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


05-06 07:45