Andrews and communication between the front end and H5 ios

In some app scenarios, often see app H5 nested inside pages, Andrews and ios provide a empty shells, both methods call each other. Last week is to write H5 pages make calls using ios and Android, intermediate mass participation, accept parameters. Call some native app functionality by window.wx object. The H5 page, I used to write vue. It uses vue family bucket.

1. Call app method.

Because different Andrews and ios. You need to write a method to determine the model or iOS Andrews;

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;

Written above, directly used to introduce the line in the components you need thereof. The introduction of this js file in app.vue in. Because it should come in a get token value. Provided that the user is logged.

Get app pass over the token value. This is iOSInfo.token ios method definition, andriod.token Andrews pass over the token. Some functions need to determine whether the user is logged in, is based on token value judgment app end came, there is value can operate without jumping to the login page storage, the test, Andrews and ios not support localStorage, support sessionStorage. The resulting value is stored inside the sessionStorage on the line, then that place needs to get on the line, usually carries up when requested interface.

the this .phone = checkDevice (); 
 getAndioOfIOSInfoList () { 
      // JS ios device determines whether the 
      IF ( the this .phone == " ios " ) { 
        the let iOSInfo = the JSON.parse (the 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);
      }
    }

Because above and Andrews and ios communication, I need to return token and user information, I was directly store user information to vuex, because each page need to use user information. So stored in vuex, it is convenient to use for each page.

Methods Sometimes, when two pages need to enter the next page, you need to listen Andrews and ios way to let them return, at this time we only need to listen Andrews and ios defined on the line. Also need to determine models. handleGoTo This is the front himself in a return to the previous method name.

handleGoTo () {
       // native return to the previous page 
      IF ( the this .phone == " iOS " ) {
         // iOS return a 
        webkit.messageHandlers.gotoHomePage.postMessage ({}); 
      } the else { 
        Android.back ( ); // Andrews method 
      } 
    },

webkit.messageHandlers.gotoHomePage.postMessage ({}); a listener method ios, gotoHomePage ios method is defined, only to put the call, no plus window, default is global. But postMessage must pass an empty object can be.

Android.back () Andrews does not need too much trouble, very friendly, just call Andrews method names back to my definition () can be. 
As long as the return or jump on a log in the registration page, you can write. Andrews and ios just a different method may define 

2. Call H5 method

In some scenarios, we need to pass some parameters to the app. Let them call, this time on the need to end app to call our method, the corresponding parameter passed them on the line. Also need to determine models. jumpToPAage Andrews and ios method name is defined, the name is not the same as a can

 

 These are the methods and Andrews and ios at work call each other between the two, to sum up, the query uses to facilitate future.