cover_image

wxParser 插件更新,让你在小程序中更快速更完美部署富文本

知晓程序

<p id="rWUllnw"><img class="size-full wp-image-1330358 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d5e160f0e3.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d5e160f0e3.png 720w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d5e160f0e3-360x203.png 360w" sizes="(max-width: 720px) 100vw, 720px" /></p> <p>wxParser 小程序插件时隔一年终于更新了。这次更新主要针对在 gitthub 上同学们提出的 issue 进行一些特性的更新,更新后的 wxParser 将支持更多可配置项,让富文本更完美地在小程序端显示。</p> <h3>新特性:</h3> <ul> <li>image-lazy-load 属性,支持给所有图片设置懒加载;</li> <li>image-preview 属性设置图片是否支持点击放大,默认 true,点击放大;</li> <li>bindImgLoad 事件,监听小程序 image 标签的 bindload ,即图片加载完成的事件;</li> <li>组件生命周期的 ready, attached, detached 的监听事件,通 bind:ready,bind:attached, bind:detached 进行监听;</li> <li>支持外挂 class,可以在 wxss 文件给富文本内容添加自定义样式。</li> </ul> <h3>插件能做什么?</h3> <p>「wxParser」小程序插件由知晓云团队发布,经过对微信小程序富文本渲染引擎 wxParser 进行一层封装,解决了使用起来太过麻烦的问题。</p> <p>使用「wxParser」插件并配合富文本编辑器,可以很方便地开发内容展示类小程序,使用知晓云富文本编辑器效果更佳。例如「知晓课堂」小程序中的微信小程序开发课程便是使用「wxParser」插件配合知晓云内容库完成的。</p> <p id="enrHhSh"><img class="size-full wp-image-1330359 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6005b2bf3.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6005b2bf3.png 1080w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6005b2bf3-360x358.png 360w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6005b2bf3-768x764.png 768w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6005b2bf3-1024x1019.png 1024w" sizes="(max-width: 1080px) 100vw, 1080px" /></p> <p>以对在知晓云编写的富文本内容进行解析为例,进入到知晓云控制台后,点击左侧「内容」菜单项,进入内容库管理面板,添加内容,即可看见富文本编辑器。编辑的内容(左)即经过「wxParser」解析后的样式(右)如下:</p> <p id="WAgeSuA"><img class="size-full wp-image-1330360 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6019b4163.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6019b4163.png 734w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6019b4163-360x234.png 360w" sizes="(max-width: 734px) 100vw, 734px" /></p> <p id="fqpoYtl"><img class="size-full wp-image-1330361 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60a494175.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60a494175.png 733w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60a494175-360x208.png 360w" sizes="(max-width: 733px) 100vw, 733px" /></p> <p id="QfpHCMQ"><img class="size-full wp-image-1330362 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60aea4a7a.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60aea4a7a.png 707w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60aea4a7a-360x304.png 360w" sizes="(max-width: 707px) 100vw, 707px" /></p> <p>当然,并非一定要使用知晓云的内容库才能使用「wxParser」,例如你可以使用百度的 UEditor 富文本编辑器编写你的内容,然后将生成的 HTML 配置到「wxParser」即可。</p> <h3>如何接入「wxParser」插件?</h3> <p>在小程序中使用「wxParser」,你需要在项目中引入「wxParser」的 JS 库,同时,需要在相应的 WXML、WXSS 和 JS 文件中引入「wxParser」的模板、样式文件和编写初始化代码,少了任何一步,程序都不能正常工作。</p> <p>而在使用「wxParser」小程序插件后,不再需要引入「wxParser」JS 库了,你可以像使用普通组件一样使用「wxParser」,只需要对组件的属性进行配置即可,省去了引入多个库文件的操作。</p> <h4>1. 申请使用插件</h4> <h4>在「小程序管理后台 &#8211; 设置 &#8211; 第三方设置 &#8211; 插件管理」中查找插件名称「wxParser」(appid: wx9d4d4ffa781ff3ac),并申请使用。</h4> <p id="VjhKMEs"><img class="size-full wp-image-1330363 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60c467bee.png" alt="" srcset="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60c467bee.png 1080w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60c467bee-360x271.png 360w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60c467bee-768x577.png 768w, https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d60c467bee-1024x770.png 1024w" sizes="(max-width: 1080px) 100vw, 1080px" /></p> <p>&nbsp;</p> <h4>2. 引入插件代码</h4> <p>version 表示目前插件版本为 0.3.0,provider 为该插件的 AppID,而 wxparserPlugin 为自定义的插件名称。</p> <pre><code>"plugins": { "wxparserPlugin":{ "version": "0.3.0", "provider": "wx9d4d4ffa781ff3ac" } }</code></pre> <h4>3. 在需要使用到该插件的小程序页面的 JSON 配置文件中,做如下配置:</h4> <pre><code>{ "usingComponents": { "wxparser": "plugin://wxparserPlugin/wxparser" } }</code></pre> <h4>4. 设置你的富文本内容,定义为 richText:</h4> <pre><code>Page({ data: { richText: '&lt;h1&gt;Hello world!&lt;/h1&gt;' } })</code></pre> <p>最后在需要展示富文本内容的地方,使用「wxParser」组件,为 rich-text 属性赋值上你的富文本内容即可。</p> <pre><code>&lt;wxparser rich-text="{{richText}}" /&gt;</code></pre> <p>&nbsp;</p> <p>你是否正好有内容展示类的小程序,亦或准备开发一个?<a href="https://github.com/ifanrx/wxParser-plugin" rel="nofollow">查看开发文档</a>,立即体验「wxParser」小程序插件。</p> <p>扫描下方二维码,体验文章所提及的「知晓课堂」小程序。并带你遨游在小程序开发的知识海洋中。</p> <p id="OqUesYy"><img class="size-full wp-image-1330364 aligncenter" src="https://s3.ifanr.com/wp-content/uploads/2020/04/img_5e9d6156e2781.png" alt="" /></p>