前端H5與安卓和ios之間通訊

在一些app場景中，常常看到app裏面嵌套H5頁面， 安卓和ios提供一個空殼子，方法二者互相調用。上一週就是寫H5頁面讓安卓和ios調用使用，中間傳參，接受參數。經過 window.wx 對象調用一些原生 app 的功能。這個H5頁面，我用的是vue來寫的。用到了vue全家桶。

1.調用app方法。

由於安卓和ios不一樣。須要寫一個方法，來判斷機型是安卓或者是ios；

function checkDevice() { // js判斷是不是蘋果設備
 function checkIsAppleDevice() { var u = navigator.userAgent, app = navigator.appVersion; var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); var iPad = u.indexOf("iPad") > -1; var iPhone = u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1; if (ios || iPad || iPhone) { return true; } else { return false; } } //js判斷是否爲Android設備
 function checkIsAndroidDevice() { var u = navigator.userAgent; if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) { return true; } else { return false; } } if (checkIsAppleDevice()) { return "ios"; } else { return "andriod"; } } export default checkDevice;

上面寫好的，直接拿來用，在你須要的組件中引入就行。在app.vue中引入這個js文件。由於一進來就要獲取token值。前提是用戶登陸了。

獲取app傳過來的token值。iOSInfo.token這個是ios定義的方法，andriod.token安卓傳過來的token。有些功能，須要判斷用戶是否登陸，就是根據app端傳來的token值判斷,有值就能夠進行操做，沒有跳動到登陸頁面，存儲方式，測試的時候，安卓和ios不支持localStorage，支持sessionStorage。把獲得的值存儲到sessionStorage裏面就行，而後那個地方須要，就獲取一下就行，通常都是在請求接口的時候攜帶上去。

this.phone = checkDevice(); getAndioOfIOSInfoList() { // js判斷是否爲ios設備
      if (this.phone== "ios") { let iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));

　　　　　　sessionStorage.setItem("token", iOSInfo.token);

this.$store.dispatch("getUserId", iOSInfo.userId);
      } else { let andriod = JSON.parse(Android.getToken()); //token

　　　　　　sessionStorage.setItem("token", andriod.token);

this.$store.dispatch("getUserId", andriod.userId); } }

上面由於和安卓和ios溝通，須要給我返回token和用戶信息，我是直接把用戶信息存儲到vuex，由於每一個頁面都須要用到用戶信息。因此存放到vuex中,方便每一個頁面使用。

有時候，須要在二級頁面進入一級頁面的時候，須要監聽安卓和ios方法，讓他們返回，在這個時候咱們只須要監聽安卓和ios定義的方法就行。也是須要判斷機型。handleGoTo這個是前端本身寫的一個返回上一級的方法名。

handleGoTo() { //原生返回上一級頁面
      if (this.phone == "ios") { // ios返回上一級
 webkit.messageHandlers.gotoHomePage.postMessage({}); } else { Android.back(); //安卓方法
 } },

webkit.messageHandlers.gotoHomePage.postMessage({});監聽ios一個方法，gotoHomePage就是ios定義的方法，只須要調用這個放個便可，不須要加上window,默認就是全局的。可是在postMessage必定要傳一個空對象便可。

Android.back()安卓的就不須要太麻煩了，很友好，只須要調用安卓給我定義的方法名back（）便可。
只要是返回上一級或者跳轉登陸，註冊頁面，均可以這樣寫。只是安卓和ios可能定義方法不一樣

2.調用H5方法

在一些場景中，須要咱們傳一些參數給app。讓他們調用，這時候就須要app端調用咱們的方法，把對應的參數傳給他們就行。也是須要判斷機型。jumpToPAage就是安卓和ios定義的方法名，名字同樣不同均可以的

 

 以上都是和安卓和ios在工做中二者之間互相調用的方法，總結一下，方便之後查詢使用。

原文出處：https://www.cnblogs.com/zhoulifeng/p/11446516.html