전단 h5 와 android / ios 의 상호작용

프론트 엔 드 와 Android / iOS 의 상호작용 코드 를 소개 합 니 다.(쌍방 은 공용 방법 을 약정 해 야 합 니 다) 1. 안 드 로 이 드 와 상호작용 ① 전단 에서 안 드 로 이 드 를 호출 하 는 방법 입 니 다. 여기 서 약정 한 방법 이름 은 HtmlToAndroid 입 니 다.

window.android.HtmlToAndroid(  )；

HtmlToAndroid 방법 에서 매개 변 수 는 수요 에 따라 값 을 전달 합 니 다.공백, 문자열, JSON
② Android 가 프론트 엔 드 를 호출 하 는 방법 은 다음 과 같 습 니 다: AndroidToHtml,

window["AndroidToHtml"]=function(msg){
    alert(msg+"123")
};

//   vue-cli ，    created()        window (  this)

window["AndroidToHtml"]=function(msg){ 
    alert(msg+"123")
};

2. iOS 와 상호작용 ① 전방 에서 iOS 를 호출 하 는 방법 여기 서 약속 한 방법 을 HtmlToIos 라 고 합 니 다.

window.webkit.messageHandlers.HtmlToIos.postMessage(  );

웹 키 트 는 iOS 환경 에서 만 작 동 합 니 다. 전단 이 웹 페이지 에서 열 리 면 오류 가 발생 합 니 다.
② iOS 가 전단 을 호출 하 는 방법 은 안 드 로 이 드 호출 과 마찬가지 로 전단 질 서 는 window 의 낡은 습관 에 노출 시 켜 야 합 니 다.

window["IosToHtml"]=function(){ 
     alert(msg+"123")
};

3. android ios 호출 app 방법 판단

function appMessage(str) {
    str = String(str);
    var u = navigator.userAgent,
    app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android    uc      
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios   
    if (isAndroid) {
        window.android.HtmlToAndroid(str);
    } else if (isiOS) {
        window.webkit.messageHandlers.HtmlToIos.postMessage({
            'str': str
        });
    }
}

그 중에서 HtmlToAndroid 는 andriod 의 방법 입 니 다.HtmlToIos 는 ios 가 제공 하 는 방법 입 니 다.