微信小程序富文本渲染组件 HTML转Markdown富文本解析

收藏

这次带来的一个作品是，html2wxml：微信小程序的富文本渲染组件，可以在小程序中显示 HTML / Markdown 这些富文本格式的内容。 大部分的小程序，详情内容都是从网站过来的，是 HTML 的格式，虽说 WXML 和 HTML 很类似，但不能直接用在小程序上。 在小程序刚出来的时候，想要显示 HTML 非常困难，后来出现了一个开源项目，原理是通过 JS 将 HTML 结构用 JSON 来表示，然后用模板和循环的方式渲染。但是这个项目已经很久没有更新了，效果也并不理想，例如

 标签中的代码依然会被解析成标签，但总算是迈出了一大步。

            
0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。 在线  充值
            

                    
                  
                
            

                分类：PHP 
                    > 微信
                难易：初级
            
           


                    
                        查看演示
                        
                            下载资源：
                            
                            次
                        
                    
                    

	
加我微信，拉你进VIP群学习：
	


                    
                        下载资源
                        
                            下载积分：
                            60
                            积分                        
                    
                
            
这次带来的一个作品是，html2wxml：微信小程序的富文本渲染组件，可以在小程序中显示 HTML / Markdown 这些富文本格式的内容。


大部分的小程序，详情内容都是从网站过来的，是 HTML 的格式，虽说 WXML 和 HTML 很类似，但不能直接用在小程序上。

在小程序刚出来的时候，想要显示 HTML 非常困难，后来出现了一个开源项目 wxParse，原理是通过 JS 将 HTML 结构用 JSON 来表示，然后用模板和循环的方式渲染。但是这个项目已经很久没有更新了，效果也并不理想，例如 <pre> 标签中的代码依然会被解析成标签，但总算是迈出了一大步。

后面官方也新增了一个 <rich-text> 标签，但支持的标签也是特别的少，而且可自定义的空间几乎没有。



基于 wxParse 的原理，我重新制作了一个富文本渲染组件，不再使用 JS 来进行结构的转换，而是使用PHP中的类 DOMDocument 来完成解析，这个类的解析准确率十分的高，可以将 HTML 的结构几乎无误地解析出来，有了这个前提，体验自然会高很多。


除了 wxParse 原本的功能，还支持代码高亮（highlightjs），令体验更加接近 Web 端。