物理返回键事件处理

曾经终败给现在 2022-12-21 04:54 132阅读 0赞

物理返回键

1）app内：  
在app1上，H5和app约定好在window对象上定义一个全局的方法，比如window.back方法，H5会在路由定义位置，定义该方法。当触发物理返回键的时候，app会监听双方定义好的方法back，如果有定义该方法，则执行方法

2）非app内，比如浏览器，微信等环境，使用popstate方法监听   
这里处理的时候，需要区分是路由触发的还是物理触发的，路由触发popostate()方法，则不执行物理事件处理（由于router.replace()和router.push()方法也会触发popstate()方法），所以需要用一个标识，表示是路由触发的popstate方法，路由触发的就不调用处理物理键返回的方法，物理键触发的popstate方法,才调用物理键返回方法

3）sdk方式接入app内  
也是H5和app双方约定好的相应方法

app1的物理返回键的方法：  
window.back（适用ios  android）返回值说明：  
return 0: 关闭当前web view  
return 1:  正常返回上一页  
return 2:  什么都不做

插件形式，E企宝物理返回键的方法：  
window.onBackForward(适用android. iOS)返回值说明：  
return 0: 什么都不做  
return 1: 正常返回上一页

在router/index.js里面定义了router对象，然后通过该对象可以获取到的信息  
let history = router.history  
history = \{  
   base: ‘’,  
   current: \{\},  — 当前路由对象  
   cb: fn,  
   errorCbs: \[\],  
   router: \{\}  
\}

当前路由对象的信息：  
current = \{  
     fullPath: ‘/home’,  
     name: ‘home’,  
     path: ‘/home’  
     hash: ‘’,  
     matched: \[\],  
     meta: \{\}. // 在路由中定义的字段  
     params: \{\},  // 路由跳转前自定义的属性  
     query: \{\}    // 路由跳转前自定义的属性  
\}  
有用的信息是current里面的params.   query里面带的自定义属性

current和beforeRouteEnter(to, from, next)里面的to，from对象的字段是一样的