本文鏈接:
展開
小程序的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+=
`
${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+=
`
${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小時內與您取得聯系。