想在小程序中快速部署富文本?这个插件让你一步搞定

继「知晓云 SDK」小程序插件发布后,知晓云又发布了 wxParser 的小程序插件版本 wxParser-plugin,经过对 wxParser 进行一层封装,解决了 wxParser 使用起来太过麻烦的问题。

使用 wxParser 并配合富文本编辑器,可以很方便地开发内容展示类小程序,使用知晓云富文本编辑器效果更佳,还可以将小程序中需要可配置的内容保存到知晓云内容库。例如「知晓课堂」小程序中的微信小程序开发课程便是使用 wxParser 配合知晓云内容库完成的。

wxParser 功能介绍

目前 wxParser 支持对一般的富文本内容包括标题、字体大小、对齐和列表等进行解析。同时也支持表格、代码块、图片和音视频等复杂富文本内容的解析。

以对在知晓云编写的富文本内容进行解析为例,进入到知晓云控制台,点击左侧内容菜单项,进入内容库管理面板,新建内容,即可看见富文本编辑器。编辑的内容(左)即经过 wxParser 解析后的样式(右)如下:

? 对图片和引用的解析

? 对标题、加粗、斜体、下划线和删除线的解析

? 对字体大小、列表、表格和代码块的解析

同时,配合知晓云的富文本编辑器,可以实现将图片和音视频资源上传到 CDN,使用知晓云的文件管理功能可以方便地对这些资源进行管理。wxParser 不仅仅可以解析一般的富文本内容,它也可以解析一些小程序特有的属性,如下,你可以配置视频的静音、自动播放等功能,也可以配置音频组件的海报等功能。

当然,并非一定要使用知晓云的内容库才能使用 wxParser,例如你可以使用百度的 UEditor 富文本编辑器编写你的内容,然后将生成的 HTML 配置到 wxParser 即可。

在小程序中使用 wxParser,你需要在项目中引入 wxParser JS 库,同时,需要在相应的 WXML、WXSS 和 JS 文件中引入 wxParser 的模板、样式文件和编写初始化代码,少了任何一步,程序都不能正常工作。

而在使用 wxParser 小程序插件后,不再需要引入 wxParser JS 库了,你可以像使用普通组件一样使用 wxParser,只需要对组件的属性进行配置即可,省去了引入多个库文件的操作。

wxParser-plugin 插件使用方法

目前 wxParser-plugin 插件信息:

AppID

wx9d4d4ffa781ff3ac

版本号

0.1.0

那么具体如何操作呢?下面为大家简单介绍一下:

1. 在微信小程序管理后台,按 AppID(wx9d4d4ffa781ff3ac)搜索到该插件,并点击添加,即可在代码中使用 wxParser-plugin 了。

2. 在 app.json 中声明插件引入。version 表示目前插件版本为 0.1.0,provider 为该插件的 AppID,而 wxparserPlugin 为自定义的插件名称。

"plugins": {
  "wxparserPlugin": {
    "version": "0.1.0",
    "provider": "wx9d4d4ffa781ff3ac"
  }
}

3. 在需要使用到该插件的小程序页面的 JSON 配置文件中,做如下配置:

{
  "usingComponents": {
    "wxparser": "plugin://wxparserPlugin/wxparser"
  }
}

4. 设置你的富文本内容,定义为 richText:

Page({
  data: {
    richText: '<h1>Hello world!</h1>'
  }
})

然后在需要展示富文本内容的地方,使用 wxparser 组件,为 rich-text 属性赋值上你的富文本内容即可。

<wxparser rich-text="{{richText}}" />

同时,插件也提供了 bind:tapImg 和 bind:tapImg 两个监听事件用于点击图片和链接时的自定义处理,详细使用可参考插件的文档。

插件开发者招募

知晓程序推出首个「插件市场」,免费为开发者提供插件的展示与交易服务,让优秀的插件快速对接用户。

目前,首批入驻开发者 100 人计划持续招募中!成为受邀开发者的条件只有一个:了解并熟悉小程序开发!

1. 如果你是对插件有兴趣的开发者,请添加晓小云(ID:minsupport3),加入插件开发讨论群。

2. 如果你已经成功开发插件,请用电脑访问 https://minapp.com/ ,点击顶部「插件市场」按钮,上传并提交你的小程序插件信息。

相关阅读

/ 知晓程序

终于过审!首批小程序插件诞生了!

/ 晓实战

这样编辑小程序富文本,又快又方便!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2018-04-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【编程入门】互联网的本质技术

首先要知道网站访问大概是什么个过程: 假设你在浏览器地址栏输入这个问题的地址 http://www.zhihu.com/question/22689579 访问...

42111
来自专栏前端布道

前端开发必备之chrome插件

Chrome浏览器目前是网络上可用的最好的浏览器之一,并且自2011年11月超越了Firefox浏览器之后,已经成为了互联网上占主导地位的浏览器。 本篇文章将与...

3376
来自专栏娱乐心理测试

小程序如何引入外部字体(方法详解)

4785
来自专栏我和未来有约会

Silverlight初级教程-认识工作区

Silverlight初级教程 认识工作区 现在silverlight的教程也有不少了。正如之前所说我要以flasher的角度去开发silverlight。在...

3336
来自专栏QQ会员技术团队的专栏

一起脱去小程序的外套和内衣:微信小程序架构解析

微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起...

5.2K3
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(15)---使用 Spread 设计器

通过 Spread 设计器用户可以快速地对 Spread 控件进行设计。无论用户是正在做一个关于 Spread 控件特性的原型研究,还是对于一个已经存在的 Sp...

1829
来自专栏狮乐园

高级 Angular 组件模式 (7)

因为父组件会提供所有相关的 UI 元素(比如这里的 button),所以 toggle 组件的开发者可能无法满足组件使用者的一些附加需求,比如,在一个自定义的开...

1122
来自专栏DeveWork

修改WordPress 搜索结果页面url 形式,安全有保障

偶然发现开源中国(OSC)的搜索功能不能在非用户登录情况下使用,据说是被攻击了,无奈之下只得关闭游客搜索功能;据说WordPress 也可以通过向搜索地址传递某...

18010
来自专栏腾讯NEXT学位

使用 CSS 追踪用户

3479
来自专栏猿人谷

ubuntu的美化

一、Usplash画面(开机/启动画面) 它就相当于Windows的开机/启动画面,因为 ubuntu 使用usplash这个软件作为启动画面,所以我们就叫它为...

2209

扫码关注云+社区