Native调用H5
-
双方暂约定方法名称为
scanResult('参数')
该方法要求传入一个参数,为扫描结果。Native调用代码如下:mWebView.evaluateJavascript("javascript:scanResult('扫描结果')", s -> { Log.e("xxx", "返回了点啥啊"); });
其中javascript:scanResult('扫描结果')", s -> {Log.e("xxx", "返回了点啥啊")
,javascript
为固定前缀,scanResult
为Vue/Js提供的方法,第二个参数为lamd表达式完整写法如下
webView.evaluateJavascript("javascript:scanResult('扫描结果')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
//处理逻辑
}
});
若要将Vue/Js中方法暴露给Native调用需要在Vue/Js中使用mounted
组件注入方法具体使用方法如下
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
},
//Native调用Vue:第二步:注入方法
mounted() {
window.scanResult = this.scanResult
},
//Native调用Vue:第一步:创建方法
methods: {
scanResult (str) {
alert('zz')
return "js调用成功"
}
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
setTimeout(
function(){
vm.counter += 20;
},10000
);
</script>
至此Native则可以通过evaluateJavascript方法调用Vue/Js中方法
H5调用Native
-
点击H5某个按钮时调用该放方法,约定方法名为
getCamera()
,由H5主动调用,无参数要求,调用格式为window.Android.getCamera()
,格式示意如下:交互所有操作要求挂在到window
下,Android
为mWebView.addJavascriptInterface(new JSInterface(), "Android");
注入的对象,getCamera()
为对象中方法,完成代码如下private class JSInterface { @JavascriptInterface public void preShare(String openUrl, String shareTile, String shareDetails, String shareNetImg) { Log.e("xxx", "xxxx" + openUrl + shareDetails + shareDetails); } /* 点击H5某个按钮时调用该放方法,由H5主动调用,无参数要求调用格式为window.Android.getCamera(),格式示意如下 交互所有操作要求挂在到window下,Android为" mWebView.addJavascriptInterface(new JSInterface(), "Android");"注入的对象,getCamera()为对象中方法 */ @JavascriptInterface public void getCamera() { requestCamera(); } @JavascriptInterface public void test() { Toast.makeText(BrowserActivity.this, "有这么难吗?", Toast.LENGTH_SHORT).show(); } }
Native再通过mWebView.addJavascriptInterface(new JSInterface(), "Android");
注入,则该Native接口中方法均可在H5中调用。
以上所有内容成立的前提是WebView进行了JS支持等设置。
调用示例
<div id="app" @click="window.Android.getCamera()" style="font-size:25px;">
<p style="font-size:25px;">计数器: {{ counter }}</p>
<button>点我</button>
</div>
额 好像没法上传文件呢(⊙o⊙)?\