1.加载html
private void initView() {
WebSettings webSettings1 = webview.getSettings();
webSettings1.setJavaScriptEnabled(true);
webSettings1.setCacheMode(WebSettings.LOAD_NO_CACHE); //关闭webview中缓存
webview.getSettings().setUseWideViewPort(true);
webSettings1.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
webSettings1.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
webSettings1.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings1.setDisplayZoomControls(false); //隐藏原生的缩放控件
webview.addJavascriptInterface(this, "$App");//添加js监听 这样html就能调用客户端
webview.loadUrl("file:///android_asset/echart/xs_tab1.html");
webview.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
showProgress("");
}
@Override
public void onPageFinished(WebView view, String url) {
dismissProgress();
postData1(); //向vue页面传值
}
});
}
//向vue页面传值
public void postData1() {
showProgress("");
Map<String, String> params = new HashMap<>();
params.put("pid", data.getId() + "");
MyOkHttp.get().post(mContext, Api.nkgxmjdgl_jh, params, new GsonResponseHandler<JHBean>() {
@Override
public void onSuccess(int statusCode, JHBean response) {
dismissProgress();
if (response.isSuccess()) {
if (response.getData().size() > 0) {
Gson g = new Gson();
String value = g.toJson(response.getData());
webview.loadUrl("javascript:getAndroidValue('" + value + "')");
} else {
String value = "";
webview.loadUrl("javascript:getAndroidValue('" + value + "')");
}
} else {
String value = "";
webview.loadUrl("javascript:getAndroidValue('" + value + "')");
}
}
@Override
public void onFailure(int statusCode, String error_msg) {
dismissProgress();
}
});
}
//接收 vue 点击事件传过来的值
@JavascriptInterface
public void getDataFormVue(String msg) {
//做原生操作
Intent intent = new Intent(mContext, ListActivity.class);
intent.putExtra("menuName", msg);
startActivity(intent);
}
2.vue 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-table :data="tableData" border style="width: 100%" @row-click="clickData">
<el-table-column prop="name" label="企业类型" align="center">
</el-table-column>
<el-table-column prop="num1" label="开票金额(万元)" align="center">
</el-table-column>
<el-table-column prop="num2" label="占外资企业比重" align="center">
</el-table-column>
</el-table>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
created() {
// 把本地方法挂载到window中
window.getAndroidValue = this.getAndroidValue
},
data: {
msg: '',
token: '',
tableData: [{
"id": 21,
"name": "上市企业",
"num1": "838.81",
"num2": "100%"
}, {
"id": 22,
"name": "省级外资跨国公司地区总部或功能性机构",
"num1": "838.81",
"num2": "100%"
}, {
"id": 23,
"name": "省专精特新“小巨人”企业",
"num1": "838.81",
"num2": "100%"
}, {
"id": 24,
"name": "市专精特新“小巨人”企业",
"num1": "838.81",
"num2": "100%"
},
{
"id": 24,
"name": "省级示范智能车间",
"num1": "838.81",
"num2": "100%"
},
{
"id": 24,
"name": "市级示范智能车间",
"num1": "838.81",
"num2": "100%"
},
{
"id": 24,
"name": "省级工程研究中心（发改）",
"num1": "838.81",
"num2": "100%"
},
{
"id": 24,
"name": "省级企业技术中心（工信）",
"num1": "838.81",
"num2": "100%"
},
{
"id": 24,
"name": "市级企业技术中心（工信）",
"num1": "838.81",
"num2": "100%"
},
{
"id": 24,
"name": "省星级上云企业",
"num1": "838.81",
"num2": "100%"
}
]
},
methods: {
// 接收Android传过来的值方法
getAndroidValue(value) {
this.tableData = JSON.parse(value);
},
clickData(row, event, column) {
console.log(row.name)
this.toAndroid(row)
},
// 向Android传值方法
toAndroid(row) {
$App.getDataFormVue(row.name)
},
},
})
</script>
</html>
