在搭建直播带货小程序源码过程中，需要为商品构建详情页，而商品页中的图片是要通过html获取并展示到本地的，那么这个过程是如何实现的？接下来小编将通过代码演示一下：
1、配置webView
代码语言：javascript复制mWebView = findViewById(R.id.web);
mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);//设置能够解析Javascript
webSettings.setDomStorageEnabled(true);//设置适应Html5的一些方法2、添加点击事件监听和android与html交互接口:
代码语言：javascript复制mWebView.addJavascriptInterface(mOpenImageJavaInterface, "imagelistener");
mWebView.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
Log.d("===","newProgress==" newProgress);
if(newProgress==100){
addImageClickListener(view);
}
}
private void addImageClickListener(WebView webView) {
webView.loadUrl("javascript:(function(){"
"var objs = document.getElementsByTagName("img"); "
"for(var i=0;i<objs.length;i ) "
"{"
" var temp=i; "
" objs[i].onclick=function() "
" { "
" window.imagelistener.openImage(this.src); " //通过js代码找到标签为img的代码块，设置点击的监听方法与本地的openImage方法进行连接
" } "
"}"
"})()");
}
});3、本地利用正则解析html中的图片集合:
代码语言：javascript复制
}
/*返回html图片集合*/
public static List<String> returnImageUrlsFromHtml(String htmlCode) {
List<String> imageSrcList = new ArrayList<String>();
if(TextUtils.isEmpty(htmlCode)){
return imageSrcList;
}
Pattern p = Pattern.compile("<img\b[^>]*\bsrc\b\s*=\s*('|")?([^'"nrf>] (\.jpg|\.bmp|\.eps|\.gif|\.mif|\.miff|\.png|\.tif|\.tiff|\.svg|\.wmf|\.jpe|\.jpeg|\.dib|\.ico|\.tga|\.cut|\.pic|\b)\b)[^>]*>", Pattern.CASE_INSENSITIVE);
Matcher m = p.matcher(htmlCode);
String quote = null;
String src = null;
while (m.find()) {
quote = m.group(1);
src = (quote == null || quote.trim().length() == 0) ? m.group(2).split("//s ")[0] : m.group(2);
imageSrcList.add(src);
}
if (imageSrcList == null || imageSrcList.size() == 0) {
Log.e("imageSrcList","资讯中未匹配到图片链接");
return null;
}
return imageSrcList;
}4、实现本地对应html的点击方法,并跳转画廊展示图片:
代码语言：javascript复制@android.webkit.JavascriptInterface
public void openImage(String src) {
if(!ClickUtil.canClick()||!ListUtil.haveData(mOpenImageJavaInterface.imageUrls)){
return;
}
int index=ListUtil.index(mOpenImageJavaInterface.imageUrls,src);
if(index==-1){
index=0;
}
showGalleryDialog(index);
}5、WebView加载url,并调整WebView中图片的大小:
代码语言：javascript复制if(mWebView!=null){
html = html.replace("<img", "<img style="display: ;max-width:100%;"");
mWebView.loadDataWithBaseURL("about：blank", html, mimeType,
encoding, "");
}以上就是搭建直播带货小程序中，商品详情页是如何获取html图片并在本地展示的过程。
声明：以上内容为作者本人原创，未经作者本人同意，禁止转载，否则将追究相关法律责任。
