Android 와 H5 상호작용 프레임 워 크 실천 (하)

지난번 에 Js 가 안 드 로 이 드 를 호출 하 는 과정 을 초보 적 으로 마 쳤 지만 안 드 로 이 드 방법 입 니 다. 만약 에 결제 에 성공 하면 사용자 token 을 H5 에 가 져 오 면 어떻게 처리 합 니까?아니면 그 합의?

nicole://util:callbackId01/scan/params'sJson(   json)

이전 글 에는 이 콜 백 Id 01 이 적 혀 있 습 니 다.이 콜 백 Id 01 은 사실 표시 용 일 뿐 인 데, js 단 은 왜 이 걸 전달 해 야 합 니까?Android 방법의 완성 은 어떻게 해야만 JS 측 이 완성 되 었 다 는 것 을 알 게 할 수 있 습 니까?상상 하기 어렵 지 않 습 니 다. 안 드 로 이 드 엔 드 방법 이 실 행 된 것 이 분명 합 니 다. 주동 적 으로 Js 엔 드 에 알 리 는 것 은 Js 엔 드 를 주동 적 으로 호출 하 는 방법 이 고 해당 하 는 방법 파 라 메 터 를 전달 하여 완성 을 알 리 는 것 입 니 다.또한 이 방법 은 매우 많 기 때문에 모든 방법 이 대응 하 는 리 턴 방법 을 쓸 수 없 기 때문에 포장 이 필요 하 다.Js 로 컬 에는 맵 과 유사 한 집합 이 있 습 니 다. key 는 방법의 표시 이 고 value 는 방법 입 니 다.Js 로 컬 에서 안 드 로 이 드 를 호출 할 때 리 셋 이 필요 하 다 면 리 셋 된 태그 인 callbackId 01 을 안 드 로 이 드 에 전달 합 니 다. 안 드 로 이 드 는 실행 방법 을 실행 한 후 loadUrl () 이나 evaluate Javascript () 을 호출 하여 관련 방법 을 실행 하 는 일반적인 방법 입 니 다. Js 엔 드 내부 에서 map 를 통 해 실행 할 방법 을 찾 으 면 리 셋 이 완 료 됩 니 다.약간 감 겨 있 습 니 다. 아래 에 코드 를 붙 이 고 Js 부분 코드 는 무시 합 니 다.

//         ，    。
@ModuleName("util")
public class JsUtil implements JsModuleApi {
    /**
     *      
     */
    public void scanQRCode(WebView webView, String json, JavaCallback methodCallback, JsViewInterface jsViewInterface) {
        //   
        QRCodeScanActivity.startQRCodeScanner(webView.getContext(), new OnQRScanListenerImpl() {
            @Override
            public void onScanQRCodeSuccess(String result) {
                HashMap params = new HashMap<>(2);
                params.put("resultData", result);
                methodCallback.onSuccess(webView, params);
            }
        });
    }
}

자바 콜 백 같은 종 류 를 살 펴 보 는 데 중심 을 두 고 전달 하 는 데이터 도 통 일 된 형식 code, message, data 의 형식 입 니 다.

public final class JavaCallback {

    private String responseId;

    public JavaCallback(String responseId) {
        this.responseId = responseId;
    }

    public void onSuccess(WebView webView) {
        onSuccess(webView, "");
    }

    public void onSuccess(WebView webView, Map paramsMap) {
        onCallback(webView, paramsMap, true, new ErrorMessage("  "));
    }

    public void onSuccess(WebView webView, Object obj) {
        onCallback(webView, obj, true, new ErrorMessage("  "));
    }

    public void onFail(WebView webView, ErrorMessage errorMessage) {
        onCallback(webView, "", false, errorMessage);
    }

    public void onFail(WebView webView, Map paramsMap, ErrorMessage errorMessage) {
        onCallback(webView, paramsMap, false, errorMessage);
    }

