uniapp微信小程序解析详情页的四种方法
一、用微信文档提供的RICH-TEXT
- 官方文档：微信文档rich-text
- 这种是直接使用：
<!-->content是API获取的html代码</-->
<rich-text nodes="{{content}}"></rich-text>
*注意：用rich-text不会达到直接想要的结果,比如图片大小最大宽度不是100%，需要自己用js控制
- 3.下面是处理html样式自适应的代码
/**
https://www.cnblogs.com/zichliang/
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性：max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉标签
*/
function formatRichText(html){
let newContent= html.replace(/]*>/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(/]*\/>/gi, '');
newContent = newContent.replace(/\, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
return newContent;
}
二、用插件WXPARSE解析HTML
WxParse : https://github.com/icindy/wxParse
因为本人用的是uniapp 使用第三种方法 更方便
这种也可以用吧，但是没有必要
简单说说吧
下载wxParse，只拷贝wxParse文件夹即可。
- 首先 在hbuilder中打开manifest.json文件，切换到源码视图
输入代码
"mp-weixin" : {
...
"plugins": {
"wxparserPlugin": {
"version": "0.3.1",
"provider": "wx9d4d4ffa781ff3ac"
}
}
}
- 在page.json中输入如下代码
"usingComponents":{
"wxparser": "plugin://wxparserPlugin/wxparser"
}
- 引入组件
<view class="content_box">
<wxparser :rich-text="富文本内容" />
</view>
三、直接使用插件 mp-html
https://github.com/jin-yufeng/mp-html
富文本组件【全端支持，支持编辑、latex等扩展】
https://ext.dcloud.net.cn/plugin?id=805
直接使用HBuilderX引入
<mp-html :content="富文本内容" />
四、uParse修复版-html富文本加载
https://github.com/gaoyia/parse
https://ext.dcloud.net.cn/plugin?id=364
直接使用HBuilderX引入
<u-parse :content="富文本内容" @preview="preview" @navigate="navigate" />
