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文件夹即可。

1. 首先 在hbuilder中打开manifest.json文件，切换到源码视图

输入代码

"mp-weixin" : {
  ...
  "plugins": {
    "wxparserPlugin": {
      "version": "0.3.1",
      "provider": "wx9d4d4ffa781ff3ac"
    }
  }
}

1. 在page.json中输入如下代码

"usingComponents":{
	"wxparser": "plugin://wxparserPlugin/wxparser"
}

1. 引入组件

<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" />