溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了小程序富文本提取圖片可放大縮小的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
啟發：
因為最近有需求說在小程序商品的詳情頁里所有圖片可以放大縮小，網上好像不太好找，就寫了篇博客，供大家參考
step1
獲取到富文本內容，怎么獲取就是請求數據嘛，這個不在贅述了。
var nodes = res.data.data.content;
step2
檢測 nodes中是否有img標簽，這個有很多方法，我這里用的indexOf
if (nodes.indexOf("src") >= 0) {
}step3
第三步就是用正則全局匹配img標簽，并且替換成空，這里setData是為了把圖片添加到wxml顯示的，說下match和captrue，第一個是帶有img標簽的返回值，第二個是src的值
//s3:正則匹配所有圖片路徑
var imgs = [];
nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
imgs.push(capture);
that.setData({
imgs: imgs
});
return '';
});step4
最后就是把多余的p標簽清除掉，影響樣式
//s4:清除圖片后正則匹配清除所有p標簽
nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
return '';
});完整的過程，本例親測可行
//富文本圖片放大
var nodes = res.data.data.content;
if (nodes.indexOf("src") >= 0) {
//正則匹配所有圖片路徑
var imgs = [];
nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
imgs.push(capture);
that.setData({
imgs: imgs
});
return '';
});
//清除圖片后正則匹配清除所有p標簽
nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
return '';
});
}end
step5
wxml中
<view class='detail'>
<rich-text nodes="{{nodes}}" bindtap='richImg'></rich-text>
</view>
<view class='detail1'>
<block wx:for="{{imgs}}" wx:key="" wx:for-item="item">
<image class='img' src='{{item}}' bindtap='chooseImg' data-src='{{item}}'></image>
</block>
</view>最后還有個預覽的js
chooseImg: function (e) { //預覽
var src = e.currentTarget.dataset.src;
var urls = [];
urls[0] = src;
wx.previewImage({
current: src, // 當前顯示圖片的http鏈接
urls: urls
})
},這里成功后可以需要調整圖片的樣式
最后
以上只是簡單的demo，圖片是連續的情況，但在富文本中可能會出現圖片不連續，這個后續會貼出來，基本思路就是rich-text也是循環添加到wxml中，本例親測可行，如有更好的方法，歡迎提出。
看完上述內容，是不是對小程序富文本提取圖片可放大縮小的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
