【微信小程序】无法解析京东商城商品详情富文本数据

小程序的rich-text富文本标签不支持link标签，这就导致我们从京东商城拿到的商品详情富文本无法解析。

rich-text组件用法

小程序商城对接京东商城商品，拿到的京东商品详情的富文本数据格式如下：

我们可以看到，拿到的商品详情并不是我们所想的img标签而是通过link标签再次去请求css样式，可以看出上面有多个div，这也就是说明了图片是通过div当成背景图渲染出来的，我们来看看link的样式，看下图：

这就导致小程序无法解析京东的商品详情数据，我们直接来看解决办法，目前我想到的有两个解决方案，我们先来看最简单的第一个（我目前已经实现的方案）

第一方案：小程序实现的完整代码

if(that.dataObj.warehouseContent){// 匹配link标签href属性的值let css = that.dataObj.warehouseContent.match(/<link.+?href=\'(.+?)\'.*>/)[1]wx.downloadFile({url: `https:${css}`,  // 把京东的css下载到本地success (res) {if (res.statusCode === 200) {// 读取本地文件内容wx.getFileSystemManager().readFile({filePath:res.tempFilePath, // 本地css文件地址encoding:'utf8', // 通过utf8解析success(data){if(!data.data){return}// 匹配url的内容  匹配出来的格式是---> url(xxx.jpg)let matchData = data.data.match( /url\((.+?)*\)/g )let imgs = ''for(let matchDataIndex in matchData){// 去掉‘url(’,转换后的格式是--->  xxx.jpg)let oneSubstr = matchData[matchDataIndex].substr(4)// 去掉最后的)括号 转换后的格式是---> xxx.jpglet twoSubstr = oneSubstr.substr(0,oneSubstr.length-1)// 然后把图片url拼接到img标签上 转换后的格式是--->   <img style="width:100%;" src="xxx.jpg">imgs+= `<img style="width:100%;" src="${twoSubstr}">`}that.dataObj.warehouseContent = that.dataObj.warehouseContent + imgsthat.$apply()},fail(err){console.log('err',err)}})}}})}

上面是实现功能的完整代码

下面是对代码的分析

that.dataObj.warehouseContent是京东商品详情富文本内容，我们先通过正则表达式解析把link标签的href属性值解析出来（变量：css），然后下载（wx.downloadFile）京东的css样式文件到本地，不懂wx.downloadFile怎么使用的可以移步到微信小程序官方api文档

点击了解：wx.downloadFile使用方法

res.tempFilePath是css文件下载到本地文件所在的位置，再通过文件管理器读取本地文件内容，我们需要读取css文件的样式内容

wx.getFileSystemManager().readFile({filePath:res.tempFilePath, // 本地css文件地址encoding:'utf8', // 通过utf8解析success(data){console.log('拿到css文件内容:',data.data)         },fail(err){console.log('err',err)}
})

关于文件管理器（wx.getFileSystemManager）的用法请移步到微信小程序官方api：点击了解：wx.getFileSystemManager使用方法

data.data是我们的样式内容，这个时候我们使用正则把图片url匹配下来，重新拼接到img标签上：

// 匹配url的内容  匹配出来的格式是---> url(xxx.jpg)
let matchData = data.data.match( /url\((.+?)*\)/g )
let imgs = ''for(let matchDataIndex in matchData){// 去掉‘url(’,转换后的格式是--->  xxx.jpg)let oneSubstr = matchData[matchDataIndex].substr(4)// 去掉最后的)括号 转换后的格式是---> xxx.jpglet twoSubstr = oneSubstr.substr(0,oneSubstr.length-1)// 然后把图片url拼接到img标签上 转换后的格式是--->   <img style="width:100%;" src="xxx.jpg">imgs+= `<img style="width:100%;" src="${twoSubstr}">`
}
// 处理好的图片数据重新赋值回去
that.dataObj.warehouseContent = that.dataObj.warehouseContent + imgs

如果有不理解的可以看看我在代码上面写的注释，或者在下方评论。

方案二（还未实践，稍微复杂，但是实现的最终效果一样）

我们知道，小程序rich-text组件并不支持link标签和style标签，我尝试过下载京东的样式文件到本地，通过<sytle>这里插入京东的样式文件</style>，然后拼接到富文本内，但是这个方法并不可行，因为小程序rich-text组件不支持style标签，但是还有一种稍微复杂的方案，我们用正则匹配把每个类名对应花括号里面的样式解析下来，然后再渲染进div标签的style属性内，这种方式是可行的，但是会复杂一些，我们来看一下结构

.ssd-module-wrap .ssd-module,
.ssd-module-wrap .ssd-module-heading {width: 640px;position: relative;overflow: hidden;
}

<div class="ssd-module" style="width: 640px;position: relative;overflow: hidden;"></div>
<div class="ssd-module-heading" style="width: 640px;position: relative;overflow: hidden;"></div>

目前想到实现的方式就这两种，希望能帮助到你们！

另外你们可以关注下我的微信个人公众号“程序员小鸿”，有什么问题直接来公众号留言扣我哟！