rich-text无法解析link标签

迈不过友情╰ 2023-02-11 07:15 67阅读 0赞

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

![original.png][]

[程序员小鸿][Link 1] 2019-10-09 20:14:09 ![articleRead.png][] 638  ![collect.png][] ![tobarCollectionActive.png][] 已收藏  1

最后发布:2019-10-09 20:14:09 首发:2019-10-09 19:22:22

分类专栏： [ 微信小程序 ][Link 2] [ 前端 ][Link 3]

本文链接： [https://blog.csdn.net/qq\_35610214/article/details/102468150][https_blog.csdn.net_qq_35610214_article_details_102468150]

展开

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

[rich-text组件用法][rich-text]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjEwMjE0_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjEwMjE0_size_16_color_FFFFFF_t_70 1][]

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

--------------------

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

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文档

![20191009194048426.png][]

[点击了解：wx.downloadFile使用方法][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使用方法][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; 
       }

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

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

[original.png]: https://csdnimg.cn/release/phoenix/template/new_img/original.png
[Link 1]: https://me.csdn.net/qq_35610214
[articleRead.png]: https://csdnimg.cn/release/phoenix/template/new_img/articleRead.png
[collect.png]: https://csdnimg.cn/release/phoenix/template/new_img/collect.png
[tobarCollectionActive.png]: https://csdnimg.cn/release/phoenix/template/new_img/tobarCollectionActive.png
[Link 2]: https://blog.csdn.net/qq_35610214/category_8680637.html
[Link 3]: https://blog.csdn.net/qq_35610214/category_9176565.html
[CC 4.0 BY-SA]: http://creativecommons.org/licenses/by-sa/4.0/
[https_blog.csdn.net_qq_35610214_article_details_102468150]: https://blog.csdn.net/qq_35610214/article/details/102468150
[rich-text]: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjEwMjE0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191009192110261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjEwMjE0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjEwMjE0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191009192434275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjEwMjE0,size_16,color_FFFFFF,t_70
[20191009194048426.png]: https://img-blog.csdnimg.cn/20191009194048426.png
[wx.downloadFile]: https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html
[wx.getFileSystemManager]: https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.getFileSystemManager.html