Android 与Vue 页面交互

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 params = new HashMap();
        params.put("pid", data.getId() + "");

        MyOkHttp.get().post(mContext, Api.nkgxmjdgl_jh, params, new GsonResponseHandler() {

            @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>

	
		
		
		
		
		
		
		
		
	
	
		
			
				
				
				
				
				
				
			
		
	

	
		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)
				},
			},
		})