android与javascript相互调用

最近前端又火了一把，为什么说又呢。因为facebook在2015年下半年推出React Native，支持跨平台调用，把前端推向“风口浪尖”（这里是褒义词）。差不多时隔一年，2016年9月份，腾讯推出微信小程序，再一次把前端推向新的高度。这引起许多前端开发者乃至android与ios开发的高度关注。我也带着好奇心，决定从javascript与android交互做起。先看下实现图片：

既然是调用到本地相册、拍照、视频，需要声明如下权限：

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.CAMERA"/>

值得注意的是，为了测试方便我把 html文件放在assets目录下，其中assets与java、res属于同级目录。真实开发一般是从后台获取对应的url。加载html执行语句：

mWebView.loadUrl("file:///android_asset/hello.html");

webView添加js的接口，其中"helloJs"是与js交互的指定接口：

jsMethodProvider = new JsMethodProvider(mContext);
mWebView.addJavascriptInterface(jsMethodProvider, "helloJs");

webView的一些设置：

WebSettings settings = mWebView.getSettings();
settings.setDefaultTextEncodingName("utf-8");//设置编码格式
settings.setJavaScriptEnabled(true);//支持js
    js提供方法给android调用：

    function funFromJs(){
    	document.getElementById("helloWeb").innerHTML="HelloWebView,我来自js";
    }
    android中设置点击事件，加载js提供的方法：
        //点击调用js中方法
        btnCallJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.loadUrl("javascript:funFromJs()");
            }
        });
    接下来是js调用android了。js设置点击事件，调用android提供的对应方法取得图片路径，并展示图片：
<a οnclick="helloJs.doSelectPhoto()">调用本地相册</a>
   
   

    
    

   
   
   
   

    
        android这边提供给js方法：
   
   
    @JavascriptInterface
    public void  doSelectPhoto() {
        Toast.makeText(mContext, "选择相册图片", Toast.LENGTH_SHORT).show();
        Intent selectPhotoIntent = new Intent(Intent.ACTION_PICK);
        selectPhotoIntent.setType("image/*");
        ((Activity)mContext).startActivityForResult(selectPhotoIntent, CODE_SELECT_PHOTO);
        ((Activity)mContext).setResult(Activity.RESULT_OK, selectPhotoIntent);
    }
    选择照片后，返回onActivityResult方法处理，把图片路径回传给js：
  if(data == null || data.getData() == null)
     return;
  Uri uri = data.getData();
  Log.d("photoUri", uri.toString());
  mWebView.loadUrl("javascript:setImagePath('"+ uri.toString() + "')");//取到本地相册图片路径后，回传给js
    然后，js接收到图片路径，展示图片。这里与拍照图片并行展示，所以用到表格：
<table style="margin-top:20px;margin-bottom:20px; margin-left:20px">
    <tr>
        <td> <img id= "mImage" src="file:///android_asset/ic_launcher.png"  width="100" height="100" /> </td>
        <td> <img id= "mCamera" src="file:///android_asset/ic_launcher.png"  width="100" height="100"/> </td>
    </tr>
</table>
    调用本地摄像头拍照与调用本地视频的过程与上面说的选择相册步骤一样，就不再重复了。主要谈下做的过程中碰到的问题：
1、编译时报错如下，后来发现没在给js提供的方法前加上@JavascriptInterface 
报错"Uncaught TypeError: XXX is not a function"
2、js中把两张图片并行放在一起，第一反应是想到android的RelativeLayout。可惜这不是android，后来使用表格。
3、调用本地视频，取得路径后显示一片空白，后来发现需要加上controls autobuffer。

    以上就是我与js接“吻”的过程（开个玩笑）。希望大家都可以绕开这些坑，顺利开发出完美的android与js交互。如果大家路过有需要，可以到我的博客下载demo看看。