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

小程序的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.jpg
                    let 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
                  that.$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.jpg
    let 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>

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

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