JavaScript와 기본 애플리케이션 간의 일반적인 데이터 상호 작용 방법 소개

이 글은 JavaScript와 네이티브 애플리케이션 사이에서 일반적으로 사용되는 데이터 상호 작용 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

시나리오 1

H5 페이지는 전자상거래의 이벤트 페이지, 일부 전자상거래의 세부정보 페이지 등 기본 앱에서 자주 사용됩니다. 이러한 페이지에는 한 가지 특징이 있습니다. 바로 수정 가능성입니다. 미래에는 일회성일 가능성이 특히 높습니다. 따라서 H5 페이지를 사용하는 것이 가장 현명한 선택입니다.
H5를 사용하면 필연적으로 네이티브 개발(Android, IOS)과 일부 상호 작용이 발생하게 됩니다. 다음 솔루션이 이 문제를 해결하는 데 도움이 될 수 있습니다.
구현 원칙은 기본 애플리케이션이 페널티를 트리거할 수 있도록 js 창 개체에 기본적으로 js 메서드를 삽입하는 것입니다. 이는 onclick을 호출하는 일반적인 방법만큼 간단합니다.

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);
        }
    }
}

호출 방법

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

이 판단 조건이 이상하게 보일 수 있습니다. 다양한 머신 모델을 테스트해 본 결과 Android 머신 창에는 이 속성이 없지만 IOS에서는 자동으로 웹킷 속성을 사용합니다. 먼저 웹킷 속성이 있는지 확인한 다음 이 메서드를 잘 호출할 수 있도록 메서드 이름이 삽입되어 있는지 확인합니다.

모든 사람의 검색 편의를 위해 여기에 모바일 코드도 첨부됩니다.

//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"];

이 과정을 통해; , 누구나 쉽게 기본 메소드를 호출할 수 있습니다.

시나리오 2

기본 애플리케이션을 열려면 문자 메시지의 링크를 사용해야 합니다. 그렇지 않으면 애플리케이션을 다운로드하라는 메시지가 표시됩니다. 먼저 기본 애플리케이션은 전면에 대한 URL 링크를 정의해야 합니다. 브라우저에서 호출하려면 먼저 링크 예제를 보여드리겠습니다.

// IOS
iOSStarClinic://

// Andriod 
yjjkyl://starclinic

간단하고 간결합니다. 이렇게만 호출하면 됩니다.

그렇다면 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;
    }
}

먼저 IOS 환경인지 안드로이드 환경인지 확인하세요. 실제로 현재 브라우저에서는 프롬프트 상자가 팝업되기 때문에 더 이상 민간 요법(타이밍 방법)을 사용하여 현재 시간에 애플리케이션이 설치되어 있는지 확인할 수 없습니다. 사용자가 점프하기 전에 확인하도록 합니다. 따라서 사용자가 확인을 클릭하지 않으면 브라우저가 점프합니다! 따라서 사용자가 애플리케이션을 열지 않을 때 다른 비즈니스 프로세스가 있도록 일부 콘텐츠가 현재 페이지에서 사용자에게 표시되어야 합니다.

위 내용은 JavaScript와 기본 애플리케이션 간의 일반적인 데이터 상호 작용 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!