Introduction aux méthodes courantes d'interaction de données entre JavaScript et les applications natives

Le contenu de cet article est une introduction aux méthodes d'interaction de données couramment utilisées entre JavaScript et les applications natives. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Scénario 1

Les pages H5 sont souvent utilisées dans les applications natives, comme les pages d'événements dans le e-commerce, les pages de détails dans certains e-commerces, etc.. .Ces pages ont toutes une caractéristique, c'est-à-dire la possibilité de modification dans le futur, et le risque de modification ponctuelle est particulièrement élevé. Par conséquent, utiliser des pages H5 est le choix le plus judicieux.
Une fois que vous utiliserez H5, vous aurez inévitablement quelques interactions avec le développement natif (Android, IOS). Les solutions suivantes peuvent vous aider à le résoudre.
Le principe d'implémentation est d'injecter nativement une méthode js dans l'objet window js pour préparer l'application native au déclenchement de la punition. C'est aussi simple que notre méthode habituelle d'appel à onclick.

Code js :

// mobile/index.js 常用js 调用原生的方式都在这里体现。
export default {
    /**
     * 调用移动端方法
     *
     * @param {*} {name, params, call} 移动端注入的方法名 | 参数 | 回调
     */
    callMoblieMethods({name, params, call}){
        // 移动端安卓的环境
        if(window.android) {
            // 移动端使用java所以不能直接解析json,只能解析字符串或者json字符串
            window.android[name](JSON.stringify(params));  
        }
        // 移动端IOS的环境
        if(window.webkit && window.webkit.messageHandlers) {
            window.webkit.messageHandlers[name].postMessage(params);
        }
    }
}

Méthode d'appel

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

Cette condition de jugement peut vous paraître étrange. J'ai testé différents modèles de machines. La fenêtre Android le fait certainement. n'a pas d'attributs, mais sur IOS, il aura son propre attribut webkit, nous déterminons donc d'abord s'il a un attribut webkit puis s'il a un nom de méthode injecté afin qu'il puisse bien appeler cette méthode

To ; faciliter votre recherche, le code mobile est également joint ici :

//Android

public class AndroidJavascriptInterface {

  Activity mActivity;

  public AndroidJavascriptInterface(Activity activity) {
      this.mActivity = activity;
  }

  //诊所详情
  @JavascriptInterface
  public void clinicDetails(String jsonData) {
      Log.i("znh", "H5-JS-诊所详情");
      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-活动详情");
      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"];

Grâce à ce procédé, vous pouvez facilement faire appel à la méthode native.

Scénario 2

Nous devons utiliser un lien dans le message texte pour ouvrir l'application native. Sinon, il sera d'abord invité à télécharger une application. , l'application native Vous devez définir un lien URL que les programmeurs front-end pourront appeler dans le navigateur. Laissez-moi d'abord vous montrer un exemple de lien :

// IOS
iOSStarClinic://

// Andriod 
yjjkyl://starclinic

Court et concis, il vous suffit d'appeler ceci.

Ensuite Comment faire ça en js ?

if(this.isIOS) {
    window.location.href = 'iOSStarClinic://';//与APP约定的一个协议URL
} else {
    var state = null;
    try {
        state = window.open('yjjkyl://starclinic', '_blank');//与APP约定的一个协议URL
    } catch(e) {}
    if (state) {
        window.close();
    } else {
        window.location.href = gbs.patientDownUrl;
    }
}

Déterminez d'abord s'il s'agit d'un environnement IOS ou Android. En fait, les navigateurs actuels ne peuvent plus utiliser de remèdes populaires (méthodes de synchronisation) pour vérifier si l'application est installée à l'heure actuelle, car le navigateur est installé. une invite apparaîtra. La boîte nécessite la confirmation de l'utilisateur pour sauter, donc une fois que l'utilisateur ne clique pas pour confirmer, le navigateur sautera ! Par conséquent, certains contenus doivent être affichés à l'utilisateur sur la page actuelle afin qu'il y ait d'autres processus métier lorsque l'utilisateur n'ouvre pas l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!