vue与安卓的交互

vue调用安卓方法xml：<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_p...

dybzy

4078人浏览 · 2019-06-19 17:29:28

dybzy · 2019-06-19 17:29:28 发布

vue调用安卓方法

xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:id="@+id/linearlayout"
    android:layout_height="match_parent">
    <include layout="@layout/layout_title"></include>
 
<WebView
    android:id="@+id/wv_location"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></WebView>
 
</LinearLayout>

初始化WebView之后就开始加载html以及几个关键代码：

   	webView.setWebChromeClient(new WebChromeClient() );
    webView.getSettings().setJavaScriptEnabled(true);   //开启JavaScript支持

    // 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法
    webView.addJavascriptInterface(new JSInterface1(), "baobao");
    webView.setWebViewClient(new MyWebViewClient());
    webView.loadUrl("file:///android_asset/PriseLocation.html");

webView.setWebChromeClient(new WebChromeClient());必不可少，它是解决js中alert不弹出的问题和其它内容的渲染问题。
关键的两行代码说一下，首先是js调用原生的方法：webView.addJavascriptInterface(new JSInterface1(),“baobao”);JSInterface1内部类中的方法都是提供给js调用的，“baobao”相当于一个“id”，用于标记原生的对象，被html用来调用原生的方法，就相当于引用一样。另一行重要的代码就是webView.loadUrl(“javascript: showMsg()”);loadUrl方法内的字符串就是调用js中的方法。

JSInterface1：

class JSInterface1 {

    //JavaScript调用此方法
    @JavascriptInterface

    public void callAndroidMethod(int a, float b, String c, boolean d) {
        if (d) {
            String strMessage = "a+b+c=" + a + b + c;
            T.showThort(mContext, strMessage);

//                showPopupWindowIntroDestine();


        }
    }

    @JavascriptInterface
    public void callLocation() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                //获取Location
                /**
                 * 获取地理位置
                 */
                String locaLocation = getLocaLocation();
            }
        });


    }

    @JavascriptInterface
    public void callAlert(final String info) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.getAlert(info, 0.3f);
            }
        });

    }

    /**
     * @param info
     */
    @JavascriptInterface
    public void callConfirm(final String info) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.seConfirmButtonText("确认", "取消");
                popUtils.getConfirm(info, 0.3f, new PopAlertStyleUtils.CallBackLeftRightButton() {
                    @Override
                    public void rightButton(View v) {
                        popUtils.popDismiss();
                    }

                    @Override
                    public void leftButton(View v) {

                        T.showThort(mContext, "我是左边按钮");
                    }
                });
            }
        });

    }

    @JavascriptInterface
    public void callPrompt(final String info) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.setLeftRightBtText("继续", "不玩了");
                popUtils.getPromptWindow(info, 0.3f, new PopAlertStyleUtils.CallBackPrompt() {
                    @Override
                    public void rightButton(View v, EditText editText) {
                        popUtils.popDismiss();
                    }

                    @Override
                    public void leftButton(View v, EditText editText) {
                        T.showThort(mContext, "请继续玩吧-----" + editText.getText().toString());
                    }
                });
            }
        });
    }


    @JavascriptInterface
    public void callLoading(final String info) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.getLoading(info, 0.3f);
                new Handler() {
                }.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        popUtils.popDismiss();
                    }
                }, 2000);
            }
        });
    }


    @JavascriptInterface
    public void callToast(final String info) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.getToast(info, 1.0f);
                new Handler() {
                }.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        popUtils.popDismiss();
                    }
                }, 2000);
            }
        });
    }

    @JavascriptInterface
    public void callActionsheet() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.setTitle("Who wins");
                nameList = new ArrayList<String>();
                nameList.add("张赛宝");
                nameList.add("小黄");
                nameList.add("张绍均");
                nameList.add("杨峰");

                popUtils.getActionsheet(0.3f, new PopAlertStyleUtils.CallBackActionSheet() {
                    @Override
                    public void backListView(ListView listView, Button button) {

                        button.setText("确定");
                        NameListAdapter adapter = new NameListAdapter(mContext, nameList);
                        listView.setAdapter(adapter);
                        button.setOnClickListener(new ButtonOnclick());
                        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                            @Override
                            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                                webView.loadUrl("javascript: showMsg()");
                            }
                        });
                    }
                });
            }
        });
    }

    @JavascriptInterface
    public void callChosen() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.setTitle("Who wins");
                final List<String> choseList = new ArrayList<>();
                choseList.add("张赛宝");
                choseList.add("小黄");
                choseList.add("张绍均");
                choseList.add("杨峰");
                popUtils.getChosen(0.3f, new PopAlertStyleUtils.CallBackChosen() {
                    @Override
                    public void backChosen(ListView listView) {
                        final ChosenAdapter adapter = new ChosenAdapter(mContext, choseList);
                        listView.setAdapter(adapter);
                        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                            @Override
                            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                                adapter.setSelectNum(position);
                                adapter.notifyDataSetChanged();
                            }
                        });
                    }
                });
            }
        });
    }

    @JavascriptInterface
    public void callModal() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.setTitle("2.5版本更新");
                popUtils.setLeftRightBtText("了解更多", "知道了");
                popUtils.getModal("1.功能更新2.功能更新", 0.3f, new PopAlertStyleUtils.CallBackModal() {
                    @Override
                    public void rightButton(View v) {
                        T.showThort(mContext, "我是左边按钮");
                    }

                    @Override
                    public void leftButton(View v) {
                        T.showThort(mContext, "我是右边按钮");
                    }

                    @Override
                    public void initImag(ImageView imageView) {
                        Glide.with(mContext).load(R.mipmap.bg_banner).transform(new GlideRoundTransform(mContext, 15)).into(imageView);
                    }
                });
            }
        });
    }

    @JavascriptInterface
    public void callTimepicker() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.getDatePicker();
            }
        });
    }

    @JavascriptInterface
    public void callDatepicker() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final PopAlertStyleUtils popUtils = new PopAlertStyleUtils(mContext, parentsView);
                popUtils.getTimePicker();
            }
        });
    }

    @JavascriptInterface
    public void btBack() {//返回
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                finish();
            }
        });

    }

    @JavascriptInterface
    public void btHelp() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent(mContext, HelpDemoActivity.class);
                startActivity(intent);
            }
        });
    }

    @JavascriptInterface
    public void setTitle(final String title) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                tvTitle.setText(title);
            }
        });
    }
}

