微信小程序rich-text 导入京东商城数据样式丢失

2020-05-03 20:39:34 阅读：347 来源： 互联网

标签：sku rich url 微信 jpg 标签 background text css

问题描述：导入京东商城数据，因为导入的京东商城数据图片使用css样式进行控制，微信小程序不支持渲染link标签，导致数据无法加载

解决办法：

首先看一下导入的京东商城数据，可以看到并没有我们想要的img标签，所有样式通过CSS背景样式进行加载

<div class="m-img">
<div id='zbViewModulesH'  value='14193'></div>
	<input id='zbViewModulesHeight' type='hidden' value='14193'/>
	<div skudesign="100010"></div>
	<div class="ssd-module-wrap" >
		<div class="ssd-module M15566120762731 animate-M15566120762731" data-id="M15566120762731"></div>
		<div class="ssd-module M15566120762942 animate-M15566120762942" data-id="M15566120762942"></div>
		<div class="ssd-module M15566120763073 animate-M15566120763073" data-id="M15566120763073"></div>
		<div class="ssd-module M15566120763194 animate-M15566120763194" data-id="M15566120763194"></div>
		<div class="ssd-module M15566120763435 animate-M15566120763435" data-id="M15566120763435"></div>
		<div class="ssd-module M15566120763696 animate-M15566120763696" data-id="M15566120763696"></div>
	</div>
	<link rel='stylesheet' type='text/css' href='//sku-market-gw.jd.com/css/pc/108468.css?t=1588108340241' media='all' />
	<div class="tools" hidden style="display: none;">
		<i class="fa fa-arrow-up move-up disabled"></i>
		<i class="fa fa-arrow-down move-down"></i>
		<em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em>
		<div class="cover"></div>
	</div>
</div>

接下来我们看一下link所加载的css样式

.ssd-module-wrap .M15566120762731 {
    width:750px;
    background-color:#f2f2f2;
    background-image:url(//img30.360buyimg.com/sku/jfs/t1/28457/26/6227/299844/5c4c01f8E52323736/addfcee1f00e0909.jpg);
    height:3261px
}
.ssd-module-wrap .M15566120762942 {
    width:750px;
    background-color:#b3b3b3;
    background-image:url(//img30.360buyimg.com/sku/jfs/t1/14561/19/6389/302620/5c4c01f8E47afdf6d/9b212f20013e2571.jpg);
    height:2205px
}
.ssd-module-wrap .M15566120763073 {
    width:750px;
    background-color:#e9e9e9;
    background-image:url(//img30.360buyimg.com/sku/jfs/t1/21443/39/6267/297522/5c4c01f8E17b334ca/e471d00b020474e6.jpg);
    height:2174px
}
.ssd-module-wrap .M15566120763194 {
    width:750px;
    background-color:#d7d7d7;
    background-image:url(//img30.360buyimg.com/sku/jfs/t1/10751/28/9992/299618/5c4c01f8E4e48f4ee/7d170dcee3ca8efc.jpg);
    height:2190px
}
.ssd-module-wrap .M15566120763435 {
    width:750px;
    background-color:#b3b3b3;
    background-image:url(//img30.360buyimg.com/sku/jfs/t1/11492/18/7208/302063/5c4c01f8E5adc3872/82eefe90d8b26393.jpg);
    height:2253px
}
.ssd-module-wrap .M15566120763696 {
    width:750px;
    background-color:#cbcbcb;
    background-image:url(//img30.360buyimg.com/sku/jfs/t1/17649/16/6275/302643/5c4c01f8E43a34ce0/10a8cc4a5eac5b71.jpg);
    height:2110px
}

我们使用wx.downloadFile把link标签中的css文件下载到本地，然后通过wx.getFileSystemManager().readFile读取本地css文件，读取之后再对css样式进行处理，变成我们想要的img标签，具体处理方法如下：

假如data是我们读取到的css样式
let matchData = data.match( /url\((.+?)*\)/g ) //通过正则匹配出带有url的变量并存储
let imgsList = ''  //定义变量接收img标签数组
for(let i in matchData){
    // 去掉‘url(’,转换后的格式是--->  xxx.jpg)
    let oneSubstr = matchData[i].substr(4)
    // 去掉最后的)括号 转换后的格式是---> xxx.jpg
    let twoSubstr = oneSubstr.substr(0,oneSubstr.length-1)
    // 然后把图片url拼接到img标签上 转换后的格式是--->   <img style="width:100%;" src="xxx.jpg">
    imgsList += `<img style="width:100%;" src="${twoSubstr}">`
  }

最后将得到的imgsList数组赋值给页面显示的data

注意：

需要在微信小程序后台服务器白名单中配置link标签和img标签中的域名，否则体验版也无法正常显示
存在css样式中返回的url格式不统一，有的带有https，有的没有，这里我们可以使用简单的if else进行过滤添加，如果带有https则正常返回，如果没有https我们就在前面加上

标签：sku,rich,url,微信,jpg,标签,background,text,css
来源： https://blog.csdn.net/liang4297/article/details/105889678

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序rich-text 导入京东商城数据样式丢失