Android与JS进行交互传文件路径

webview+h5这种混合开发最近很火，其中最重要的大概就是java代码和js的交互了，刚接触这东西两天，写写收获。

新建一个assets文件夹，要与res这个文件夹同级，其中存放web项目。

先看android端

初始化webview

 1 // 设置支持JavaScript等
 2         webView = (WebView) findViewById(R.id.webView);
 3         settings = webView.getSettings();
 4         settings.setJavaScriptEnabled(true);
 5         settings.setCacheMode(WebSettings.LOAD_DEFAULT);        //缓存
 6         settings.setDomStorageEnabled(true);                    //使用localStorage则必须打开
 7         settings.setDatabaseEnabled(true);
 8         settings.setAppCacheEnabled(true);
 9         settings.setAllowFileAccess(true);
10         settings.setSupportZoom(true);
11         settings.setBuiltInZoomControls(true);
12         settings.setRenderPriority(WebSettings.RenderPriority.HIGH);    //提高渲染优先级
13         settings.setBlockNetworkImage(false);                           //把图片放在最后渲染
14         webView.setWebChromeClient(new WebChromeClient());
15 
16         webView.addJavascriptInterface(new Object() {
17             @JavascriptInterface
18             public void onUseCamera() {
19                 //use system camera
20                 Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
21                 startActivityForResult(intent, CAPTURE_IMAGE_ACTIVITY_REQUEST_CODE);
22             }
23 
24         }, "camera");
25         webView.addJavascriptInterface(new Object() {
26 
27             @JavascriptInterface
28             public String onGetPic() {
29                 return file.getAbsolutePath();
30             }
31         }, "getPicture");
32         webView.loadUrl("file:///android_asset/login_content.html");

这里执行了点击h5中的按钮，调用系统相机的操作，onActivityResult就不写了，网上一大堆，不过需要注意，onactivityResult中要有

webView.loadUrl("javascript:getPic(" + ")");这样一句代码

。其中名字为camera的javascrptInterface是调用照相机，getPicture的是返回照片路径给js。

下面就是js了

1 　　　　　function useCamera(){
2            window.camera.onUseCamera();
3         }
4         function getPic(){
5             var filePath = window.getPicture.onGetPic();
6             alert(filePath);
7             document.getElementById("testImage").src=filePath;
8         }

主要就是这样的两个方法，其中useCamera是要在html的button的onclick中调用，getPic是在上面的onActivityForResult中调用，通过文件路径更改id是testImage的图片。

这样直接传文件路径在web项目部署在服务器时是访问不到的，这个应该有解决方案，可惜我没有找到。还有个问题待解决，传一个string的文件路径没问题，但是如果直接传File类型的文件时，js死活都识别不出文件来，目测应该用h5的FileReader进行操作，可惜我又没成功。。。以上

 

posted @ 2016-04-07 16:14  DevLi  阅读(6897)  评论(0)  编辑  收藏  举报