Scenario 1

H5 pages are often used in native APPS, such as the activity page in e-commerce, the details page in some e-commerce, etc.. These pages all have one feature, that is, the possibility of future modification, and the probability of one-off is particularly high. So using H5 pages is the wisest choice. Once you’re using H5, you’ll need to interact with native developers (Android, IOS). The implementation principle is to inject a JS method into the js window object natively, in case the native application triggers the punishment, just as we usually call the onclick method. Js code:

// mobile/index.js Common js call native ways are reflected here.exportDefault {/ * * * * * @ param call mobile terminal method {x} {name, params, call} mobile injection method name | | parameter correction * / callMoblieMethods ({name, params. Call}){// Mobile android environmentifWindow.android [name](json.stringify (params)) {// Mobile uses Java so it can't parse json directly, only parse string or json string window.android[name](json.stringify (params)); } // Mobile IOS environmentif(window.webkit && window.webkit.messageHandlers) { window.webkit.messageHandlers[name].postMessage(params); }}}Copy the code

Call way

if(window.android || (window.webkit && window.webkit.messageHandlers.activityDetails)) {
    mobile.callMoblieMethods({ name: 'activityDetails', params: {activityId: item.act_id}});
}
Copy the code

This may seem weird to you, but I’ve tested all of these devices, and android doesn’t have a window property, but on IOS it has webKit property so let’s check if it has a WebKit property and check if it has a method name that it can inject so it can call that method properly;

In order to facilitate you to find here is also attached to the mobile code:

//Android public class AndroidJavascriptInterface { Activity mActivity; public AndroidJavascriptInterface(Activity activity) { this.mActivity = activity; } @javascriptInterface public void clinicDetails(String jsonData) {log.i ()"znh"."H5-js - Clinic Details");
      Intent intent = new Intent(mActivity, OutPatientActivity.class);
      Bundle bundle = new Bundle();
      bundle.putString(Constants.CLINIC_ID, GsonUtil.getJSONObjectKeyVal(jsonData, "clinicId")); intent.putExtras(bundle); mActivity.startActivity(intent); } @javascriptInterface public void activityDetails(String jsonData) {log.i ("znh"."H5-js - Details of Activities");
      Intent intent = new Intent(mActivity, ActivityDetailActivity.class);
      Bundle bundle = new Bundle();
      bundle.putString("id", GsonUtil.getJSONObjectKeyVal(jsonData, "activityId"));
      intent.putExtras(bundle);
      mActivity.startActivity(intent);
  }
}


//IOS
#import <JavaScriptCore/JavaScriptCore.h>

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
[wkWebConfig.userContentController addScriptMessageHandler:self name:@"clinicDetails"];
[wkWebConfig.userContentController addScriptMessageHandler:self name:@"activityDetails"];
Copy the code

Through this process you can easily call the native method.

Scenario 2

We need to use a link in the text message to open the native app. If not, it will be prompted to download the app. First, the native app needs to define a URL link for the front-end programmer to call in the browser.

// IOS
iOSStarClinic://

// Andriod 
yjjkyl://starclinic

Copy the code

Short and snappy, all you need to do is call this

So how do you do that in JS?

if(this.isIOS) {
    window.location.href = 'iOSStarClinic://'; // a protocol URL with APP}else {
    var state = null;
    try {
        state = window.open('yjjkyl://starclinic'.'_blank'); URL} catch(e) {}if (state) {
        window.close();
    } else{ window.location.href = gbs.patientDownUrl; }}Copy the code

First determine the current is IOS or Android environment, in fact, now the browser has not been able to solve the problem by the traditional method (timing method) to check the current installation of the application, because the browser will pop up a prompt box to confirm the user to jump so once the user does not click confirm the browser will jump! So something should be shown to the user on the current page to allow for other business processes when the user does not open the application.

– the –