Android:前端与原生混合开发尝试

前言:

大前端和Android，不必多说了，应该是个大趋势。除了写前端，很重要一点是前端与原生的交互，自己尝试了在不用框架的前提下怎么做到。实际当中前端都是远端文件，所以还自己部署了局域网内的服务器。

服务端

Tomcat、Eclipse相关的这里就不介绍了，在tomcat的webapps下新建一个WeiXin文件夹，放入写好的前端文件,然后启动tomcat

其中me.js里定义好与终端的接口

function selectPic(){    window.android.selectPicture();}

function changPicByBase(uri){        document.getElementById('head').src = uri; }

点击图片响应终端的接口

终端

中间接口文件

@JavascriptInterfacepublic void selectPicture() {    DialogUtil.getInstance(mContext).showDialog();}

处理完图片之后传给h5页面，这里转base64没用android自带的，另外封了apach的一些接口

Bitmap map = (Bitmap) bundle.get("data");ByteArrayOutputStream bos = new ByteArrayOutputStream();map.compress(CompressFormat.JPEG, 100, bos);byte[] bytes = bos.toByteArray();String uri = "data:image/jpeg;base64,"                            + Base64                            .encodeBase64String(bytes);mWebView.loadUrl("javascript:changPicByBase(" + "'" + uri + "'"+ ")");

这样h5就成功操作了终端的摄像头和文件系统了

工程代码

https://github.com/SingleInstance/h5-android

Cordova

上面的仅适用于少量交互和代码的项目，否则最好用框架来实现，花时间搭建了Cordova的项目，关于Cordova这里就不介绍了，有兴趣的可以看看代码。有几点：

1.规范的最好按照官方的命令行方式来搭建项目和插件，但直接拷贝工程，其实也是可以的。

2.很多教程里提到的,plugin.xml项目里并没有，最后也能运行。

https://github.com/SingleInstance/Cordova-for-Android