H5 调用原生
假设1个场景,用户点击1个活动baner,通知原生 以一个新的界面 打开1个外部活动h5界面
和上面类似,我们也可以在- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
通过监听 url 变化来实现
原生主要逻辑
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSString *str = navigationAction.request.URL.absoluteString;
if([str hasPrefix:@"showH5"]){
//打开h5
}
decisionHandler(WKNavigationActionPolicyAllow);;
}
h5 主要逻辑
<div>
<p onClick={()=>{
window.location.href = "showH5://data=1"
}}>打开照相机
</p>
</div>
我们也可以这么做
第一步 原生 注册 监听方法 showH5
///初始化 webview,设置配置项
-(WKWebView*)webView{
if (!_webView) {
_webView = [[WKWebView alloc] initWithFrame:self.bounds configuration:self.registConfiguration];
_webView.UIDelegate = self;
_webView.navigationDelegate = self;
if (@available(iOS 11.0, *)) {
_webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {
}
// 是否允许手势左滑返回上一级, 类似导航控制的左滑返回
_webView.allowsBackForwardNavigationGestures = YES;
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://10.100.12.228:8088/#/"]
cachePolicy:NSURLRequestReloadIgnoringLocalAndRemoteCacheData
timeoutInterval:30];
[_webView loadRequest:request];
}
return _webView;
}
- (WKWebViewConfiguration *)registConfiguration{
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = [WKUserContentController new];
//注入js 方法
NSArray *methodArr = @[@"showH5"];//这里要事先注入 和 h5 约定的方法名称
[methodArr enumerateObjectsUsingBlock:^(NSString *methodStr, NSUInteger idx, BOOL * _Nonnull stop) {
[configuration.userContentController addScriptMessageHandler:self name:methodStr];
}];
WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
configuration.preferences = preferences;
return configuration;
}
第二步 H5 调用 和原生约定好的方法 showH5,h5 处理的时候要区分 iOS 和 android,下面 只是考虑iOS
if(window.webkit){
window.webkit.messageHandlers.showH5.postMessage(JSON.stringify({"url":"www.baidu.com"}));
}
第三步 原生在 - (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message
进行监听
// 监听h5 调用原生
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
NSString *jsonString= message.body;
NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];
NSError *err;
NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:jsonData
options:NSJSONReadingMutableContainers
error:&err];
if ([message.name isEqualToString:@"showH5"]){//在新界面打开h5
NSLog(@"%@",message.body);
}
}
原生调用H5
和上面类似,假设1个场景 通知H5 刷新用户token updatetoken 是和前端H5 约定好的 通信方法,123是传递的数据,一般 以 json 字符串传递 原生主要逻辑
NSString *str = @"updatetoken('123')";
[self.webView evaluateJavaScript:str completionHandler:^(id _Nullable complete, NSError * _Nullable error) {
if (complete) {
}
}];
H5主要逻辑 需要在windows 上 绑定方法
window.updatetoken =function (str) {
//原生通知 h5 ,用户信息 token 更新
window.data = str;
}