小程序的rich-text富文本标签不支持link标签，这就导致我们从京东商城拿到的商品详情富文本无法解析。
小程序商城对接京东商城商品，拿到的京东商品详情的富文本数据格式如下：
我们可以看到，拿到的商品详情并不是我们所想的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文档
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>
目前想到实现的方式就这两种，希望能帮助到你们！
另外你们可以关注下我的微信个人公众号“程序员小鸿”，有什么问题直接来公众号留言扣我哟！
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
