The wxparse's discuss from csonchen

重新设置html后图片一直会显示loading状态

大佬，代码如下：

const Page: FC = () => {
    const html = `
        <h2 style="color: red;">文章标题</h2>
        <main>
            <article>文章内容</article>
            <img src="https://storage.360buyimg.com/cjj-pub-images/taro-daily.jpeg" alt="图片" width="100%" height="auto" />
            <p>这是很长一段文字</p>
        </main>
    `
    const [htmlText, setHtmlText] = useState(html)
    const handleClick = () => {
        setHtmlText(html + `<footer>这里是页脚</footer>`)
    }
return (
        <View>
            <View>我的</View>
            <View>
                <wxParse nodes={htmlText} />
            </View>
            <Button type='primary' onClick={handleClick}>改变html</Button>
        </View>
    )
}
export default Page

当我点击按钮改变html的时候，图片一直会显示loading状态而不显示出图片来，麻烦看下这个bug呢？开源不易，万分感谢!

微信公众号文章无法识别

你好，我们获得了微信公众号的html富文本，但是在检查了标签确实是闭合的情况下，依然无法解析显示

下面是html的代码
[https://paste.ubuntu.com/p/7jNnc7hfDd/]

谢谢大佬！！

点击图片放大之后，在当前图片手势拖拽会触发下拉刷新页面

图片放大之后，滚动会触发下拉刷新页面，是否可考虑点击图片时候 triggerEvent 一个函数，用来区分是否进入模式

富文本内容含多张图片时，只显示出第一张图片

富文本内容含多张图片时，只显示出第一张图片，其他的都是显示Loading状态！

代码片段：https://developers.weixin.qq.com/s/VWopxGmL73i8

const bindData = (() => { let instance = null return function(bindName, data) { if (!instance) { instance = { [bindName]: data } }else if(data){ instance[bindName] = data; } return instance[bindName] } })();
解决了该函数不会进行数据更新，导致图片预览失败

关于图片

你好，我看到图片默认是先加载一次，然后占位，这个过程不是已经占用资源了吗，能否优化一下

建议，是否支持图片、超链接等标签的tap 回调监听呢？

如果我需要对a\img等标签的点击事件进行处理，是否可以暴露这样一个callback function呢？

富文本不能正确展示空格和换行

富文本不能正确展示空格和换行，解决方法是把wxDiscode.js文件内
str = str.replace(/ /g, ' ');改成str = str.replace(/ /g, '\xa0');

图片加载2次的问题

第一次加载进入页面的时候, 所有图片会加载一次
当下滑的时候, 图片又会重新再加载一次
有办法设置为懒加载吗

建议可以插件化配置

dist里面代码都是压缩的，增删组件比如showdown.js不太方便。
建议参考 https://github.com/sbfkcel/towxml/blob/master/config.js，可以配置化。

是否需要markdown
是否需要highlight
等等

图片优化后不是行内块内容，不能居中展示

11111111

↵

1111

↵

222

贴上解析的字符串

audio标签渲染不出来

html代码如下：

<audio title="我是标题" src="https://media.lycheer.net/lecture/25840237/5026279_1509614610000.mp3?0.1" /> <audio poster="https://blog-1258875084.cos.ap-guangzhou.myqcloud.com/uTools_1628491972234_1628492318488.png" name="Cheap Dream" author="EnMoon1" src="https://blog-1258875084.cos.ap-guangzhou.myqcloud.com/EnMoon1%E5%B0%B9%E6%85%95%E6%81%A9-Cheap%20Dream_1628696767455.mp3" id="myAudio" controls loop> </audio> 这场名利游戏压了多少赌注

请问可以预览富文本中的图片吗

请问后台推荐使用哪个富文本控件更兼容这个前端插件？

请问后台推荐使用哪个富文本插件，更兼容这个前端插件？

能解析多大的富文本？

我原生写的小程序，现在后台上传五花八门编辑好的页面，有的4-6M，要么解析不处理，要么卡半天，，我用的richtext，不知道这个目前可以解析多大的文件（很多背景动画解析不出来，这个问题不知道会是否存在）

两个设置了display:inline的元素（其中一个文本较多，另一个较少），没有在同一行连续挨着展示，而是两个元素换行展示了

汉字与字符串连接时换行问题

如果汉字与字母相连如：测试文字XXXXXXXXXXXXXXXXXXXXXX,在需要换行时会发生字母整体换行

需要自行增加css wxParse text{ word-break: break-all; }解决

转译失败！

span 标签转不到

<a>标签跳转不支持也，能帮忙看下吗？

图片加载的问题

小程序在图片加载时候一直转圈无法加载出来。后台监控的报错代码如下：

undefined is not an object (evaluating 'o.templateInfo.templateId')
at (WASubContext.js:2:811970)
at E (WASubContext.js:2:67251)
at f (WASubContext.js:2:811802)
at (WASubContext.js:2:491432)
at E (WASubContext.js:2:67251)
at (WASubContext.js:2:491368)
at (WASubContext.js:2:785733)
at (WASubContext.js:2:524041)
at (WASubContext.js:2:1765190)
at (WASubContext.js:2:1765320)
at s (WASubContext.js:2:110706)
at (WASubContext.js:2:111168)
at (app-service.js:7325:1573)
at success (app-service.js:7103:1412)
at (WASubContext.js:2:1764555)
at w (WASubContext.js:2:783889)
at success (WASubContext.js:2:786045)
at h (WASubContext.js:2:111445)
at (WASubContext.js:2:112266)
at A (WASubContext.js:2:459731)
at (WASubContext.js:2:662668)
at h (WASubContext.js:2:111445)
at (WASubContext.js:2:112266)
at (WASubContext.js:2:625145)
at forEach (native code)
at value (WASubContext.js:2:625118)
at R (WASubContext.js:2:663650)
at (WASubContext.js:2:664996)
at (WASubContext.js:2:490212)
at (WAServiceMainContext.js:2:254859)
at _ (WAServiceMainContext.js:2:78159)
global code

可否增加svg之类的标签解析

楼主：项目正在维护中，请各位提issue的时候可以发一下有问题的html富文本代码片段

由于原项目不再维护了，我这边重新对原来项目进行自定义Component重构，因为子组件标签外层会预先套上一层wxParse的父标签，造成个别css样式出现错乱，希望大家可以共同努力，一起维护下去。

这里我大概列举一下提issue流程：

粘贴出现问题的html富文本
提供最小范例的代码片段链接，我这边可以直接打开去复现

以上二者材料最好可以一起提供，这样我可以快速定位到问题，及时帮助到大家。谢谢了

图片中有二维码，可否实现长按图片识别图中二维码的功能！

如题

这个作者会不会随时停止维护呢。。

等个答案

为什么传入的 html 没有显示出来？

显示的是硬编码进去的示例内容

https://github.com/csonchen/wxParse/blob/master/pages/index/index.js#L40

按这个写法引用的

<wxParse nodes="{{ htmlText }}" />

预览图片函数 wxParseImgTap 获取新增的 properties 一直为内置默认值，不响应父组件传值

可否增加 <hr/> 标签解析

可否增加

标签解析

请问富文本和代码高亮如何同时实现.

大佬是这么回事.

我自己做了一个自己博客的小程序.
源是HTML,内部有多个代码示例.(能实现高亮最好).

pc页面如下

小程序用了解析之后,一般标签没问题.
主要是标签这块 .


问题1, \r\n不解析,丢失.

HTML代码片段,  实际渲染的时候,好像所有的标签内的 \r\n都没有渲染.(其他标签的没注意)

而实际上页面有\r\n

\/\/C++11\r\n\r\ntemplate....
问题2,
也就是我HTML中有多个code标签.

数量是不固定的.

好像按你代码高亮DEMO只能一个一个添加....

请问有没有自动安排的套路?
问题3,
内链替换问题.
本身我博文就有一些内链互相引用.

比如html

<a href="../../show/73.html" target="_blank" rel="noopener">链接</a>

这种链接没办法解析.即使带自己域名全链接,也没办法打开,因为个人小程序没有打开web页面的权限.
小程序博文显示页路径 pages/detail/detail?id=128

web链接 www.abc.com/show/128.html

实际就是一个ID替换.

这个我自己先研究下,应该可以api返回的时候替换处理掉.

下面是api返回完整的json.
{"code":1,"msg":"ok","data":{"info":{"id":128,"type":"","title":"C\/C++ 获取std::string [] 可变数组元素个数","cate_id":16,"keyword":null,"intro":"百度了一圈啥玩意都没找到,还是谷歌靠谱.","avatar":"","content":"<p>像std::string数组用sizeof并不太准确.百度找了一大圈,没有好办法.还是靠谷歌.<\/p>\r\n<p>&nbsp;<\/p>\r\n<blockquote>\r\n<p>std::string&nbsp; abc [] = {\"test\",\"test2\",\"test3\",\"test4\"};<\/p>\r\n<\/blockquote>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<h2>用宏求<\/h2>\r\n<p>&nbsp;<\/p>\r\n<pre class=\"language-c\"><code>\/\/C++11\r\n\r\ntemplate &lt; typename T, std::size_t N &gt;\r\nconstexpr std::size_t size( T(&amp;)[N] ) { return N ; }\r\n\r\n\r\nstd::cout &lt;&lt; \"array 'abc' size: \" &lt;&lt; size(abc) &lt;&lt; ' ' ;<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<h2>用std::end求<\/h2>\r\n<p>&nbsp;<\/p>\r\n<pre class=\"language-c\"><code>\/\/C++11\r\n\r\n\r\nstd::cout &lt;&lt; std::end(abc) - std::begin(abc) &lt;&lt; ' ' ;<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<h2>通过维度计算<\/h2>\r\n<p>&nbsp;<\/p>\r\n<pre class=\"language-c\"><code>\/\/C++11\r\n\r\n\r\nstd::cout &lt;&lt; std::extent&lt; decltype(abc) &gt;::value &lt;&lt; ' ' ;\r\n<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<h2>向量类型计算<\/h2>\r\n<p>&nbsp;<\/p>\r\n<p>这个我也没搞懂.先贴出来.<\/p>\r\n<p>&nbsp;<\/p>\r\n<pre class=\"language-c\"><code>\/\/ C++11 \r\n\r\n\r\n#include &lt;vector&gt;\r\n#include &lt;string&gt;\r\n\r\nstd::vector vs {\"a\", \"be\", \"see\"}; \r\nstd::size_t length = vs.size();<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<h2>for枚举<\/h2>\r\n<p>&nbsp;<\/p>\r\n<p>当然,效率不高.<\/p>\r\n<p>这个可以在for内直接枚举.<\/p>\r\n<p>&nbsp;<\/p>\r\n<pre class=\"language-c\"><code>\/\/c++ 11\r\n\r\nint count = 0;\r\n\r\nfor (auto v : abc)\r\n{\r\n        \r\n        \/\/直接用 v 参与计算,这里 v等价于 abc[count];\r\n\r\n        \/\/先干其他的.再累加.\r\n        count++;\r\n         \r\n}<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<h2>参考<\/h2>\r\n<p>&nbsp;<\/p>\r\n<p><a href=\"http:\/\/www.cplusplus.com\/forum\/general\/110091\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.cplusplus.com\/forum\/general\/110091\/#<\/a><\/p>\r\n<p><a href=\"https:\/\/blog.csdn.net\/u010196624\/article\/details\/90085547\" target=\"_blank\" rel=\"noopener\">https:\/\/blog.csdn.net\/u010196624\/article\/details\/90085547<\/a><\/p>\r\n<p><a href=\"https:\/\/www.cnblogs.com\/developing\/articles\/10890903.html\" target=\"_blank\" rel=\"noopener\">https:\/\/www.cnblogs.com\/developing\/articles\/10890903.html<\/a><\/p>\r\n<p>&nbsp;<\/p>","updatetime":1604955411,"createtime":1604264702,"sort":128,"view_count":136,"jump_url":null,"author":null,"status":"normal","is_top":0,"ctitle":"博文","c_url":"https:\/\/www.yge.me\/show\/128.html","c_domain":"https:\/\/test.yge.me","after":{"id":126,"type":"","title":"C\/C++语言几种字符串类型互相转换","cate_id":16,"keyword":null,"intro":"const char * , char *  , char[] , string  互相转换.","avatar":"","updatetime":1604264937,"createtime":1604080264,"sort":126,"view_count":141,"jump_url":null,"author":null,"status":"normal","is_top":0},"front":{"id":130,"type":"","title":"AJAX 跨域请求 cookie问题","cate_id":16,"keyword":null,"intro":"js跨域请求的时候遇到的问题.","avatar":"","updatetime":1605609786,"createtime":1604375566,"sort":130,"view_count":133,"jump_url":null,"author":null,"status":"normal","is_top":0}}}}

<audio title="标题" desc="描述" src="https://media.lycheer.net/lecture/25840237/5026279_1509614610000.mp3?0.1"></audio>

wxml

<wxAudio class="content" nodes="{{post.content}}" />

模拟器预览：

Cannot read property 'src' of undefined

            if (node.tag === 'img') {
                node.imgIndex = results.images.length;
                var imgUrl = node.attr.src;
                if (imgUrl[0] == '') {
                    imgUrl.splice(0, 1);
                }