前端H5與Android和ios之間通訊

  • 2019 年 10 月 3 日
  • 筆記

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

1.調用app方法。

因為Android和ios不同。需要寫一個方法，來判斷機型是Android或者是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.tokenAndroid傳過來的token。有些功能，需要判斷用戶是否登錄，就是根據app端傳來的token值判斷,有值就可以進行操作，沒有跳動到登錄頁面，存儲方式，測試的時候，Android和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);        }      }

上面因為和Android和ios溝通，需要給我返回token和用戶資訊，我是直接把用戶資訊存儲到vuex，因為每個頁面都需要用到用戶資訊。所以存放到vuex中,方便每個頁面使用。

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

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

webkit.messageHandlers.gotoHomePage.postMessage({});監聽ios一個方法，gotoHomePage就是ios定義的方法，只需要調用這個放個即可，不需要加上window,默認就是全局的。但是在postMessage一定要傳一個空對象即可。
Android.back()Android的就不需要太麻煩了，很友好，只需要調用Android給我定義的方法名back（）即可。
只要是返回上一級或者跳轉登錄，註冊頁面，都可以這樣寫。只是Android和ios可能定義方法不同

2.調用H5方法

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

 

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

VirMach 便宜 VPS

QNews

QNews