    private void onCallback(WebView webView, Map paramsMap, boolean isSuccess, ErrorMessage errorMessage) {
        JsMessage jsMessage = new JsMessage();
        JsMessage.JsData jsData = new JsMessage.JsData();
        jsMessage.setResponseId(responseId);
        if (paramsMap != null) {
            jsData.setResult(paramsMap);
        }
        jsData.setMessage(errorMessage.getErrorMessage());
        if (isSuccess) {
            jsData.setCode(1);
        } else {
            jsData.setCode(0);
        }
        jsMessage.setResponseData(jsData);
        String params = JsonUtil.objectToJson(jsMessage);
        String formatJsCode = String.format(JsConstants.JS_CODE, params);
        CLog.debug(params);
        webView.evaluateJavascript(formatJsCode, null);
    }

    private void onCallback(WebView webView, Object obj, boolean isSuccess, ErrorMessage errorMessage) {
        JsMessage jsMessage = new JsMessage();
        JsMessage.JsData jsData = new JsMessage.JsData();
        jsMessage.setResponseId(responseId);
        if (obj!=null) {
            jsData.setResult(obj);
        }
        jsData.setMessage(errorMessage.getErrorMessage());
        if (isSuccess) {
            jsData.setCode(1);
        } else {
            jsData.setCode(0);
        }
        jsMessage.setResponseData(jsData);
        String params = JsonUtil.objectToJson(jsMessage);
        String formatJsCode = String.format(JsConstants.JS_CODE, params);
        CLog.d(params);
        webView.evaluateJavascript(formatJsCode, null);
    }

    public String getResponseId() {
        return responseId;
    }
}

지금까지 이 CallbackId 는 아직 사용 되 지 않 았 습 니 다. 사실은 지난 편 에서 모듈 방법 을 반사 할 때 id 를 전 달 했 습 니 다. 이전 부분 모듈 의 코드 를 보 세 요.

//JsBridgeEngine   ,callBackId        uri   
method.invoke(jsModuleApi, webView, decode, new JavaCallback(callBackId), jsViewInterface);

같은 안 드 로 이 드 가 JS 엔 드 를 호출 하 는 방법 도 안 드 로 이 드 로 컬 리 셋 Id 를 JS 에 전달 한 다음 Js 가 관련 코드 를 실행 한 후 안 드 로 이 드 를 주동 적 으로 호출 하 는 방법 으로 리 셋 할 수 있다.이렇게 해서 JSBridge 의 교량 이 세 워 졌 다.
H5 의 WebView 의 응답 속 도 는 원생, 특히 페이지 가 표시 하 는 상황 에 미 치지 못 합 니 다.보통 인터넷 속도 가 느 리 면 어떤 처리 도 하지 않 으 면 기본적으로 공백 이다.어떻게 최적화 합 니까?html 에 많은 Css, js, 이미지 자원 이 있 습 니 다. 이 자원 들 이 모두 결 과 를 얻 은 후에 원래 의 webview 가 화면 을 보 여 줍 니 다.이 로 인해 만약 에 핵심 자원 을 불 러 오지 않 으 면 인터페이스 가 정확하게 불 러 올 수 없습니다.그 부분의 자원 을 현지 화 하 는 것 이 비교적 좋 은 방식 이다.어떻게 자원 을 현지 화 합 니까?아니면 두 글자 '차단'!방법 호출 과 자원 을 구분 하기 위해 웹 크롬 클 라 이언 트 의 onJSPrompt () 차단 url 호출 방법, 웹 뷰 클 라 이언 트 의 shouldInterceptRequest 차단 url 로 자원 을 불 러 옵 니 다.

