商品详情页html代码获取,直播带货小程序源码中，商品详情页是如何获取html图片的...

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

1、配置webView

mWebViel d :w = findViewById(R.id.web);

mWebView.setOverScroe % X e & k JllMode(View.OVER_SCRO] } ` M w y !LL_NEVER);

WebSettings webSettings = mWebV6 C L e b _ t w `iew.getSettings();

webSettings.setJa= R 8 j ! tvaScriptEnabled(true);//设置能够解析Javascript

webSettings.setc a ) d d W zDomSt3 A t norage& j 6 q i O Z @Enabled(true);//设置适应Html5的一些方法

2、添加点击事件监听和android与html交互接口:

mWebView.add; o 7 Y /JavascriptInterface(mOpenImageJavaInterface, "imagelistener");

mWebView.setWebChromeClient(new WebChromeClient(){

@Override

public void onProgressChanged(WebViey Z D ( Rw viev { 4w, int] N [ $ newProgress) {

super.onProgressChanged(viJ q ^ (ew, newProgr- U ress);

Log.d("===","newProgress=="+newProgress);

if(newProgress==100){

addImageClickListener(view);

}

}

private void addImageClickListener(WebView webView) {

webView.loadUrl("javascript:(function(){" +

"var objs = document.getElementsByTagName` 3 .(\"img\"); " +

"for(var i=0;i

"{"

+" vary G ~ # ; _ c _ & temp=i; "

+ " obje V s W ! #s[i].οnclick=function() " +

" { "

+ " window.imagelistener.openImage(this.src)e O y !; " +//通过js代码找到标签为img的代码块，设置x 9 i 6 3 [ l f ,点击O L l 4 n + K ( D的监听方法与本地的openImage方法进行连接

" } " +

"}" +

"})()");[ + Z V ,

}

});

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

}

/*返回html图片集合*/

public static List returnImageUrlsFromHtml(String htmlCode) {

L3 d L J uist&lj ? 9 Jt;StringJ L Z&^ @ j , .gt;v Z # v t - N 2 imageSrcList = new ArrayList();

if(TextUtils.g / ! 2isEmpty(htmlCode)){

return image] - D , m 1 OSrcList;

}

Pattern p = Pattern.compile(` 4 M ] 8 6 [ -"]*\\bsru A l S yc\\b\\# * * ? b F _ ^s*=T s W R : V _ n\s*('|\")+ X ; _?([^'\"\n\r\f>]+(\\.jpg|\\.bmp|\\.eps|\\.gif|\8 2 M E H 0 W ] z\.mif|\\.miff|\\.png|\\.tif|\\.tiff|\I ( 4 ) a s #.svg|\\.wmf|\\.jpe|\\.jpeg|\\.dib|\\.ico|\\.tga|\\.cut|\\.pic|\\b)\\b)[^>]*>", Pattern.CASE_INSENSITIVE);

Matcher m = p.matcher(htmlCode);t s : A 6 ( k F

String quote = null;

St4 t n b 2 Oring src = null;

whi4 { w 3le (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);

}

iG 2 h Qf (imageSrcList =P m 8 n A A= nB m ] P W ` 1ull || imageSrcLisd X x nt.size() == 0) {

Log.e("imageSrcList","资讯中未匹配到图片链接");

return null;

}

return imageSrcList;

}

4、实现本地对应html的点} y .击方法,并跳转画廊展示图片:

@android.webkit.JavascriptInterface

public void openImage(String src) {

if(!ClickUtil.canClick()||!ListUtil.haveData(mOpenImageJavaInterface.imageUrls| 0 8 m c 2 d Z {)){

return;

}

int index=ListUtil.index(mOpenImageJavaInterface.imageUrl. h P 3 ls,src);

if(index==-1){

index=0;

}

showGalle$ e i ! ^ ] s 4ryDialog(index);

}

5、WebView加载url,并调整WebView中图片的大: u - ^ %小:

if(mWebView!=& 7 7null){

html = html.replace(F U D q ] f"

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

encoding, "");

}

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

声明：以上内容为作者本人原创，未经T W F * @ q作者本人同意，禁止转K 3 } : I 3 z I载，否则将追究相关法律责任。