知識(shí)
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營(yíng)銷的便利,運(yùn)營(yíng)的高效,讓網(wǎng)站成為營(yíng)銷工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持!
您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >
uniapp開發(fā)支付寶小程序/微信小程序時(shí),顯示富文本文件
發(fā)表時(shí)間:2020-10-14
發(fā)布人:葵宇科技
瀏覽次數(shù):144
微信
<!-- #ifndef MP-ALIPAY -->
<view class="detailsContent" v-html="imgStyle(details.text)">
</view>
<!-- #endif -->
imgStyle(val){
if(val!=''&&val!=undefined&&val!=null){
return val?.replace(/<img/g, '<img style="max-width: 100%!important;display: block;margin: 0 auto;"')
}else{
return val;
}
},
支付寶
<!-- #ifdef MP-ALIPAY -->
<rich-text :nodes="changeText(details.text)"></rich-text>
<!-- #endif -->
/**支付寶處理富文本文件*/
changeText(html){
/**
* 處理富文本里的圖片寬度自適應(yīng)
* 1.去掉img標(biāo)簽里的style、width、height屬性
* 2.img標(biāo)簽添加style屬性:max-width:100%;height:auto
* 3.修改所有style里的width屬性為max-width:100%
* 4.去掉<br/>標(biāo)簽
* @param html
* @returns {void|string|*}
*/
if(html!=''&&html!=undefined&&html!=null){
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
//將 HTML String轉(zhuǎn)化為 nodes 數(shù)組
const content = new HTMLParser(newContent.replace()?.trim());
return content;
}else{
return html;
}
}
用到的類庫 html-parser.js
相關(guān)案例查看更多
相關(guān)閱讀
- 云南網(wǎng)站開發(fā)
- web服務(wù)
- 搜索排名
- 網(wǎng)站建設(shè)電話
- 昆明網(wǎng)站開發(fā)
- 網(wǎng)絡(luò)公司哪家好
- 文山小程序開發(fā)
- 云南網(wǎng)站建設(shè)選
- 昆明小程序定制開發(fā)
- 報(bào)廢車
- 軟件開發(fā)
- 公眾號(hào)模板消息
- 云南小程序開發(fā)哪家好
- 定制小程序開發(fā)
- 昆明軟件定制公司
- 百度自然排名
- 退款
- 云南網(wǎng)站設(shè)計(jì)
- 做網(wǎng)站
- 云南網(wǎng)站建設(shè)首選
- 小程序生成海報(bào)
- 云南小程序設(shè)計(jì)
- 網(wǎng)站建設(shè)特性
- 網(wǎng)站建設(shè)招商
- 網(wǎng)站建設(shè)哪家強(qiáng)
- flex
- 怎么做網(wǎng)站
- 云南省建設(shè)廳網(wǎng)站官網(wǎng)
- 小程序設(shè)計(jì)
- 百度小程序