이번에는 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 끝에서 전송되는 데이터: 예를 들어 로그인 시 계정 정보와 사용자 비밀번호를 백엔드에서 처리하기 위해 백엔드로 전달해야 합니다. 여기에 있는 데이터는 두 가지 데이터를 저장합니다.
<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('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'wvjbscheme://BRIDGE_LOADED'; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) } /**与OC交互的所有JS方法都要放在此处注册,才能调用通过JS调用OC或者让OC调用这里的JS*/ setupWebViewJavascriptBridge(function(bridge) { /**OC调用JS代码不含参数*/ bridge.registerHandler('UserLogin', function() { alert('UserLogin') }) /**OC调用JS代码含参数*/ bridge.registerHandler('UserLoginInfo', function(data, responseCallback) { responseCallback({'userId': '123456', 'Names': 'ZHOUZHOUGEDEBOKE'}) }) // **********************************JS调用OC bridge.callHandler('callViewLoad', {'blogURL': 'http://www.henishuo.com'}, function(responseCallback){ alert(responseCallback.UName) }) }) </script> </head> <body> <button style = "background: yellow; height: 50px; width: 100px;">JS/OC互动</button> </body> </html>
ES6 모듈 구문 로딩 가져오기 내보내기
.
폭포 흐름을 달성하기 위해 하위 구성 요소에서 슬롯을 사용하는 이유
위 내용은 iOS와 JS의 상호작용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!