(假装有图)
因项目需要,终究是需要进行混合开发。开心的是,我早就想接触这块了。在我还没有接触之前,我想着这有啥难的。不就是用WebView加载一个链接就完事了吗?(无知的人类)废话不多说,直接进入主题。接下来几篇文章都会是关于与 H5 混合开发的坑坑洼洼。
学习一个新的事物,总是容易毫无头绪去,就应该以建立”问题树“的方式,开展学习。(该思路源于《跃迁》一书,问题树往往比知识网络结构图更容易让人掌握一个知识)
目录
WebView怎么加载H5?
Android 如何调用 H5 中的方法?
调用无返回值的方法
调用有返回值的方法
调用需要传参的方法
H5 如何调用 Android 中的方法?
webView.loadUrl("http://www.example.com")
如果要想调用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 你就直接调用就好了呀。
其实,这个步骤不仅仅是 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的交互已经完成了。但是,在实际开发中,要考虑的远远不止这些。不过上面先对混合开发有个整体的认识先,接下来的文章会一步步地走向深渊。