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进行操作,可惜我又没成功。。。以上