JSとOCの簡単なインタラクション
9842 ワード
一、説明
最近はプロジェクトでこの内容が使われていて、その中のインタラクションを理解するのは難しくありませんが、初めての接触は大変です.后で开発するために更に简単で、今日特に自分の理解と认识を记录して、ハハハ、大神は喷かないでください!
二、XcodeでHTML 5ファイルを新規作成し、簡単なラベル言語を書く
三、新しいHTML 5ファイルをロードする
この时に运転して、あなたはとても丑い1つのホームページを见ることができて、ははは、十分に使えばいいです.
四、インタラクションの開始
4.1、JS呼び出しOC
簡単:Webページの赤いボタンをクリックして次のインタフェースにジャンプする必要があります
a.JS側の操作:上記HTML 5 function jump(){}に以下のコードを追加する:window.webkit.messageHandlers.webApp.postMessage(message);
以上のコードの意味は、赤いボタンをクリックした後、webkitにパラメータ付きのメッセージを送信し、ios側にいくつかのことを実行するように通知することです.
b.IOS側の操作:ホームページのボタンのクリックを傍受し、ローカルの方法を呼び出して傍受を登録する
メソッド実装
js側がメッセージを送信する限り,この方法を実装するとメッセージを受信し,異なるパラメータ値に基づいて異なる方法を実装し,両者のインタラクションを実現することができる.
4.2、OC呼び出しjs
4.3 wkwebviewポップアッププロンプトボックス
wkwebviewがロードするページは、html 5のプロンプトボックス(alter,confirm,prompt)に対して直接表示することはできませんが、必要に応じて以下の3つのエージェント方法を実現し、messageを傍受し、オリジナルのUIで表示し、WKUIdelegateプロトコル、webviewを遵守することに注意する必要があります.UIDelegate=self;
最近はプロジェクトでこの内容が使われていて、その中のインタラクションを理解するのは難しくありませんが、初めての接触は大変です.后で开発するために更に简単で、今日特に自分の理解と认识を记录して、ハハハ、大神は喷かないでください!
二、XcodeでHTML 5ファイルを新規作成し、簡単なラベル言語を書く
var btn = document.getElementsByTagName("button")[0]
btn.onclick = function jump() {
//message ， NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull 。
var message = {"method":"H5 "};
//message ， NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull 。
window.webkit.messageHandlers.Weixin.postMessage(message);
// window.webkit.messageHandlers.app .postMessage( )
//webApp app , html5 ios ，
}
function insertimage(imagePath) {
var imageElement = document.createElement('img');
imageElement.setAttribute('src', imagePath);
document.body.appendChild(imageElement)
return imagePath;
}
三、新しいHTML 5ファイルをロードする
#import "ViewController.h"
#import
@interface ViewController (){
WKWebView*webview;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.backgroundColor=[UIColor yellowColor];
[btn setTitle:@" " forState:UIControlStateNormal];
[btn sizeToFit];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn addTarget:self action:@selector(chooseiamge) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *item=[[UIBarButtonItem alloc]initWithCustomView:btn];
self.navigationItem.rightBarButtonItem=item;
self.title=@" H5 ";
//1. webview , wkwebview ， webview
WKWebViewConfiguration *config =[[WKWebViewConfiguration alloc]init];
//2. hybridDemo handler , js 。
[config.userContentController addScriptMessageHandler:self name:@"Weixin"];
/* js ：window.webkit.messageHandlers.Weixin.postMessage(message) webApp name ，
*/
//3. webview
webview=[[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 375, 667) configuration:config];
webview.navigationDelegate=self;
webview.UIDelegate=self;
[self.view addSubview:webview];
// [webview loadHTMLString:@"" baseURL:@""];
// html
//[webview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://localhost:63342/untitled1/www.html?_ijt=bkn71lf5uie4574aclhomlufoa"]]];
[webview loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle]URLForResource:@"HLT" withExtension:@"htm"]]];
この时に运転して、あなたはとても丑い1つのホームページを见ることができて、ははは、十分に使えばいいです.
四、インタラクションの開始
4.1、JS呼び出しOC
簡単:Webページの赤いボタンをクリックして次のインタフェースにジャンプする必要があります
a.JS側の操作:上記HTML 5 function jump(){}に以下のコードを追加する:window.webkit.messageHandlers.webApp.postMessage(message);
!-- WKwebview JS app-->
btn.onclick = function jump() {
//message ， NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull 。
var message = {"method":"H5 "};
//message ， NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull 。
window.webkit.messageHandlers.Weixin.postMessage(message);
// window.webkit.messageHandlers.app .postMessage( )
//webApp app , html5 ios ，
}
以上のコードの意味は、赤いボタンをクリックした後、webkitにパラメータ付きのメッセージを送信し、ios側にいくつかのことを実行するように通知することです.
b.IOS側の操作:ホームページのボタンのクリックを傍受し、ローカルの方法を呼び出して傍受を登録する
#import "ViewController.h"
#import "SecViewController.h"
#import
@interface ViewController (){
WKWebView*webview;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title=@" H5 ";
//1. webview , wkwebview ， webview
WKWebViewConfiguration *config =[[WKWebViewConfiguration alloc]init];
//2. hybridDemo handler , js 。
[config.userContentController addScriptMessageHandler:self name:@"@"Weixin"];
/* js ：window.webkit.messageHandlers.webApp.postMessage(message) webApp name ，
*/
//3. webview
webview=[[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 375, 667) configuration:config ];
[self.view addSubview:webview];
//4. webview
[webview loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle]URLForResource:@"HLT" withExtension:@"htm"]]];
}
メソッド実装
// js
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSDictionary *dic = message.body;
NSString *method = [dic objectForKey:@"method"];
if ([method isEqualToString:@"H5 "]) {
SecViewController *secontoller=[[SecViewController alloc]init];
[self.navigationController pushViewController:secontoller animated:YES];
}
}
js側がメッセージを送信する限り,この方法を実装するとメッセージを受信し,異なるパラメータ値に基づいて異なる方法を実装し,両者のインタラクションを実現することができる.
4.2、OC呼び出しjs
OC js ， - (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
#pragma mark -
- (void)chooseiamge{
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary]){
picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
picker.delegate = self;
[self presentViewController:picker animated:YES completion:nil];
}
}
#pragma mark - OC JS
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
NSLog(@" ");
NSString *urlstring=[info objectForKey:@"UIImagePickerControllerImageURL"];
NSString *javascripstring=[NSString stringWithFormat:@"insertimage('%@')",urlstring];
//oc js
[webview evaluateJavaScript:javascripstring completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"%@",response);
}];
[picker dismissViewControllerAnimated:YES completion:nil];
}
4.3 wkwebviewポップアッププロンプトボックス
wkwebviewがロードするページは、html 5のプロンプトボックス(alter,confirm,prompt)に対して直接表示することはできませんが、必要に応じて以下の3つのエージェント方法を実現し、messageを傍受し、オリジナルのUIで表示し、WKUIdelegateプロトコル、webviewを遵守することに注意する必要があります.UIDelegate=self;
#pragma mark - js alter()
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@" " message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@" " style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
NSLog(@" ");
completionHandler();
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
#pragma mark - js confirm()
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
// DLOG(@"msg = %@ frmae = %@",message,frame);
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@" " message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@" " style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler(NO);
}])];
[alertController addAction:([UIAlertAction actionWithTitle:@" " style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(YES);
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
#pragma mark - js prompt()
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
textField.text = defaultText;
}];
[alertController addAction:([UIAlertAction actionWithTitle:@" " style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(alertController.textFields[0].text?:@"");
}])];
[self presentViewController:alertController animated:YES completion:nil];
}