Android native与HTNL5进行交互
2016-06-29 11:13
369 查看
在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之:
在Android开发中，通常使用xml格式来描述布局文件。就目前而言，熟悉android布局及美化的人员少之又少，出现了严重的断层。大部分企业，其实还是程序员自己动手布局。这样既浪费时间和精力，也未必能达到理想的效果。但是，在企业级的android开发中，使用html页面进行布局，也有很多的优势（例如：简单，大部分开发人员及美工都熟悉，方便统一进行更新，管理）。据笔者了解，已经有不少的公司在使用这种方式进行布局开发。这也可能是一种趋势。
1）WebView的使用
WebView是Android中的一个类，主要是用来承载网页的信息。WebView中比较重要的信息有三个类：WebChromeClient、WebViewClient和WebSettings。
1.WebChromeClient：辅助WebView处理Javascript的对话框，加载进度条，网站图标，网站title等等。
(1)onProgressChanged(WebView view,int newProgress)，通知现在的html加载的进度。
(2)onReceivedTitle(WebView view,String title)，通知现在的title。
(3)onReceivedIcon(WebView view,Bitmap icon)，通知现在的icon图标。
(4)onReceivedTouchIconUrl(WebView view, String url,boolean precomposed)，通知现在的icon的url。
(5)onJsPrompt(WebView iew,String url,String message,String defaultValue,JsPromptResult result)，html通过js调用prompt的时候就会调用这个函数。
(6)onJsAlert(WebView view,String url,String message,JsResult result)， html通过js调用alert的时候就会调用这个函数。
(7)onJsConfirm(WebView view, String url, String message,JsResult result)，html通过js调用confirm的时候就会调用。
2.WebViewClient：帮助WebView处理各种通知、请求事件等等。
(1)shouldOverrideUrlLoading(WebView view,String url)，当点击html中的含有具有跳转信息的内容时都会回调这个函数，告诉跳转的url。
(2)onPageStart(WebView view,String url,Bitmap favicon)，当webview开始加载html的时候就会回调这个函数。
(3)onPageFinish(WebView view,String url)，当webview加载完html的时候就会回调这个函数。
3.WebSettings：用来设置WebView的一些属性。
(1)setJavaScriptEnable(boolean flag)，是否支持javascript。
(2)setSupportZoom(boolean support)，是否支持缩放。
4.重要的方法
(1)loadUrl(String url)，加载一个url的信息到WebView。
(2)loadUrl(String url,Map< String,String> additionalHttpHeader)，加载一个url，并且带上一些url。
(3)loadData(String data, String mimeType, String encoding)，用来给WebView加载数据。
(4)loadDataWithBaseURL(String baseUrl, String data,String mimeType, String encoding, String historyUrl)，用来给WebView加载数据。
(5)addJavascriptInterface(Object object,String name)，将定义了回调方法的对象object注入到webview中，这个时候webview中就可以通过name来调用native中的方法。
2）Native与Html5的交互方法
Native跳转到Html5的方式只有一种就是通过load的方式。
上面介绍WebView时候时的loadUrl、loadData和loadDataWithBaseURL都能在Native中加载Html5的界面。这里面也可以只加载部分分Javascript的代码。
Html5跳转到Native的方式则有比较多的方式。
不使用js sdk时的交互
(1)shouldOverrideUrlLoading，当点击WebView中承载过类似href的某个界面的时候。就会回调这个方法。将需要处理的逻辑写在shouldOverrideUrlLoading里面就行。
webview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
// doSomething
}
});
(2)onJsPrompt(),onJsAlert()和onJsConfirm()，在html中设置prompt(),alert(),confirm()，点击的时候就会回调到这些方法中。
<html>
<body>
<a href="javascript:prompt()">hello</a>
<a href="javascript:alert()">haha</a>
<a href="javascript:confirm()">gala</a>
</body></html>
当分别点击的时候就会回调到Native中。分别在里面做处理就行 。
webview.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, JsPromptResult result) {
// doSomething
return super.onJsPrompt(view, url, message, defaultValue, result);
}
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
// doSomething
return super.onJsAlert(view, url, message, result);
}
@Override
public boolean onJsConfirm(WebView view, String url,
String message, JsResult result) {
// doSomething
return super.onJsConfirm(view, url, message, result);
}
});
使用js sdk时的交互
通过前面介绍WebView的时候，可以通过addJavascriptInterface()，将native端的方法注入到WebView中，这样就可以通过一个name在html中调用native。
将Object注入到WebView，标识符号是egos。
webview.addJavascriptInterface(new Object(){
@JavascriptInterface
public void hello(String name){
Toast.makeText(WebViewTest.this, name, Toast.LENGTH_SHORT).show();
}
}, "egos");
在html中使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<script type="text/javascript">
function test(){
if(egos){
egos.hello("egos");
}
}
</script>
</head>
<body>
<button onclick="javascript:test()">hello</button>
<a href="javascript:test()">hello</a>
</body></html>
点击以后就会弹出Toast。
在商城项目中使用Android native与HTML5交互的方法，实现商品详情页：
①在布局文件中加入 WebView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="cniao5.com.cniao5shop.WareDetailActivity">
<cniao5.com.cniao5shop.widget.CNiaoToolBar
android:id="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:isShowSearchView="false"
app:navigationIcon="@drawable/icon_back_32px"
app:contentInsetEnd="56dp"
app:title="商品详情"/>
<WebView
android:id="@id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</LinearLayout>
②获取WebView的实例
@ViewInject(R.id.webView)
private WebView mWebView;
③重写一个WebViewClient来实现页面加载完成后的逻辑
class WC extends WebViewClient{
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if(mDialog !=null && mDialog.isShowing())
mDialog.dismiss();
mAppInterfce.showDetail();
}
}
④实现WebAppInterface类，以供HTML5调用
class WebAppInterface{
private Context mContext;
public WebAppInterface(Context context){
mContext = context;
}
@JavascriptInterface
public void showDetail(){
runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript:showDetail("+mWare.getId()+")");
}
});
}
@JavascriptInterface
public void buy(long id){
cartProvider.put(mWare);
ToastUtils.show(mContext,"已添加到购物车");
}
@JavascriptInterface
public void addFavorites(long id){
addToFavorite();
}
}
private void addToFavorite(){
User user = CniaoApplication.getInstance().getUser();
if(user==null){
startActivity(new Intent(this,LoginActivity.class),true);
}
Long userId = CniaoApplication.getInstance().getUser().getId();
Map<String, Object> params = new HashMap<>();
params.put("user_id",userId);
params.put("ware_id",mWare.getId());
okHttpHelper.post(Contants.API.FAVORITE_CREATE, params, new SpotsCallBack<List<Favorites>>(this) {
@Override
public void onSuccess(Response response, List<Favorites> favorites) {
ToastUtils.show(WareDetailActivity.this,"已添加到收藏夹");
}
@Override
public void onError(Response response, int code, Exception e) {
LogUtils.d("code:"+code);
}
});
}
⑤初始化交互接口
private void initWebView(){
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setBlockNetworkImage(false);
settings.setAppCacheEnabled(true);
mAppInterfce = new WebAppInterface(this);
mWebView.addJavascriptInterface(mAppInterfce,"appInterface");
mWebView.setWebViewClient(new WC());
mWebView.loadUrl(Contants.API.WARES_DETAIL);
}
在Android开发中，通常使用xml格式来描述布局文件。就目前而言，熟悉android布局及美化的人员少之又少，出现了严重的断层。大部分企业，其实还是程序员自己动手布局。这样既浪费时间和精力，也未必能达到理想的效果。但是，在企业级的android开发中，使用html页面进行布局，也有很多的优势（例如：简单，大部分开发人员及美工都熟悉，方便统一进行更新，管理）。据笔者了解，已经有不少的公司在使用这种方式进行布局开发。这也可能是一种趋势。
1）WebView的使用
WebView是Android中的一个类，主要是用来承载网页的信息。WebView中比较重要的信息有三个类：WebChromeClient、WebViewClient和WebSettings。
1.WebChromeClient：辅助WebView处理Javascript的对话框，加载进度条，网站图标，网站title等等。
(1)onProgressChanged(WebView view,int newProgress)，通知现在的html加载的进度。
(2)onReceivedTitle(WebView view,String title)，通知现在的title。
(3)onReceivedIcon(WebView view,Bitmap icon)，通知现在的icon图标。
(4)onReceivedTouchIconUrl(WebView view, String url,boolean precomposed)，通知现在的icon的url。
(5)onJsPrompt(WebView iew,String url,String message,String defaultValue,JsPromptResult result)，html通过js调用prompt的时候就会调用这个函数。
(6)onJsAlert(WebView view,String url,String message,JsResult result)， html通过js调用alert的时候就会调用这个函数。
(7)onJsConfirm(WebView view, String url, String message,JsResult result)，html通过js调用confirm的时候就会调用。
2.WebViewClient：帮助WebView处理各种通知、请求事件等等。
(1)shouldOverrideUrlLoading(WebView view,String url)，当点击html中的含有具有跳转信息的内容时都会回调这个函数，告诉跳转的url。
(2)onPageStart(WebView view,String url,Bitmap favicon)，当webview开始加载html的时候就会回调这个函数。
(3)onPageFinish(WebView view,String url)，当webview加载完html的时候就会回调这个函数。
3.WebSettings：用来设置WebView的一些属性。
(1)setJavaScriptEnable(boolean flag)，是否支持javascript。
(2)setSupportZoom(boolean support)，是否支持缩放。
4.重要的方法
(1)loadUrl(String url)，加载一个url的信息到WebView。
(2)loadUrl(String url,Map< String,String> additionalHttpHeader)，加载一个url，并且带上一些url。
(3)loadData(String data, String mimeType, String encoding)，用来给WebView加载数据。
(4)loadDataWithBaseURL(String baseUrl, String data,String mimeType, String encoding, String historyUrl)，用来给WebView加载数据。
(5)addJavascriptInterface(Object object,String name)，将定义了回调方法的对象object注入到webview中，这个时候webview中就可以通过name来调用native中的方法。
2）Native与Html5的交互方法
Native跳转到Html5的方式只有一种就是通过load的方式。
上面介绍WebView时候时的loadUrl、loadData和loadDataWithBaseURL都能在Native中加载Html5的界面。这里面也可以只加载部分分Javascript的代码。
Html5跳转到Native的方式则有比较多的方式。
不使用js sdk时的交互
(1)shouldOverrideUrlLoading，当点击WebView中承载过类似href的某个界面的时候。就会回调这个方法。将需要处理的逻辑写在shouldOverrideUrlLoading里面就行。
webview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
// doSomething
}
});
(2)onJsPrompt(),onJsAlert()和onJsConfirm()，在html中设置prompt(),alert(),confirm()，点击的时候就会回调到这些方法中。
<html>
<body>
<a href="javascript:prompt()">hello</a>
<a href="javascript:alert()">haha</a>
<a href="javascript:confirm()">gala</a>
</body></html>
当分别点击的时候就会回调到Native中。分别在里面做处理就行 。
webview.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, JsPromptResult result) {
// doSomething
return super.onJsPrompt(view, url, message, defaultValue, result);
}
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
// doSomething
return super.onJsAlert(view, url, message, result);
}
@Override
public boolean onJsConfirm(WebView view, String url,
String message, JsResult result) {
// doSomething
return super.onJsConfirm(view, url, message, result);
}
});
使用js sdk时的交互
通过前面介绍WebView的时候，可以通过addJavascriptInterface()，将native端的方法注入到WebView中，这样就可以通过一个name在html中调用native。
将Object注入到WebView，标识符号是egos。
webview.addJavascriptInterface(new Object(){
@JavascriptInterface
public void hello(String name){
Toast.makeText(WebViewTest.this, name, Toast.LENGTH_SHORT).show();
}
}, "egos");
在html中使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<script type="text/javascript">
function test(){
if(egos){
egos.hello("egos");
}
}
</script>
</head>
<body>
<button onclick="javascript:test()">hello</button>
<a href="javascript:test()">hello</a>
</body></html>
点击以后就会弹出Toast。
在商城项目中使用Android native与HTML5交互的方法，实现商品详情页：
①在布局文件中加入 WebView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="cniao5.com.cniao5shop.WareDetailActivity">
<cniao5.com.cniao5shop.widget.CNiaoToolBar
android:id="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:isShowSearchView="false"
app:navigationIcon="@drawable/icon_back_32px"
app:contentInsetEnd="56dp"
app:title="商品详情"/>
<WebView
android:id="@id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</LinearLayout>
②获取WebView的实例
@ViewInject(R.id.webView)
private WebView mWebView;
③重写一个WebViewClient来实现页面加载完成后的逻辑
class WC extends WebViewClient{
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if(mDialog !=null && mDialog.isShowing())
mDialog.dismiss();
mAppInterfce.showDetail();
}
}
④实现WebAppInterface类，以供HTML5调用
class WebAppInterface{
private Context mContext;
public WebAppInterface(Context context){
mContext = context;
}
@JavascriptInterface
public void showDetail(){
runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript:showDetail("+mWare.getId()+")");
}
});
}
@JavascriptInterface
public void buy(long id){
cartProvider.put(mWare);
ToastUtils.show(mContext,"已添加到购物车");
}
@JavascriptInterface
public void addFavorites(long id){
addToFavorite();
}
}
private void addToFavorite(){
User user = CniaoApplication.getInstance().getUser();
if(user==null){
startActivity(new Intent(this,LoginActivity.class),true);
}
Long userId = CniaoApplication.getInstance().getUser().getId();
Map<String, Object> params = new HashMap<>();
params.put("user_id",userId);
params.put("ware_id",mWare.getId());
okHttpHelper.post(Contants.API.FAVORITE_CREATE, params, new SpotsCallBack<List<Favorites>>(this) {
@Override
public void onSuccess(Response response, List<Favorites> favorites) {
ToastUtils.show(WareDetailActivity.this,"已添加到收藏夹");
}
@Override
public void onError(Response response, int code, Exception e) {
LogUtils.d("code:"+code);
}
});
}
⑤初始化交互接口
private void initWebView(){
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setBlockNetworkImage(false);
settings.setAppCacheEnabled(true);
mAppInterfce = new WebAppInterface(this);
mWebView.addJavascriptInterface(mAppInterfce,"appInterface");
mWebView.setWebViewClient(new WC());
mWebView.loadUrl(Contants.API.WARES_DETAIL);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 跟我学Android之三 常用视图
- 跟我学Android之三 常用视图
- 跟我学Android之三 常用视图
- Android事件分发机制完全解析，带你从源码的角度彻底理解(上)
- android保留两位小数的方法
- Android自定义类似ProgressDialog效果加载动画
- Android5.0新特性CollapsingToolbarLayout图片拉缩
- Android Studio快捷键
- Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例
- EventBus与Rxandroid之间的比较
- android系统-3G4G通信模块适配
- Android Otto框架浅析
- Android动画进阶—使用开源动画库nineoldandroids
- 关于Android中设置闹钟的相对完善的解决方案
- Android Studio 2.0+ Error:Protocol family unavailable
- 9. react-native-android之----reactjs基础
- Android 屏幕适配方案
- 去掉android2.3之后系统自带下拉效果
- android编码命名规范
- Android左右切换的标签