public WebResourceResponse shouldInterceptRequest(WebView webView, WebResourceRequest request) {

위의 이 방법 은 예 를 들 어 Js 의 일부 자원 이 src 방식 으로 url 자원 을 도입 할 때 촉발 된다.만약 현지 화 된 상황 이 라면, 예 를 들 어 어떤 js 파일 의 도입 이다.

위의 코드 를 다시 설명 하고 차단 되면 response 를 되 돌려 줍 니 다.차단 할 필요 가 없다 면 시스템 이 스스로 처리 하도록 하 세 요.또한 모든 종류의 파일 에는 mime Type 이 있어 야 합 니 다.WebResource Response 의 구조 방법 을 보면 알 수 있다.

/**
     * Constructs a resource response with the given MIME type, encoding, and
     * input stream. Callers must implement
     * {@link InputStream#read(byte[]) InputStream.read(byte[])} for the input
     * stream.
     *
     * @param mimeType the resource response's MIME type, for example text/html
     * @param encoding the resource response's encoding
     * @param data the input stream that provides the resource response's data. Must not be a
     *             StringBufferInputStream.
     */
    public WebResourceResponse(String mimeType, String encoding,
            InputStream data) {
        mMimeType = mimeType;
        mEncoding = encoding;
        setData(data);
    }

Mime Type 제 가 정리 해 드릴 게 요. 여 기 는 제 가 직접 보면 돼 요.

    //js mime type
    public static final String MIME_JS = "application/javascript";
    public static final String MIME_CSS = "text/css";
    public static final String MIME_PNG = "image/png";
    public static final String MIME_SVG = "image/svg+xml";
    public static final String MIME_WOFF = "application/x-font-woff";
    public static final String MIME_WOFF2 = "application/x-font-woff2";
    public static final String MIME_TTF = "application/x-font-truetype";
    public static final String MIME_OTF = "application/x-font-opentype";
    public static final String MIME_EOT = "application/vnd.ms-fontobject";
    public static final String MIME_HEADER = "Access-Control-Allow-Origin";
    public static final String MIME_DOT = "*";
    public static final String MIME_UTF_8 = "UTF-8";

자원 에 대해 몇 가지 질문 이 있 습 니 다. 1. 현재 웹 페이지 의 주 소 는 https 이지 만 자원 이 http 이면 허용 되 지 않 습 니 다.오 류 는 일반적으로 다음 과 같 습 니 다. Mixed Content: The page at 'was loaded over HTTPS, but required an insecure resource'http://xxxxxx. This request has been blocked; HTTPS 를 통 해 콘 텐 츠 를 제공 해 야 합 니 다. 해결 방법:

WebSettings settings = this.getSettings();
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

정부 에 서 는 이런 방식 이 안전 문 제 를 일 으 킬 수 있다 는 것 을 그다지 건의 하지 않 기 때문에 가능 한 한 H5 쪽 을 통일 시 키 고 IOS 단 은 혼용 되 지 않 은 것 같 습 니 다. 우리 프로젝트 는 마지막 에 통일 되 었 습 니 다.2. 도 메 인 문제.오 류 는 다음 과 같 습 니 다. 요청 한 리 소스 에 'Access - Control - Allow - Origin' 헤더 가 없습니다. Origin 'http://xxxxxxxx.ex.com is therefore not allowed access. 문 제 는 인터넷 에서 많이 검색 되 었 지만 잘 찾 지 못 했 습 니 다. 아래 의 api 두 개 를 호출 하면 된다 는 것 입 니 다.안 드 로 이 드 16 이하 라면 반사 실행 을 해 야 합 니 다.

settings.setAllowFileAccessFromFileURLs(true);
settings.setAllowUniversalAccessFromFileURLs(true);

나 는 여러 번 시도 해 보 았 지만 성공 할 수 없 었 다.마지막 으로 생각 했 습 니 다. 로 컬 이 서버 인 이상 response 에서 글 을 쓸 수 밖 에 없습니다. response 대상 에 api 가 있 습 니 다. header 에 관 한 것 입 니 다.오래 걸 리 면 쉬 워.

map.put("Access-Control-Allow-Origin","*")
response.setResponseHeaders(map);

잠시 여기까지 쓰 겠 습 니 다. 지난 글 과 함께 생각 을 제 공 했 을 뿐 입 니 다. 몇 가지 문제 와 공 유 했 습 니 다. 구체 적 인 프로젝트 공 사 는 h5 의 버 전 관리, 로 컬 api 업데이트, 그리고 방법 이 호출 된 각종 반전 문 제 는 여기 서 자세히 설명 하지 않 고 관심 이 있 는 것 은 함께 토론 할 수 있 습 니 다.문장 은 오리지널 인 데, 만약 유사 한 점 이 있 으 면, 너 를 해적판 으로 본다.