首先,先列举几个常用场景(本人项目实战中经历过的):
1.通过js调用native的组件(例如经典的二维码扫描功能)
2.点击H5界面调用native的控制器,进行跳转
3.在native中编写js代码维护H5中的内容
以上三个差不多就是我用到过的场景.
下面分别开始介绍交互方式,这里我用的是JavaScirptCore + UIWebView:
1.js调用本地组件
js端代码:
/*注解:这里采用nativeObj.goSomeWhere()的方式进行跳转,主要是为了配合安卓端的交互方式(ios和安卓共用一套js代码),
nativeObj是一个统一的对象,代表原生的内容,通过点语法调用方法跳转,后面会说到如何产生这个公用的对象*/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<script type="text/javascript">
//回调支付的结果
function NativePayCallback(result) {
console.log("NativePayCallback------"+result);
document.getElementById("native_info").innerHTML = result.code;
}
//回调登录结果
function NativeLoginCallback(result) {
console.log("NativeLoginCallback------"+result);
document.getElementById("native_info").innerHTML = result;
}
//回调扫码结果
function scanBarcodeCallback(result) {
console.log("scanBarcodeCallback------"+result);
document.getElementById("native_info").innerHTML = result;
}
//退后
function goBackNative() {
nativeObj.goBackNative('');
}
//跳转到支付界面
function goNativePay() {
var jsonObj = {
totalFee:"3.32",
from:"OtherAPP",
orderNum:"xxxxxxxxxx"
};
var jsonStr=JSON.stringify(jsonObj);
nativeObj.goNativePay(jsonStr);
}
//跳转到登录页
function goNativeLogin() {
nativeObj.goNativeLogin('');
}
//跳转到扫码页
function scanBarcode() {
nativeObj.scanBarcode('');
}
//得到用户信息
function getNativeUserInfo(){
var userInfo=nativeObj.getNativeUserInfo('');
console.log("getNativeUserInfo------"+userInfo);
var obj = JSON.parse(userInfo);
console.log(obj.code + ", " + obj.data+", " + obj.msg);
document.getElementById("native_info").innerHTML = obj.code + ", " + obj.data+", " + obj.msg;
}
</script>
<body>
<input type="button" value="关闭activity" onClick="goBackNative()"/>
<input type="button" value="支付" onClick="goNativePay()"/>
<input type="button" value="登录" onClick="goNativeLogin()"/>
<input type="button" value="扫二维码" onClick="scanBarcode()"/>
<input type="button" value="获取个人信息" onClick="getNativeUserInfo()"/>
<text id="native_info"></text>
</body>
</html>
native原生端代码,说明一下,如果是采用nativeObj.goSomeWhere的方式进行交互,那么我们需要用到JavaScriptCore中的JSExport协议(具体用法我不赘述),直接上代码:
//这里我是自己创建了一个TPNativeFunctionTool的工具类,用于统一处理交互事件,
继承了JSExport协议,在协议中声明js中的对应方法
@protocol myJSExports <JSExport>
//退后
- (void)goBackNative;
//跳转支付界面,json是传递过来的支付参数
- (void)goNativePay:(id)json;
//跳转登录界面
- (void)goNativeLogin;
//跳转扫码界面
- (void)scanBarcode;
//获取本地用户信息
- (void)getNativeUserInfo;
//H5界面跳转到本地控制器,通过url进行跳转
- (void)gotoNativeView:(id)url;
@end
然后在TPNativeFunctionTool.m文件中实现这些方法
- (void)goBackNative{
[self.vc.navigationController popViewControllerAnimated:YES];
}
- (void)goNativePay:(id)json{
ThirdPayViewController *payVc = [[ThirdPayViewController alloc] init];
payVc.orderNum = @"XXXXXXXXXXXXX";
payVc.OrderType = @"0";
[self.vc.navigationController pushViewController:payVc animated:YES];
}
- (void)goNativeLogin{
LoginViewController *loginVc = [[LoginViewController alloc] init];
[self.vc.navigationController pushViewController:loginVc animated:YES];
}
- (void)scanBarcode{
TPH5ScanQRCodeViewController *qrVc = [[TPH5ScanQRCodeViewController alloc] init];
qrVc.style = [self getScanStyle];
tpWeakSelf
//回调扫描结果
qrVc.result = ^(NSString *result){
weakSelf.QRCodeResult = result;
};
[self.vc.navigationController pushViewController:qrVc animated:YES];
}
- (void)getNativeUserInfo{
}
native控制器端的代码:
(1)生成一个js环境:
/*
*懒加载一个js环境
*/
- (JSContext *)context{
if (!_context) {
_context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}
return _context;
}
(2)webView的webViewDidFinishLoad代理方法中,关联我们的native对象,注意点是必须关联到才能进行交互
/*需要关联的类*/
- (TPNativeFunctionTool *)native{
if (!_native) {
_native = [[TPNativeFunctionTool alloc] initWithVc:self];
}
return _native;
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//这个对象就是我们遵守了JSExport协议的那个类
self.context[@"nativeObj"] = self.native;
这样,我们就已经实现了最基本的跳转交互了,是不是很神奇,我也觉得.但我们如何将参数回调给H5呢?这时我们需要实现如下方法(只举一个例子,后面都大同小异):
//回调二维码扫描参数
- (void)getQRCode{
//通过context获得js中scanBarcodeCallback方法的环境
//JSValue可以用来获取js中的方法
JSValue *func = self.context[@"scanBarcodeCallback"];
//回调的二维码参数
NSString *result = self.native.QRCodeResult;
if (result == nil) return;
//回调的参数格式
NSString *code = @"1";
NSDictionary *data = @{@"data":result};
NSString *msg = @"";
NSDictionary *resultDict = @{@"code":code,@"data":data,@"msg":msg};
//将字典转化成json串,进行回调
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:resultDict options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonResult = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
//通过callWithArguments方法来进行参数回调即可
[func callWithArguments:@[jsonResult]];
}
2.通过url跳转到本地控制器
这里我用的是DCURLRoutter,来进行url的跳转,详情请点击查看.
项目中的代码:
/*注释:传入一个url,url包含了一个协议头和对应控制器的映射参数,
经过DCLURLRouter的解析后,转换成对应的控制器,然后进行跳转.例如url是"native://login"==>"LoginViewController"这个控制器,我们只需要传入"native://login"就能进行对应的跳转*/
//这里我封装了它的方法
+ (void)PushNativeViewController:(NSString *)url animated:(BOOL)Yes{
[DCURLRouter pushURLString:url animated:YES];
}
3.在native中编写js代码,这里我的实用场景是,服务器返回的HTML中图片尺寸过大, 于是在native中添加js代码进行规范
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSString *js = @"function imgAutoFit() { \
var imgs = document.getElementsByTagName('img'); \
for (var i = 0; i < imgs.length; ++i) {\
var img = imgs[i]; \
img.style.maxWidth = %f; \
} \
}";
js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];
[webView stringByEvaluatingJavaScriptFromString:js];
[webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];
}
其实还尝试过WKWebView的交互方式,可项目中不利于和安卓的统一,就放弃了,那种方式也是一种非常简单明了的交互方式,有兴趣的同学可以自行去研究下.