Html代码，主要就是通过定义的引用 baobao.XXX()调用原生中的方法，可以传递参数。

    <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
 
<script>
				 callAndroidMethod(){
			     baobao.callAndroidMethod(100,100,'ccc',true)
			    },
   </script>
</head>
<body>
<div className="page-dialog" >
<button  class="btn"@Click="callAndroidMethod">我是弹窗按钮</button></div>
   
</div>
 
<div className="page-dialog">
 
    <button class="btn" onClick="baobao.btBack()">返回页面</button>
<button class="btn" onClick="baobao.btHelp()">帮助</button>
</div>
 

 
</body>
<style>
    .btn{background:#00acff; color:#fff; border-radius:0.1em; width:100%;border:0;margin-top:0.5em;}
</style>
<style>
    .title{margin-top:0.5em;}
</style>
</html>

安卓调vue

	vue写法
	created() {
    //Vue的方法给原生调用，则需要把方法挂在Window下面
    window.getData = this.getData;
	},
	methods: {
	  getData(params) {
	    //params: 原生调用Vue时传值（params）给Vue
	    console.log("得到原生传值结果:" + params);
	    var dic = {
	        'name': "vicky"
	    };
	    return dic; //回调给原生，可写可不写
	  },
	}

安卓写法

	String toVueSting = "vickylizy";
	 
	webView.loadUrl("javascript:getDataFromNative('"+toVueSting+"')");
	or：
	webView.evaluateJavascript("javascript:getDataFromNative('" + toVueSting + "')", new ValueCallback<String>() {
	    @Override
	    public void onReceiveValue(String s) {
	        //此方法可以得到回调值
	    }

参考文章
https://blog.csdn.net/vickylizy/article/details/85098857
https://blog.csdn.net/vickylizy/article/details/85098857

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}$/, //不连续的两位字母// /^