Android与JS 交互

这篇算是一个随笔记录吧，最近写了一个简单的js，并要与原生进行交互，之前只知道如何与js交互，但不知道js侧是如何写的，这次两端一起写，了解到了他们是如何交互。

先说下这次的需求吧：
H5界面负责展示一个邀请用户入群的功能，H5界面有两个按钮，第一个按钮是复制微信号功能，点击第二个按钮可以打开微信。

image.png

这个动图是最后效果：

2017-09-01_11_47_39.gif

说一下这个是怎么做的吧：

1.当我进入这个页面的时候，原生就已经知道这个微信号了

image.png

js端有个<a/>标签，当我点击的时候，就可以拿到URL
此时只要我和原生商量好跳转链接以及相应参数就可以拿到微信号

  Uri uri = Uri.parse(url);
  Set<String> names = uri.getQueryParameterNames();
  if (url.contains("qqqq")) {
      String did = uri.getQueryParameter("qqqq"); //did=mai456mai456
   }

2.原生负责复制功能（js端也可以做这个事儿，按你习惯来就好）

    //复制功能
    public static void copyText(Context context,String linkUrl) {
        ClipboardManager clipboardManager = (ClipboardManager)context.getSystemService(Context.CLIPBOARD_SERVICE);
        clipboardManager.setPrimaryClip(ClipData.newPlainText(null, linkUrl));
    }

这里多说一句，SDK11之前请使用android.text.ClipboardManager ，SDK11起android.text.ClipboardManager被废弃，使用它的子类android.content.ClipboardManager替代，同样被废弃还有setText/getText/hasText方法，使用setPrimaryClip/getPrimaryClip/hasPrimaryClip替代

3.原生负责打开微信（关于js端打开微信这个事儿，我咨询过一位js界德高望重端前辈，前辈跟我说，微信只和几个友商开展了互通的业务，所以，js打开微信不太方便）

    //打开微信
    public static void openWechat(Activity activity) {
        Intent intent = new Intent();
        ComponentName cmp = new ComponentName("com.tencent.mm", "com.tencent.mm.ui.LauncherUI");// 报名该有activity

        intent.setAction(Intent.ACTION_MAIN);
        intent.addCategory(Intent.CATEGORY_LAUNCHER);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        intent.setComponent(cmp);
        activity.startActivityForResult(intent, 0);
    }

再说一些常用webview与js交互常用方法，以下代码块儿是集成webview的子类：

        getSettings().setJavaScriptEnabled(true); // 设置与Js交互的权限
        getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);//关闭webview中缓存 
        getSettings().setUseWideViewPort(true);/将图片调整到适合webview的大小 
        getSettings().setLoadWithOverviewMode(true);// 缩放至屏幕的大小
        getSettings().setDefaultTextEncodingName("UTF-8");//编码方式
        getSettings().setJavaScriptCanOpenWindowsAutomatically(true);    // 设置允许JS弹窗
        setWebChromeClient(new WebChromeClient());
        setVerticalScrollBarEnabled(false);

        //复写shouldOverrideUrlLoading()方法，使得打开网页时不调用系统浏览器， 而是在本WebView中显示
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
      });
        //开始载入页面调用的，我们可以设定一个loading的页面，告诉用户程序在等待网络响应。
         webView.setWebViewClient(new WebViewClient(){
             @Override
              public void  onPageStarted(WebView view, String url, Bitmap favicon) {
               //设定加载开始的操作
        }
      });
        //在页面加载结束时调用。我们可以关闭loading 条，切换程序动作。
          webView.setWebViewClient(new WebViewClient(){
             @Override
             public void onPageFinished(WebView view, String url) {
               //设定加载结束的操作
        }
    });
       
    }

说一点我写js的入门的心路历程吧：

刚开始弄的时候，我只知道原生加载URL，所以每次修改完文件，我就把写好的html文件传到七牛上，后来我发现这样太麻烦了，我就寻思搭个本地服务器，这样每次都连自己的服务器，修改能快点。我就上网找到了一个现成的，这种网上有很多，感谢～传送门，连上服务器之后就感觉进城了，挺好的。
后来，我又发现一个问题，我那两个按钮在不同手机上位置不一样，我又问了问，知道了css里的单位，px，vh，rem什么的，是需要适配不同的android手机的。
通过这次试水，知道了html端有很多节点，原生端是直接可以拿到的，如： title，url等等。虽然功能不难，但对webview了解更深入了一些。
大家有什么问题，欢迎私信，一起交流～