집 > 기사 > 웹 프론트엔드 > JS가 앱과 어떻게 상호작용하는지 자세히 설명하세요(코드 첨부)

JS가 앱과 어떻게 상호작용하는지 자세히 설명하세요(코드 첨부)

亚连원래의: 2018-05-18 10:13:542682검색

다음은 제가 정리한 JS와 앱 간의 상호 작용 방법입니다. 관심 있는 학생들은 한 번 살펴보세요.

1. H5에 코드 도킹

핵심 사항: 1. 객체 유형의 매개변수 전달, 2. 앱과 상호작용하는 동일한 JS 메소드, 3. 스크립트 메소드가 헤드에 내장되어야 합니다.

<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>
<script>
     // testFunction()
    </script>
    <divonClick="testFunction()">dffddjjjjlj;ljlhhnljkhljhkjf</div>
     <divid="app-root"></div>
    <script type="text/javascript"src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
      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>

2. IOS에서의 코드 도킹

참고: #importdcbd4dc34be872dd53e0bb4d60d07d16는 .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(&#39;Hello Word&#39;)";
    [_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加载内容，否则不
}

3. 위 내용은 제가 컴파일한 것입니다. 여러분 JS와 앱의 상호 작용 방식이 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Js apply() 사용법 자세히 설명 (코드 포함)

간단하고 이해하기 쉬운 자바스크립트 자습 노트

자동으로 실행되는 여러 솔루션(로드) ) 페이지의 js, 자세한 코드 분석

위 내용은 JS가 앱과 어떻게 상호작용하는지 자세히 설명하세요(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Js apply() 사용법에 대한 자세한 설명(코드 포함)다음 기사：Js apply() 사용법에 대한 자세한 설명(코드 포함)