首頁 > 文章 > web前端 > 詳細講解JS和app互動的方式（程式碼附上）

詳細講解JS和app互動的方式（程式碼附上）

亚连原創: 2018-05-18 10:13:542734瀏覽

以下是我給大家整理的JS和app互動的方式，有興趣的同學可以去看看。

一、 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>
<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>

二、 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加载内容，否则不
}

## 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() {
            //跑相关逻辑
        }
    });
 }

上面是我整理給大家的JS和app互動的方式，希望今後會對大家有幫助。

詳細講解Js apply()使用（含程式碼）

簡單易懂，javascript自學學習筆記

在頁面自動執行（載入）js的幾個解決方法，詳細程式碼解析

以上是詳細講解JS和app互動的方式（程式碼附上）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳細講解Js apply()使用（含代碼）下一篇：詳細講解Js apply()使用（含代碼）

看更多

詳細講解JS和app互動的方式（程式碼附上 ）

相關文章

詳細講解JS和app互動的方式（程式碼附上）