Android 与Vue 页面交互

1.加载htmlprivate void initView() {WebSettings webSettings1 = webview.getSettings();webSettings1.setJavaScriptEnabled(true);webSettings1.setCacheMode(WebSettings.LOAD_NO_CACHE); //关闭webview中缓存webview.ge

cmmboy1990

3493人浏览 · 2022-05-18 11:15:14

cmmboy1990 · 2022-05-18 11:15:14 发布

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>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^