JS和app交互

最新推荐文章于 2022-07-01 16:17:05 发布

木易哥哥

最新推荐文章于 2022-07-01 16:17:05 发布

阅读量6.1k

点赞数 1

本文链接：https://blog.csdn.net/manyxh/article/details/52118811

版权

智者精选，每天获取励志认知能量 www.5izhjx.com

一、 H5上代码的对接

要点：1.Object类型的传参、2.同一个与app交互的JS方法、3.脚本方法需内嵌到head里面。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<script type="text/javascript">

var share = JSON.stringify({"title":"Migi000",

"desc":"简书",

"shareUrl":"http://www.jianshu.com/p/f896d73c670a"

});

//IOS

function startFunction(share){

window.android.startFunction(share)//android

}

</script>

// testFunction()

</script>

<divonClick="testFunction()">dffddjjjjlj;ljlhhnljkhljhkjf</div>

<divid="app-root"></div>

var _hmt = _hmt || [];(function() {var hm= document.createElement("script");hm.src ="//hm.baidu.com/hm.js?f84dde8c08e5b9c97f9c39e2fcb4d658";var s =document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();

</script>

<scripttype="text/javascript">

function loadURL(url)

{

var iFrame;

iFrame =document.createElement("iframe");

iFrame.setAttribute("src", url);

iFrame.setAttribute("style","display:none;");

iFrame.setAttribute("height", "0px");

iFrame.setAttribute("width", "0px");

iFrame.setAttribute("frameborder", "0");

document.body.appendChild(iFrame);

// 发起请求后这个iFrame就没用了，所以把它从 dom上移除掉

iFrame.parentNode.removeChild(iFrame);

iFrame = null;

}

function testFunction(share)

{

loadURL("testfunction://?title=分享的标题&content=分享的内容&url=链接地址&imagePath=图片地址");

}

var share =JSON.stringify({"title": "分享的标题","content":"分享的内容","url":"http://www.jianshu.com/p/f896d73c670a"});

testFunction(share) </script>

</head>

<body>

<br/>

<h1>Objective-C和JavaScript交互的那些事 </h1>

<br/>

<input type="button" value="Share" onClick="startFunction(share)" >点击调用原生代码并传递参数</a>

</body>

</html>

二、 IOS上的代码对接

注意点：#import<JavaScriptCore/JavaScriptCore.h> 需放在.h文件中

#import"ViewController.h"

#import<JavaScriptCore/JavaScriptCore.h>

@interfaceViewController ()<UIWebViewDelegate>@property (nonatomic)UIWebView*webView;

@property(nonatomic)JSContext *jsContext;

@property(nonnull,strong) UIButton *btn;

@end

@implementationViewController

-(void)viewDidLoad{

[super viewDidLoad];

self.webView = [[UIWebViewalloc]initWithFrame:self.view.bounds];

self.webView.delegate = self;

[self.view addSubview:_webView];

NSString *str = [[NSBundle mainBundle]pathForResource:@"migi" ofType:@"html"];

[self.webView loadRequest:[NSURLRequestrequestWithURL:[NSURL fileURLWithPath:@"f"]]];

// 在上面添加一个按钮，实现oc端控制h5实现弹alert方法框

self.btn = [[UIButton alloc]initWithFrame:CGRectMake(100,400,100, 40)];

self.btn.backgroundColor = [UIColorredColor];

[self.btn addTarget:selfaction:@selector(showAlert) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:self.btn];

}

-(void)showAlert

{

//要将script的alert()方法转化为string类型

NSString *alertJs=@"alert('Hello Word')";

[_jsContext evaluateScript:alertJs];

}

-(void)webViewDidFinishLoad:(UIWebView*)webView{

_jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

_jsContext[@"startFunction"] =^(id obj){

这里通过block回调从而获得h5传来的json数据

/*block中捕获JSContexts

我们知道block会默认强引用它所捕获的对象，如下代码所示，如果block中直接使用context也会造成循环引用，这使用我们最好采用[JSContext currentContext]来获取当前的JSContext:

[JSContext currentContext];

NSData *data = [(NSString *)objdataUsingEncoding:NSUTF8StringEncoding ];

NSDictionary *dict =[NSJSONSerialization JSONObjectWithData:dataoptions:NSJSONReadingMutableContainers error:nil];

NSLog(@"data %@ ====== ShareUrl %@",obj,dict[@"shareUrl"]);

};

_jsContext.exceptionHandler = ^(JSContext*context, JSValue *exceptionValue) {

context.exception = exceptionValue;

//比如把js中的方法名改掉，OC找不到相应方法，这里就会打印异常信息

NSLog(@"异常信息：%@", exceptionValue);

};

_jsContext[@"testFunction"] =^(id obj){

//这里通过block回调从而获得h5传来的json数据

[JSContext currentContext];

NSData *data = [(NSString *)objdataUsingEncoding:NSUTF8StringEncoding ];

NSDictionary *dict = [NSJSONSerializationJSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];

// NSLog(@" data %@ ====== ShareUrl%@",obj,dict[@"shareUrl"]);

UIAlertView *alertView = [[UIAlertViewalloc] initWithTitle:dict[@"title"]message:dict[@"content"]delegate:nilcancelButtonTitle:@"cancel"otherButtonTitles:nil,nil];

[alertView show];

};

}

-(BOOL)webView:(UIWebView *)webViewshouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

{

NSURL * url = [requestURL];

//NSLog(@"scheme信息：%@", [urlscheme]);

if ([[url scheme] isEqualToString:@"testfunction"])

{

NSArray *params =[url.querycomponentsSeparatedByString:@"&"];

NSMutableDictionary *tempDic = [NSMutableDictionarydictionary];

for (NSString *paramStrin params) {

NSArray *dicArray = [paramStrcomponentsSeparatedByString:@"="];

if (dicArray.count >1) {

NSString *decodeValue =[dicArray[1]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

[tempDic setObject:decodeValueforKey:dicArray[0]];

}

UIAlertView *alertView = [[UIAlertViewalloc] initWithTitle:tempDic[@"title"]message:tempDic[@"content"]delegate:selfcancelButtonTitle:@"收到"otherButtonTitles:nil];

[alertView show];

NSLog(@"tempDic:%@",tempDic);

return NO;

}

return true; //为yes加载内容，否则不

}

三、 Android代码上的交互

mWebH5.addJavascriptInterface(new MyJavaScriptInterface(this), "android");
mWebH5.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        //返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器
        view.loadUrl(url);
        return true;
    }
});

@JavascriptInterface
publicvoid startFunction(String json){
    if(SharedPrefs.getInstance().getUserAccessToken()==null){

    Gson gson=new Gson();
    finalShareLinkBean shareLinkBean =gson.fromJson(json, ShareLinkBean.class);
    LogUtils.i("test",json);
    mActivity.runOnUiThread(new Runnable() {
        @Override
        publicvoid run() {
            //跑相关逻辑
        }
    });

}

木易哥哥

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JS和app交互

智者精选，每天获取励志认知能量 www.5izhjx.com一、 H5上代码的对接要点：1.Object类型的传参、2.同一个与app交互的JS方法、3.脚本方法需内嵌到head里面。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF...
复制链接

扫一扫