小程序中商品詳情頁(yè)是怎么獲取html圖片的

這篇“小程序中商品詳情頁(yè)是怎么獲取html圖片的”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“小程序中商品詳情頁(yè)是怎么獲取html圖片的”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。

在搭建直播帶貨小程序源碼過(guò)程中，需要為商品構(gòu)建詳情頁(yè)，而商品頁(yè)中的圖片是要通過(guò)html獲取并展示到本地的，那么這個(gè)過(guò)程是如何實(shí)現(xiàn)的？代碼如下：

1、配置webView

mWebView = findViewById(R.id.web);
mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);//設(shè)置能夠解析Javascript
webSettings.setDomStorageEnabled(true);//設(shè)置適應(yīng)Html5的一些方法

2、添加點(diǎn)擊事件監(jiān)聽(tīng)和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<objs.length;i++)  " +
                "{"
                +"  var temp=i;    "
                + "    objs[i].onclick=function()  " +
                "    {  "
                + "        window.imagelistener.openImage(this.src);  
                " +//通過(guò)js代碼找到標(biāo)簽為img的代碼塊，設(shè)置點(diǎn)擊的監(jiān)聽(tīng)方法與本地的openImage
                方法進(jìn)行連接
                "    }  " +
                "}" +
                "})()");
    }
});

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

}
/*返回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*('|\")?([^'\"\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、實(shí)現(xiàn)本地對(duì)應(yīng)html的點(diǎn)擊方法,并跳轉(zhuǎn)畫(huà)廊展示圖片:

@android.webkit.JavascriptInterfacepublic 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,并調(diào)整WebView中圖片的大小:

if(mWebView!=null)
{
html = html.replace("<img", "<img style=\"display:        
;max-width:100%;\"");
mWebView.loadDataWithBaseURL("about：blank", html, mimeType,
encoding, ""
);
}

以上是“小程序中商品詳情頁(yè)是怎么獲取html圖片的”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！