Hybrid开发——Android与H5的亲密接触

Hybrid开发在目前的市场上已经非常普遍,它是一种介于web-app、native-app这两者之间的app,兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势”。

今天我们就来讲讲如何使用Android和H5实现一个简单的Hybrid APP。在正式开始之前,我们先给自己定两个小目标:

1、在Android应用里面,通过webview组件嵌入一个H5页面,并正常显示该页面;

2、实现Android与H5之间的简单交互;

备注:Android环境的搭建与配置由小伙伴自主完成,笔者在这里就不做介绍了。


了解WebView


WebView 是一个用来显示 Web 网页的控件,该控件的使用跟其他控件没什么区别。只不过WeView 控件的功能比较丰富,因为它就是一个微型浏览器,包含一个浏览器该有的基本功能,例如:滚动、缩放、前进、后退下一页、搜索、执行 Js等功能。

Hybrid开发——Android与H5的亲密接触_第1张图片
Android布局文件


WebView有四种方式来加载网页:

方式一:webView.loadUrl("http://keithxiaoy.com");   //加载网页链接

方式二:webView.loadUrl("file:///android_asset/index.html");   //加载本地assets目录下的网页

方式三:webView.loadUrl("content://com.android.htmlfileprovider/sdcard/index.html");   //加载手机SD卡的html页面

方式四:webView.loadData(String data,String mimeType,String encoding)  //加载 HTML 页面的一小段内容。参数1:需要截取展示的内容、参数2:展示内容的类型、参数3:字节码

我们为了调试的方便,我们选择第二种方式  --- 加载本地assets目录下的网页,为此我们需要在相应的位置新建html文件:

Hybrid开发——Android与H5的亲密接触_第2张图片
网页文件位置


Android嵌入H5页面


第一步:在AndroidManifest.xml文件配置网络权限

第二步:在java文件中获取WebView实例对象,并调用loadUrl方法载入html文件

Hybrid开发——Android与H5的亲密接触_第3张图片
java文件


Hybrid开发——Android与H5的亲密接触_第4张图片
index.html文件


至此,我们已经将H5页面嵌入到Android应用里面,我们使用Android虚拟机进行查看:

Hybrid开发——Android与H5的亲密接触_第5张图片
H5嵌入到Android应用


H5调用Android的方法


首先定义一个JsInterface类,这个类是Native提供给H5的接口集合:

Hybrid开发——Android与H5的亲密接触_第6张图片
JsInterface类

setTextContent方法的作用是更改Android应用中TextView组件的内容。接下来我们需要将这个接口类的实例传递给html文件的window对象,而这个传递过程要借助于webview:

//  java文件

jsInterface = new JsInterface();


// 把布局文件的TextView对象绑定到jsInterface对象的textView属性上,便于jsInterface对象操作UI组件

jsInterface.textView = (TextView)findViewById(R.id.textView);


// Android提供的Js与Native通信的官方解决方案:这个方法的作用是,将 java 对象注入到 Js 中直接作为window的某一变量来使用

// jsInterface:接口对象;       AndroidNative:接口对象挂载到window的属性名

webView.addJavascriptInterface(jsInterface,"AndroidNative");

完成以上内容以后,我们在H5页面上给按钮绑定一个点击事件,并在处理函数中调用native方法:

Hybrid开发——Android与H5的亲密接触_第7张图片
H5调用Native方法

这样一来,我们点击一下H5页面上的按钮,就可以更改TextView组件的内容了。


Android调用H5的方法


第一步:启用js支持

使用setJavaScriptEnabled方法启用js支持


第二步:获取Android应用的Button组件,并绑定相应的点击事件监听器

btnLogin = (Button)findViewById(R.id.btnLogin);
btnLogin.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View arg0) {

        //实际处理button的click事件的方法

        webView.loadUrl("javascript:pauseVideo()");

    }

});


第三步:现在html文件中定义js方法,然后通过webView的loadUrl方法,调用html里面定义的js方法

Hybrid开发——Android与H5的亲密接触_第8张图片

// pauseVideo是定义在html文件里面的函数

webView.loadUrl("javascript:pauseVideo()");

注意:在不同的Android版本中,Native调用JS的方式是有变化的,在Android4.4之前使用loadUrl的方法,在4.4以后(包括4.4),使用的是另外一种方法:

mWebView.evaluateJavascript("javascript: 方法名('参数,需要转为字符串')", new ValueCallback() {

    @Override

    public void onReceiveValue(String value) {

        //这里的value即为对应JS方法的返回值

    }

});


结语


至此,我们已经实现了一个简单的Hybrid APP。笔者已将相关代码上传到https://github.com/Samuel2306/Hybrid_Android_H5。有兴趣的小伙伴可以自己去动手试一试。

你可能感兴趣的:(Hybrid开发——Android与H5的亲密接触)