前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >直播带货小程序源码中,商品详情页是如何获取html图片的

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

原创
作者头像
万岳教育系统
修改2020-07-30 17:52:08
1.3K0
修改2020-07-30 17:52:08
举报

在搭建直播带货小程序源码过程中,需要为商品构建详情页,而商品页中的图片是要通过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<objs.length;i++)  " +
                "{"
                +"  var temp=i;    "
                + "    objs[i].onclick=function()  " +
                "    {  "
                + "        window.imagelistener.openImage(this.src);  " +//通过js代码找到标签为img的代码块,设置点击的监听方法与本地的openImage方法进行连接
                "    }  " +
                "}" +
                "})()");
    }
});

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、实现本地对应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("<img", "<img style=\"display:        ;max-width:100%;\"");
    mWebView.loadDataWithBaseURL("about:blank", html, mimeType,
            encoding, "");
}

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档