小程序中商品详情页是怎么获取html图片的
这篇“小程序中商品详情页是怎么获取html图片的”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序中商品详情页是怎么获取html图片的”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
站在用户的角度思考问题,与客户深入沟通,找到分宜网站设计与分宜网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广、域名与空间、雅安服务器托管、企业邮箱。业务覆盖分宜地区。
html有什么特点
1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。 3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
在搭建直播带货小程序源码过程中,需要为商品构建详情页,而商品页中的图片是要通过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;i3、本地利用正则解析html中的图片集合:
} /*返回html图片集合*/public static ListreturnImageUrlsFromHtml(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.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,并调整WebView中图片的大小:
if(mWebView!=null) { html = html.replace("以上是“小程序中商品详情页是怎么获取html图片的”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站题目:小程序中商品详情页是怎么获取html图片的
标题链接:http://myzitong.com/article/jejpii.html