请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    17712677918

    电子邮件

    857020071@qq.com
  • 扫描二维码

    关注微信公众号

推荐阅读
sxadmin 管理员
江苏省苏州市 | 互联网
  • 关注0
  • 粉丝0
  • 帖子133
热议话题
优康服务中心
2020-01-03 0
会员体系 [*]个人服务9.9元/年 [*]企业服务99元/年 [*]拓荒者999元/终生 会员服务个
精选帖子

ios端与js交互(WebView+WKWebView)

[复制链接]
sxadmin 发表于 2021-10-25 10:30:16 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
需求:1点击js登入按钮将用户账号和密码传给移动端
2将地东段的token传给html端
ios端
有3种方法
1:webview的javascriptCore
2:webkit
3:uir拦截
4:第三方库
理论:js与oc相互调用并且传值 我们可以理解成河2边需要送东西的过程 我们需要在js和oc之间搭建一个桥梁而jsexport就是这做桥梁,有了桥梁以后在2端传值我们还需要一个对象(快递员)
就好比现实中js在桥的一段,而移动端在桥的这一边现在他们需要给彼此送东西那么就需要一个快递员(对象)理解了吧,哈哈。好了现在我们来举个例子
第一种方法jscascriptcore
第一步搭建2端之间桥梁javascriptcore
1)导入javascriptCore
Build phass->link binary with libraries
添加头文件
import
2)初始化桥梁
@property(nonatomic,strong)JSContext *jsContext;
在web的webViewDidFinishLoad:代理方法中
self.jsContext = [self.webview valueForKeyPath"documentView.webView.mainFrame.javaScriptContext"];
让js中的快递员搬运工也让oc所持有
self.jsContext[@"objcet"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {    context.exception = exception;    NSLog(@"错误信息:%@",exception);};
3创建快递员其中object就是js端的对象 一般是js端创建好的我们移动端只要引用这个快递员
self.jsContext[@"objcet"] = self;
好了现在桥梁有了搬运工也有了现在我们需要给搬运工一个交通工具(代理方法)
4)创建对象传递工具—摩托车(代理方法) 注意:交通工具是js端定义的,一般都是协商好的 下面的getcall就是快递员需要搭乘的交通工具而callstring这个字符串就是快递
@protocol JSObjcDelegate
  • (void)getcallNSString *)callString;
    @end
5)oc端接收快递不对,接收值
-(void)getcallNSString *)callstring{
}
好了,js端可以给oc传值了 完成了
二:oc给js传值
js端定义个点击事件 call()并且该点击事件被obj对象(这个对象就是oc对象)持有当触发call事件时会调用oc端的call方法
我们这这里可以给js端传值
//oc给js传值:js点击按钮获取oc中的值---也就是点击js端触发call事件时调用occall方法 我们可以在理做原生的push pop等
-(void)call{
// 调用js中的Call1方法JSValue *Callback = self.jsContext[@"Call1"];//传值给web端call1函数字符串[Callback callWithArguments[@"我是oc端传给js端的值测试值:123456789"]];
}
js端call1函数方法
var Call1 = function(str)
{
alert(str);
}
————————————————WKWebView中js交互
WKWebview
和webview差不多只不过我们的桥梁变成了
WKUserContentController *conntentController
这家伙可以充当我们的桥梁作用
而且它有一个方法可以让我oc端直接监听到js端的某一个快递员 其中第一个参数是代理,name:就是js端的快递员名字
[conntentController addScriptMessageHandler:self name"getUserandPwd"];
js端只要在需要传值得函数中加入以下函数
其中getUseranPwd就是需要监听的快递员名字,而postMessage()中是需要传送的值
window.webkit.messageHandlers.getUserandPwd.postMessage(xxxx)
当我们js端的方法被触发而里面的快递员将会被派送出去oc端也监听到了快递员来了接下来就需要签收快递
我们在下面这个方法中来接收快递
其中第一个参数是初始化wkweb时的配置信息可以打印一下,而后面的message就是消息体(快递单里面有快递员名字,电话和快递)其中
message.name—>快递员名字
message.body——>快递(js端传来的值)
如果js端创建了多个快递员那么我们需要根据名字来分别接受快递(处理)
注意:这个方法是关键我们相互传至的关键
-(void)userContentControllerWKUserContentController *)userContentController didReceiveScriptMessageWKScriptMessage *)message{
oc给js传值
例子:oc无法直接给js端触发事件的函数传智,只能当js端点击了某一个按钮给oc端派送一个空的快递 我们oc端监听到了然后传智给js端(调用js端的函数)
[self.web evaluateJavaScript:Call1Result completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"111%@", error);
}];
其中:第一个函数是函数名字 block中显示调用结果
下面的列子其中Call(str)就是js端的某一个函数而str是值
NSString *Call1Result = [NSString stringWithFormat"Call1('%@')",str];
完整代码
初始化web
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
WKUserContentController *conntentController = [[WKUserContentController alloc]init];
//获取js端需要调用的方法 name是js端的方法名getUserandPwd (message.Body>消息体)
// window.webkit.messageHandlers.getUserandPwd.postMessage()
//这个是监听js端点击事件当js端触在这2个事件中添加了上面的方法那么这2个点击事件那么我们oc端就可以知道并且做出回应
[conntentController addScriptMessageHandler:self name"getUserandPwd"];
[conntentController addScriptMessageHandler:self name"CallGet"];
config.userContentController = conntentController;self.web = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];
self.web.UIDelegate = self;
[self.view addSubview:self.web];
在web的这个delegate方法 不然会报错
  • (void)webViewWKWebView *)webView runJavaScriptAlertPanelWithMessageNSString *)message initiatedByFrameWKFrameInfo *)frame completionHandlervoid (^)(void))completionHandler{
    NSLog(@"%@",message);
    //必须要加上这句不然不执行
    completionHandler();

}
监听
-(void)userContentControllerWKUserContentController *)userContentController didReceiveScriptMessageWKScriptMessage *)message{
// //oc代码传给js端
if ([message.name isEqualToString"CallGet"]) {
    [self shareJS];    //js传值给oc} else if ([message.name isEqualToString"getUserandPwd"]){    //接收js端传值    NSString *UserStr = [NSString stringWithFormat"%@",message.body[@"user"]];    NSString *PassWordStr = [NSString stringWithFormat"%@",message.body[@"password"]];        NSLog(@"我是js端传过来的值:用户名%@ 密码:%@",UserStr,PassWordStr);}
}
-(void)shareJS{
NSString *str = @"OC给js端传过去的测试值--随便写吧我爱鹿晗";NSString *Call1Result = [NSString stringWithFormat:@"Call1('%@')",str];//OC调用JS[self.web evaluateJavaScript:Call1Result completionHandler:^(id _Nullable result, NSError * _Nullable error) {    NSLog(@"111%@", error);}];
}
js端代码
登入-传值给client
function copyText() {
    window.webkit.messageHandlers.getUserandPwd.postMessage({user:document.getElementById("user").value,password:document.getElementById("password").value});   

}





上一篇:MySQL存储过程/存储过程与自定义函数的区别
下一篇:photoshop脚本(scripts)使用方法
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

icitu.com 信息谷-icit软硬件产品营销与行业智慧化解决方案实施供需对接空间,信息人家园-信息人之间互助互惠互利的资源整合空间,icit人团结起来帮助人们沟通与建设,icit unite to help people communicating&constructing。
0512-68181818
关注我们
  • 访问移动手机版
  • 官方微信公众号

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc. 优康设计 ( 苏ICP备10066271号-2 )|网站地图