小程序
小游戏
企业微信
微信支付
扫描小程序码分享
list.wpy文件通过wx.request请求列表到页面，该列表页点击进入查看列表内容详情HelpList.wpy。
示图=》
结果
由于微信小程序自定义了标签，但是富文本返回了H5标签在内，针对该问题，小程序中应该如何处理？
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
好的
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
rich-text不需要按文档这样写，他这样写是数组形式，我用的是string形式，就是把内容直接赋值给nodes就行了，但是rich-text经过我测试比较坑，对图片的解析太不友好，完全显示的原图，所以就用wxParse就好了
我github选的 参考文档是： https://github.com/ifanrx/wxParser
那个选的rich-text 还要自己解析 data.content富文本片段的吧？这样子就真的麻烦起来了。
<
style
>
@import '../wxParser/index.wxss';
.wrap{padding: 0 10px;}
</
template
view
class
=
"page"
"page__hd"
"page__title"
wxParser
"page__desc"
小程序富文本示例
"page__bd wrap"
参考文档： https://github.com/ifanrx/wxParser
import
src
"../wxParser/index.wxml"
/>
"wxParser"
is
data
"{{wxParserData:richText.nodes}}"
rich-text
nodes
"{{nodes}}"
bindtap
"tap"
script
import wepy from 'wepy';
const wxParser = require('../wxParser/index');
export default class WxParserDemo extends wepy.page {
data = {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}
methods = {
tap() {
console.log('tap')
onLoad() {
var self = this;
var Html = "<
div
><
a
href
'https://mp.weixin.qq.com'
>微信小程序</
strong
>富文本</
>示例</
>";
// var Html="<
>微信小程序<
wxParser.parse({
bind: 'richText',
html: Html,
target: this,
enablePreviewImage: false,
// 禁用图片预览功能
tapLink: function(url) {
// 点击超链接时的回调函数
// url 就是 HTML 富文本中 a 标签的 href 属性值
// 这里可以自定义点击事件逻辑，比如页面跳转
console.log("url=>", url);
wx.navigateTo({
url: url
});
更新一下，对比了下wxParse和rich-text组件，我发现如果富文本里面有特别大的图片，rich-text这个组件显示图片的时候是直接显示原大小的，直接超出屏幕了，而wxParse能显示出来整张图片，并且还可以通过外包view标签来设置整体宽度等等；不过也可能rich-text跟我直接用string类型有关系吧
目前我这边找到的办法有两个，一个是引入wxParse插件，这个插件能将标签转换成小程序的，另一个办法是用小程序自带组件 富文本 rich-text；这两种办法都是能将html标签解析出来的，但是目前遇到了两个问题，一个是空格 这种没法解析，只能靠正则匹配之后替换为小程序的空格\xa0（直接替换为' '这种空格的话只能显示一个）；另一个问题就是图片解析出来基本是原图大小，很容易满屏显示，很蛋疼，希望官方能解决一下？
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
好的
rich-text不需要按文档这样写，他这样写是数组形式，我用的是string形式，就是把内容直接赋值给nodes就行了，但是rich-text经过我测试比较坑，对图片的解析太不友好，完全显示的原图，所以就用wxParse就好了
我github选的 参考文档是： https://github.com/ifanrx/wxParser
那个选的rich-text 还要自己解析 data.content富文本片段的吧？这样子就真的麻烦起来了。
<style>@import '../wxParser/index.wxss';.wrap{padding: 0 10px;}</style><template><viewclass="page"><viewclass="page__hd"><viewclass="page__title">wxParser</view><viewclass="page__desc">小程序富文本示例</view></view><viewclass="page__bd wrap"><view>参考文档： https://github.com/ifanrx/wxParser</view><importsrc="../wxParser/index.wxml"/><viewclass="wxParser"><templateis="wxParser"data="{{wxParserData:richText.nodes}}"/></view><rich-textnodes="{{nodes}}"bindtap="tap"></rich-text></view></view></template><script>import wepy from 'wepy';const wxParser = require('../wxParser/index');export default class WxParserDemo extends wepy.page {data = {nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: red;'},children: [{type: 'text',text: 'Hello World!'}]}]}methods = {tap() {console.log('tap')}}onLoad() {var self = this;var Html = "<div><ahref='https://mp.weixin.qq.com'>微信小程序</a><strong>富文本</strong>示例</div>";// var Html="<div>微信小程序<strong>富文本</strong>示例</div>";wxParser.parse({bind: 'richText',html: Html,target: this,enablePreviewImage: false,// 禁用图片预览功能tapLink: function(url) {// 点击超链接时的回调函数// url 就是 HTML 富文本中 a 标签的 href 属性值// 这里可以自定义点击事件逻辑，比如页面跳转console.log("url=>", url);wx.navigateTo({url: url});}});}}</script>更新一下，对比了下wxParse和rich-text组件，我发现如果富文本里面有特别大的图片，rich-text这个组件显示图片的时候是直接显示原大小的，直接超出屏幕了，而wxParse能显示出来整张图片，并且还可以通过外包view标签来设置整体宽度等等；不过也可能rich-text跟我直接用string类型有关系吧
目前我这边找到的办法有两个，一个是引入wxParse插件，这个插件能将标签转换成小程序的，另一个办法是用小程序自带组件 富文本 rich-text；这两种办法都是能将html标签解析出来的，但是目前遇到了两个问题，一个是空格 这种没法解析，只能靠正则匹配之后替换为小程序的空格\xa0（直接替换为' '这种空格的话只能显示一个）；另一个问题就是图片解析出来基本是原图大小，很容易满屏显示，很蛋疼，希望官方能解决一下？