【Android-混合开发】JSBridge-基础篇

(假装有图)

因项目需要,终究是需要进行混合开发。开心的是,我早就想接触这块了。在我还没有接触之前,我想着这有啥难的。不就是用WebView加载一个链接就完事了吗?(无知的人类)废话不多说,直接进入主题。接下来几篇文章都会是关于与 H5 混合开发的坑坑洼洼。

学习一个新的事物,总是容易毫无头绪去,就应该以建立”问题树“的方式,开展学习。(该思路源于《跃迁》一书,问题树往往比知识网络结构图更容易让人掌握一个知识)

目录

WebView怎么加载H5?

Android 如何调用 H5 中的方法?

调用无返回值的方法

调用有返回值的方法

调用需要传参的方法

H5 如何调用 Android 中的方法?


WebView怎么加载H5?

webView.loadUrl("http://www.example.com")

Android 如何调用 H5 中的方法?

如果要想调用H5中的方法,那么我们要通过 WebSettings 配置 JavaScriptEnabled 的属性

webSettings = webView.settings
webSettings.javaScriptEnabled = true

当你真的这么写到代码中,会发现被 deprecated 了。至于为什么呢?就是说会有安全性的问题。详细的自行查资料了解吧。

调用无返回值的方法

wv_test.loadUrl("JavaScript:show()") //show() 是 js 里面的方法名字

调用有返回值的方法

/******************evaluateJavascript 源码****************************/
/**
* @param script
* @param resultCallback 返回回调,返回值为 String 类型(可以是json格式数据)
*/
public void evaluateJavascript(@NonNull String script,
     @Nullable ValueCallback resultCallback) {
    throw new RuntimeException("Stub!");
}

/******************Android 中具体使用****************************/
//Android 中具体使用
wv_test.evaluateJavascript("sum(1,2)" ) { value ->
    Log.e(TAG,"onReceiveValue value=$value")
}

/*******************JS 中的代码*********************************/
//JS 中的代码
function sum(a,b){
return a+b;
}

调用需要传参的方法

//如果参数是一个常量
wv_test.loadUrl("javascript:func('param')")
//如果参数是一个动态值,请使用转移字符
wv_test.loadUrl("javascript:func(\""param"\")")

 

H5 如何调用 Android 中的方法?

开始会想,这个 H5 你就直接调用就好了呀。

其实,这个步骤不仅仅是 H5 要做的事情,还需要我们配合到 H5 ,他们才能调用到我们写的方法。

首先我们要打开一个通信的通道,可以通过 addJavascriptInterface 的方式打开这个通道。

wv_test.addJavascriptInterface(JsInter(),"Android")

那 JsInter 是什么?"android" 又是什么?

1.JsInter 是一个类,这里面放着给 H5 调用的方法

class JsInter { @JavascriptInterface fun back(): String { return "hello QCoder" } }

2."Android" 这个值,就是上面类的别名,让 H5 那边可以通过 这个别名来调用我们的方法。

//Android 就是别名, back就是我们提供的方法。
window.Android.back();

理论上的H5和Native的交互已经完成了。但是,在实际开发中,要考虑的远远不止这些。不过上面先对混合开发有个整体的认识先,接下来的文章会一步步地走向深渊。

你可能感兴趣的:(混合开发,初识系列,与【Android】的恩怨情仇,android,混合开发)