整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本文鏈接：
展開
小程序的rich-text富文本標簽不支持link標簽，這就導致我們從京東商城拿到的商品詳情富文本無法解析。
rich-text組件用法
小程序商城對接京東商城商品，拿到的京東商品詳情的富文本數據格式如下：
我們可以看到，拿到的商品詳情并不是我們所想的img標簽 而是通過link標簽再次去請求css樣式，可以看出上面有多個div，這也就是說明了圖片是通過div當成背景圖渲染出來的，我們來看看link的樣式，看下圖：
這就導致小程序無法解析京東的商品詳情數據，我們直接來看解決辦法，目前我想到的有兩個解決方案，我們先來看最簡單的第一個（我目前已經實現的方案）
第一方案：小程序實現的完整代碼
-
if(that.dataObj.warehouseContent){
-
// 匹配link標簽href屬性的值
-
let css = that.dataObj.warehouseContent.match(
/
/ )[
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標簽上 轉換后的格式是--->
-
imgs+=
`
![富文本存儲方案_小程序富文本解決方案_富文本原理](<span id="z99rt99" class=)
${twoSubstr}">`
-
}
-
-
that.dataObj.warehouseContent = that.dataObj.warehouseContent + imgs
-
that.$apply()
-
-
},
-
fail(err){
-
console.log(
'err',err)
-
}
-
})
-
}
-
}
-
})
-
}
上面是實現功能的完整代碼
下面是對代碼的分析
that.dataObj.是京東商品詳情富文本內容，我們先通過正則表達式解析把link標簽的href屬性值解析出來（變量：css），然后下載（wx.）京東的css樣式文件到本地，不懂wx.怎么使用的可以移步到微信小程序官方api文檔
點擊了解：wx.使用方法
res.是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.）的用法請移步到微信小程序官方api：點擊了解：wx.使用方法
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標簽上 轉換后的格式是--->
-
imgs+=
`
![富文本存儲方案_小程序富文本解決方案_富文本原理](<span id="bhlv9jh" class=)
${twoSubstr}">`
-
}
-
// 處理好的圖片數據重新賦值回去
-
that.dataObj.warehouseContent = that.dataObj.warehouseContent + imgs
如果有不理解的可以看看我在代碼上面寫的注釋，或者在下方評論。
方案二（還未實踐，稍微復雜，但是實現的最終效果一樣）
我們知道，小程序rich-text組件并不支持link標簽和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>
目前想到實現的方式就這兩種，希望能幫助到你們！
另外你們可以關注下我的微信個人公眾號“程序員小鴻”，有什么問題直接來公眾號留言扣我喲！
中國移動電話手表免費送的套路
近期中國移動推出防走失公益活動，電話手表免費送。經過搜索發現，網絡上有很多的類似消息，騙子公司冒充公益活動對消費者實施欺詐，對我們的這個公益項目產生較大的影響，特此截圖網絡上流行的騙術，大家需要防范！
1、百度搜索截圖，全是騙子的行騙方式，大家特別注意，不要入坑！
2、隱性捆綁消費，害人不淺。
3、承諾最低消費，否則違約了要繳納巨額費用。
4、用幾塊錢的虛假手表模型，讓客戶繳納巨額的快遞費，實施詐騙。
5、又是一個兩年合約的隱形消費，害人不淺！
6、新聞報道詐騙詳情
上面這些是當前市場上的欺詐行為的總結，請大家不要入坑！
中國移動防走失寶貝計劃公益行， 兒童電話手表免費！送請認準正規平臺，以免上當受騙。
正規活動宣傳單頁正面
正規活動宣傳單頁反面
中國移動公益行
電話手表免費送
兒童電話手表專屬套餐
每個月300分鐘+300M
150元6個月，200元12個月
現場免費選號、免費辦卡、為保護家長隱私無需實名、充值相應套餐， 即可獲得圖片同款電話手表
明明白白消費，絕無套路，絕無隱形消費，1年內不用繳納任何費用，不做任何捆綁，電話手表（智能防水電話手表）+電話卡（中國移動卡）+電話費（充值的專屬套餐）=通通都是你的，質量問題只換不修，續費以舊換新！
我們的愿望是讓中國的每一個兒童，不論是市區縣城還是農村鄉鎮和山村家庭，都能擁有屬于自己的兒童智能電話手表。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
