android 使用控件webView 与 vue交互

     WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页，实现WebView有以下两种不同的方法：

   第一种方法：webview.loadUrl("http://www.baidu.com");远程加载网站内容，前提配置mainfest.xml文件的InterNet 权限，很easy！

   在xml文件添加：  <uses-permission android:name="android.permission.INTERNET"/> 对于这个权限，不需要任何权限判断（特指是       android 手机 6.0以上 关于手机隐私的权限 需要都需要动态申请权限），关于动态权限申请，自行百度，搜不到算我输,其中使用相关的库：

           AndPermission 和 RxPermission 都是GitHub 开源不错的库。

    第二种方法： 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中。

   这个访问本地 资源静态Html文件 就用不到那个internet 权限了。 不过现在，多数开发都是，webView与远程服务端的h5交互。

   LooK！具体交互如下：

    1.加载远程文件  myWebView.loadUrl("http://xxxxxx.com"); 前端使用vue项目。

    测试调用 html相关代码片段：

     

    

接下来前端 调用我们在来调用 我们@javaScript 注解标注的方法

  // 打开手机地图
      
      
       openBaiDu(){
        window. AndroidWebView.openBaiDuMap();
      },
       
       // 
       openGaoDe(){
          window. AndroidWebView.openGaoDeMap();
         },

       //获取 手机通讯录联系人信息

      getContacts(){
          var str = window.AndroidWebView.showInfoFromJs();
         document.getElementById("content").innerHTML =str; // 为了在前端页面测试 输出下

        },

       // 拨打电话

        callPhone(){
        // 从前端传入 一个号码做参数。
        window.AndroidWebView.call(phoneNum);
      },

  

  然后再看部分java 代码：

   在主界面 MainActivity

   初始化webView控件时候 构造Js 与java 交互的代理对象。

   ContactsInterface contactsInterface = new ContactsInterface(this, contacts）;

    myWebview.addJavascriptInterface(contactsInterface, "AndroidWebView"); // 第二个参数 字符串随便命名，代指java的实体类在前面Js

    里面调用的那个对象。

 public class ContactsInterface {

   private Context mContext;

   private String contacts;

   

  public ContactsInterface（Context mContext,String contacts）{

     this.mContext = mContext;

     this.contacts = contacts;

  }

   /*
    *  将手机通讯录联系人 传递到前端
    */
    @JavascriptInterface
    public String showInfoFromJs() {

     // 将获取联系人的数据 提前获取 ，返回给前端。
        return contacts;
    }

   /*
     * 打开百度地图 第三方打开地图
     */
    @JavascriptInterface
    public void openBaiDuMap(String city) {
        Toast.makeText(mContext, "百度导航", Toast.LENGTH_SHORT).show();
        if (isInstallByread("com.baidu.BaiduMap")) {
            Intent i1 = new Intent();
            Log.e("city---", city);
            String url = "baidumap://map/navi?query=" + city;
            Log.e("url---》", url);
            i1.setData(Uri.parse(url));
            mContext.startActivity(i1);
        } else {
            Toast.makeText(mContext, "请安装百度地图在使用", Toast.LENGTH_SHORT).show();
            Intent intent = new Intent(mContext, Test_Map.class);// 设置 put 的键值 唯一，根据value的不同来加载
            intent.putExtra("ok", BAIDU);
            mContext.startActivity(intent);
        }
    }

   /*
     * 拨号  对6.0以上的手机加权限
     */
    @JavascriptInterface
    public void call(String phone) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) {
            Log.e("call", "requestCamera SDK_INT <= Build.VERSION_CODES.M:" + Build.VERSION.SDK_INT);
        } else if (ActivityCompat.checkSelfPermission(mContext, Manifest.permission.CALL_PHONE) !=                                PackageManager.PERMISSION_GRANTED) {
            PermissionUtils.requestPermission(mContext, PermissionUtils.CODE_CALL_PHONE, mPermissionGrant);
        }

        // 首先判断 权限问题， 再启动系统拨号
        Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
        mContext.startActivity(intent);
    }

   /*

    *  当前有木有安装过 xxx文件 

    */

   private boolean isInstallByread(String packageName) {
        File file = new File("/data/data/" + packageName);
        Log.e("安装文件路径--->", file.toString() + "\n" + file.getAbsolutePath());
        return new File("/data/data/" + packageName).exists();
    }

}