移动端+html=混合开发（1）js调用移动端方法

android写出来的图文混排的页面确实不如html写出来的好看，所以集百家之所长，这种时候还是学习一下混合开发喽！
学了一段时间 html+css+js。简单搭出了html页面，今天要放到移动端，做的一个交互是点击html中的按钮跳转到另一个移动端的页面。记录下简单做法，日后慢慢更新修改。

js写法

这里用了 jQuery-2.1.4.min.js 所以点击事件这样写。

<script type="text/javascript">
    $(function () {
        //判断是ios还是android的方法
        var u = navigator.userAgent.toLowerCase();
        var isApple = /(iphone|ipad|ipod|ios)/i.test(u);
        var isAndroid = /android/i.test(u);
        
        $("#ok").click(function () {
            if (isApple) {
                //apple终端
                window.location = 'close://';
            } else if (isAndroid) {
                //安卓终端
                Mobile.toJump();
            }
        });
    });
</script>

android端写法

    private void initView() {
        webview = (WebView) findViewById(R.id.webview);

        WebSettings settings = webview.getSettings();
        settings.setDomStorageEnabled(true);
        settings.setJavaScriptEnabled(true);
        //禁止使用外部浏览器打开网页
        webview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        webview.loadUrl("http://192.168.1.175:8080/api/toExamTest?");
        webview.addJavascriptInterface(this, "Mobile");
    }

    @JavascriptInterface
    public void toJump() {
        Intent intent = new Intent(this, FinishActivity.class);
        startActivity(intent);
    }

ios端写法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    //JS发起一个假的URL请求，然后拦截这次请求，再做相应的处理️
    NSString *scheme = [request.URL scheme];
    scheme = [scheme lowercaseString];
    
    if ([scheme isEqualToString:@"close"]) {
        NSLog(@"拦截了close操作");
        NextViewController *next = [[NextViewController alloc] init];
        [self.navigationController pushViewController:next animated:YES];
        return NO;
    }
    return YES;
}

注意：

一定要注意的是，如果交互的方法需要传参，直接把参数带上就可以，但是，参数类型一定要一致
例如：js传String类型，移动端也必须以String来接，否则会调起失败

js写法:   Mobile.toJump(“成功”);     

android写法:    public void toJump(String msg) {
                 ...............
            }

android 调用JS 方法

    @JavascriptInterface
    public void openGameRewardVideo(String openAppId,String callBack) {
        this.callBack = callBack;
        //js传给移动端回调方法名
    }

    //合适时机调用
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        //有参数类型的
                        webView.loadUrl("javascript:" + callBack + "(" + choicePay + ")");
                        //无参数
                         webView.loadUrl("javascript:" + callBack+ ")");
                    }
                });