在搭建直播带货小程序源码过程中，需要为商品构建详情页，而商品页中的图片是要通过html获取并展示到本地的，那么这个过程是如何实现的？接下来小编将通过代码演示一下：

1、配置webView

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交互接口:

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

"{"

+" var temp=i; "

+ " objs[i].οnclick=function() " +

" { "

+ " window.imagelistener.openImage(this.src); " +//通过js代码找到标签为img的代码块，设置点击的监听方法与本地的openImage方法进行连接

" } " +

"}" +

"})()");

}

});

3、本地利用正则解析html中的图片集合:

}

/*返回html图片集合*/

public static List returnImageUrlsFromHtml(String htmlCode) {

List imageSrcList = new ArrayList();

if(TextUtils.isEmpty(htmlCode)){

return imageSrcList;

}

Pattern p = Pattern.compile("]*\\bsrc\\b\\s*=\\s*('|\")?([^'\"\n\r\f>]+(\\.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的点击方法,并跳转画廊展示图片:

@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中图片的大小:

if(mWebView!=null){

html = html.replace("

mWebView.loadDataWithBaseURL("about：blank", html, mimeType,

encoding, "");

}

以上就是搭建直播带货小程序中，商品详情页是如何获取html图片并在本地展示的过程。

声明：以上内容为作者本人原创，未经作者本人同意，禁止转载，否则将追究相关法律责任。