本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
在一篇文章《商城项目实战 | 18.1 Native 与 HTML5 交互》中详细讲解如何实现 Native 和 Html5 的交互，展示了从原生 Android 调用 Html5 以及从 Html5 调用原生 Android 的实例，现在就要把 Native 和 Html5 的交互实际应用到实现商品详情模块中来。
实现商品详情
使用 Html5 实现商品详情模块，商品详情界面为 Html5 页面，既可以融入到原生中展示，而且商品详情的改变也可以直接从后台修改，这也是和目前淘宝、京东的处理方式相类似，下面看具体的实现步骤。
1. 添加权限
这里获取的是网络的 Html5 页面，获取网络数据，一定要加上对网络请求的权限。
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
需要请求网络的时候，网络权限的添加都是必不可少的，这一点很多的时候会忽略，重要的事情说三遍 —— 需要网络请求必须要添加网络权限。
2. 布局设计
开始实现模块功能时，首先就要把布局设计好，这里是加载 Html5 页面，就要使用 WebView 控件。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.liuting.cniao_shop.widget.CNiaoToolbar
android:id="@+id/ware_detail_toolbar_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetEnd="56dp"
app:isShowSearchView="false"
app:navigationIcon="@mipmap/ic_back"
app:title="商品详情">
</com.liuting.cniao_shop.widget.CNiaoToolbar>
<WebView
android:id="@+id/ware_detail_webview_main"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</LinearLayout>
WebView 用于加载商品详情的 Html5 页面，并且在商城项目中商品详情页面的头部还有自定义的 Toolbar，这个请参考文章《商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)》和《商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)》。
3. 设置 WebView 属性
布局的设计完成后，就要开始在 Activity 中声明定义对应的控件，这些都是小 case ，没必要多说，控件定义好了后，对 WebView 我们也需要一定的设置。
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setBlockNetworkImage(false);
settings.setAppCacheEnabled(true);
设置 WebView 允许 JS 脚本，解除图片阻塞，并且开启缓存，这样可以加速 WebView 加载页面。
4. 加载 Html5 页面
WebView 可以加载 SD 卡的 Html5 页面，可以加载资源下的 Html5 文件，还可以加载网络的 Html5 页面，我们这里是加载网页，代码如下。
webView.loadUrl(url);
5. 自定义 WebViewClient
网页加载的时候受到网速等条件的限制，必定要延时的存在，而延时的多少也存在不同，那么在页面加载的过程中就要添加一个 Dialog 或者 AlertDialog 的提示框来提示用户正在加载中，请稍后。这里就简单显示 Dialog。
class WC extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if(mDialog !=null && mDialog.isShowing())
mDialog.dismiss();
//页面加载成功后的操作
}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
if(mDialog !=null && mDialog.isShowing())
mDialog.dismiss();
ToastUtils.show(WareDetailActivity.this,error.getDescription());
}
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
super.onReceivedSslError(view, handler, error);
if(mDialog !=null && mDialog.isShowing())
mDialog.dismiss();
ToastUtils.show(WareDetailActivity.this,error.toString());
}
}
当页面加载完成时，Dialog 就要 dismiss ，当然加载出错了也是要 dismiss 的。
6. 显示商品详情
商品界面是 Html5 页面，不同的商品进入自然也会展示不同商品详情，这里就需要根据商品的 ID 来确定显示哪种商品的详情页。
@JavascriptInterface
public void showDetail(){
runOnUiThread(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:showDetail("+waresInfo.getId()+")");
}
});
}
这个方法写在自定义的 JavascriptInterface 中，showDetail() 方法中是调用的 Html5 页面中的 function showDetail(id)，function showDetail(id) 的作用是根据传入的商品 ID，来获取商品详情，并且展示在 Html5 页面中，那是 JS 的部分了，这里主要是讲 Android 部分的处理，function 部分的代码也很简单，就不多说了。
7. 实现加入购物车
加入购物车要实现，就要Html5 调用原生的 Android 中方法，先在原生 Android 中写入加入购物车的方法。
@JavascriptInterface
public void addToCart(long id){
cartProvider.put(waresInfo);
ToastUtils.show(mContext,"已添加到购物车");
}
CartProvider 是购物车数据存储工具类，可以参考文章《商城项目实战 | 14.1 仿京东购物车的实现（一）》和《商城项目实战 | 14.2 仿京东购物车的实现（二）》，这里就是实现加入购物车中。
然后在 Html5 页面直接调用原生 Android 中的方法 addCart(long id)。
$("#btnAddToCart").click(function(){
var id = $("#txtWareId").val();
window.appInterface.addToCart(id);
});
加入购物车就实现了。
8. 添加自定义的 JavascriptInterface
上文中说到的 showDetail() 展示商品详情方法和 addToCart(long id) 加入购物车的方法都是要写在自定义的 JavascriptInterface 中，这里命名为 WebAppInterface，然后添加到 WebView 中。
webView.addJavascriptInterface(mWebAppInterface,"appInterface");
这里的 "appInterface" 是原生调用 Html5 和 Html5 调用原生的标识，必须要统一。
效果图
所有的步骤都完成了，运行代码，获取效果图。
注册有礼.png
菜鸟窝-程序猿的黄埔军校。 如需转载，请注明出处（菜鸟窝 ， 原文链接： http://www.cniao5.com/forum/thread/114e622439fc11e7b4ce00163e0230fa ）关注公众号免费领取"140套优秀开源项目源码"
网友评论