uni-app开发微信小程序，如何使用towxml去渲染md格式和html标签格式的内容？

uni-app开发微信小程序如何使用towxml去渲染md格式和html标签格式的内容前言先看效果如何在项目中使用towxml第一步第二步总结前言一次偶然的面试面试官问到你有没有用过towxml我没有。于是面试结束后就开始在百度查了查到了它的githup地址towxml地址然后就把代码拉下来好好扒开看看。最终做出了一个来渲染面试题答案的组件实现了一个刷面试题的小程序。先看效果下面这个截图是从蝌蚪智汇小程序里面截出来的有兴趣的可以去看看如何在项目中使用towxml第一步先在项目的根目录创建一个wxcomponents的文件夹然后把towxml的源码放进去如下图所示第二步直接引入towxml方法使用完整代码如下templateviewclassmd-view!--页面头部--cu-custom bgColorbg-gradual-pink:isBacktrue:isCustomBackFntrueblock slotbackText返回/blockblock slotcontentmd文档展示/block/cu-customtowxml:nodeshtml//view/templatescriptimporttowxmlfrom/wxcomponents/towxml/index.js;import{text,htmlText}from./md-text.js;exportdefault{name:md-view,data(){return{html:}},mounted(){// 还可以直接渲染html代码towxml(htmlText, html)this.htmltowxml(text,markdown)console.log(this.html);}}/scriptstyle langscssscoped/stylemd-text.js文件代码exportconsttext## 渲染 code 方法, 如下 \\\html !DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 title/title /head body /body /html script /script \\\exportconsthtmlTextp style\line-height: 2;\span style\font-family: Pacifico;\当一个Vue实例创建时Vue会遍历/spanstrong style\font-family: Pacifico;\data/strongspan style\font-family: Pacifico;\中的属性用 /spanstrong style\font-family: Pacifico;\Object.defineProperty/strongspan style\font-family: Pacifico;\vue3.0使用proxy 将它们转为 /spanstrong style\font-family: Pacifico;\getter/setter/strongspan style\font-family: Pacifico;\并且在内部追踪相关依赖在属性被访问和修改时通知变化。 每个组件实例都有相应的 /spanstrong style\font-family: Pacifico;\watcher /strongspan style\font-family: Pacifico;\程序实例它会在组件渲染的过程中把属性记录为依赖之后当依赖项的setter被调用时会通知watcher重新计算从而致使它关联的组件得以更新。/span/p总结towxml使用起来倒是不难但有的效果展示还是不太理想可以去改改源码达到你想要的效果哦关注我不迷路不定期发表前端开发技巧类的文章