집 > 기사 > 웹 프론트엔드 > iOS와 JS의 상호작용에 대한 자세한 설명

iOS와 JS의 상호작용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-06 11:23:281932검색

이번에는 iOS와 JS와 상호작용할 때 주의해야 할 세 가지 사항을 알려드리겠습니다. iOS와 JS 사이에서 상호작용할 때 주의사항은 무엇인가요? 다음은 여러분이 살펴봐야 할 세 가지 고전적인 사례입니다.

1 CocoaPods를 사용하여 WebView 가져오기JavascriptBridge

여기에서는 최신 버전을 사용합니다

pod 'WebViewJavascriptBridge', '~> 5.0.5'

가져오기 위한 셸 명령에 대해서는 많이 언급하지 않겠습니다. 프로젝트는 여기에서.

2. OC 코드 작성(OC 코드 또는 JS 코드를 먼저 작성해도 됩니다)

헤더 파일 #import "WebViewJavascriptBridge.h"를 소개합니다.

두 개의속성을 생성합니다

@property (nonatomic, strong) UIWebView * webView;@property WebViewJavascriptBridge* bridge;
初始化WebView和WebViewJavascriptBridge
 self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];  [self.view addSubview:self.webView];  /**开启日志*/  [WebViewJavascriptBridge enableLogging];  /**初始化-WebViewJavascriptBridge*/  self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];  [self.bridge setWebViewDelegate:self];

3. :여기에 호출 코드를 작성하기 전에 프런트엔드 js 함수의 함수 이름을 알아야 합니다. 이것은 매우 중요합니다.

여기에서는 프런트 엔드에 OC 코드를 호출하여 반환된 데이터를 목록으로 처리하는 callViewLoad라는 함수가 있다고 가정합니다.

OC 코드가 Js의 요청을 처리하는 방법을 살펴보세요

[self.bridgeregisterHandler:@"callViewLoad" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"프런트 엔드에서 보낸 데이터%@", data ; /users/1338683b18e0/latest_articles"});

}

}];

여기서 매개변수 설명에 대해 이야기해 보겠습니다.
핸들러의 콜백에는 data와 responseCallback이라는 두 개의 매개변수가 있습니다.

데이터는 프런트엔드 js에서 제공됩니다. function to the backend 끝에서 전송되는 데이터: 예를 들어 로그인 시 계정 정보와 사용자 비밀번호를 백엔드에서 처리하기 위해 백엔드로 전달해야 합니다. 여기에 있는 데이터는 두 가지 데이터를 저장합니다.

responseCallback은 프런트 엔드 js 함수로 반환하려는 데이터 콘텐츠입니다. 프런트 엔드는 인터페이스를 호출한 후 로그인을 반환합니다. 결과를 프런트 엔드에 전달하고 사용합니다. 하지만 사전 형식으로 반환됩니다.

이 시점에서 JS가 OC를 호출하고 OC 측 코드가 완성되었습니다.

프런트엔드 JS 코드 작성 방법

html 코드 작성 방법

<html>
    <head>
        <title>OC和JS互动Web</title>
        <script>
            /*这段代码是固定的，必须要放到js中*/
            function setupWebViewJavascriptBridge(callback) {                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }                window.WVJBCallbacks = [callback];                var WVJBIframe = document.createElement(&#39;iframe&#39;);
                WVJBIframe.style.display = &#39;none&#39;;
                WVJBIframe.src = &#39;wvjbscheme://BRIDGE_LOADED&#39;;                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            }        
        /**与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
        setupWebViewJavascriptBridge(function(bridge) {             /**OC调用JS代码不含参数*/
             bridge.registerHandler(&#39;UserLogin&#39;, function() {
                                    alert(&#39;UserLogin&#39;)
             })             /**OC调用JS代码含参数*/
             bridge.registerHandler(&#39;UserLoginInfo&#39;, function(data, responseCallback) {
                    responseCallback({&#39;userId&#39;: &#39;123456&#39;, &#39;Names&#39;: &#39;ZHOUZHOUGEDEBOKE&#39;})
            })                                     
             // **********************************JS调用OC
             bridge.callHandler(&#39;callViewLoad&#39;, {&#39;blogURL&#39;: &#39;http://www.henishuo.com&#39;}, function(responseCallback){
                                            alert(responseCallback.UName)
             })
        })    </script>
    </head>
    <body>
        <button style = "background: yellow; height: 50px; width: 100px;">JS/OC互动</button>
    </body>
</html>

여기에서는 html 코드 중 callViewLoad 함수를 주로 살펴봅니다. 이것이 그가 oc 함수를 호출했다는 증거이다. 여기에서 callHandler의 매개변수를 볼 수 있습니다

첫 번째 매개변수 callViewLoad: 함수 이름

{'blogURL': 'http://www.henishuo.com'}: OC 코드

함수에 전달된 데이터를 나타냅니다( responseCallback): 성공적으로 반환된 JS 함수를 수락합니다. 여기에서는 백엔드가 성공적으로 반환된 후 이를 모니터링할 수 있습니다. OC의 Block과 비슷합니다.

이 함수 설명: JS는 ObjC에 공개 API를 제공합니다. 등록하면 ObjC 측에서 JS 측에서 이 API를 호출할 때 콜백을 받을 수 있습니다. ObjC 측은 처리가 완료된 후 JS에 피드백할 수 있습니다. 이런 방식으로 페이지 로딩이 완료되면 먼저 호출됩니다.

주의사항: 여기서는 OC 코드를 호출하는 JS의 설명에 대해서만 설명합니다. 한 가지 방법의 사용법을 간략하게 소개합니다. 그러나 우리는 프론트엔드 JS 함수를 작성할 때 작성해야 할 코드가 많다는 것도 확인했습니다. 그렇지 않으면 공동 효과가 없습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!