小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂，单纯使用基础组件来进行开发也变得越来越不方便。 例如，较为复杂的小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。 面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。 01 [图片]开发者可以将一些复用性强的代码抽象成自定义组件，它们的使用方法与基础库内置的 view 、 button等基础组件非常相似。这样的组件化非常有利于代码逻辑的解耦合。 02 [图片]自定义组件局部更新时的性能相比页面的局部更新要小很多，在必要时可以利用这个特点进行性能优化。 03 [图片]自定义组件是相对独立的功能模块，开发者可以将自己的自定义组件代码开源出来，与其他开发者共享开发成果。 如何编写一个自定义组件？ 每个自定义组件由四个代码文件组成：  json文件    用于于放置一些最基本的组件配置  wxml 文件    组件模版  wxss 文件    组件的样式，只在组件内部节点上生效（这个文件是可选的） js 文件  组件的 JS 代码，承载组件的主要逻辑 这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。 1.组件配置 编写一个自定义组件，首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components目录下，名为 custom-checkbox.json 。 [图片] 这个文件中包含以下内容： [图片] 2.组件模板 在同一目录下，创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似： [图片] 这个模版将在组件中渲染出一个 checkbox 和一个 label 。 3.组件样式 同样类似于页面， wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器（如 .the-class-name ）来指定： [图片] 4.组件定义 组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器： [图片] 简单的 Component 构造器调用包含3个定义段： methods 中的方法可以用来包含组件的事件回调函数； data 是组件的内部数据，可以用 this.setData 方法来改变； properties 中声明这个组件的属性，上例中声明了 title 属性，这样，组件外部在使用组件时就可以指定这个属性的值。 这样我们就编写好了 custom-checkbox 这个组件。 如何使用自定义组件？ 使用上面这个自定义组件的方法很简单。 Step 1 在需要使用这个组件的页面所对应的 json 文件中，添加下面的自定义组件声明： [图片] Step 2 在页面对应的 wxml 文件中使用了： [图片] 这样，在页面上最终呈现的效果如下： [图片] 在自定义组件中也是可以引用其他自定义组件的，方法与在页面中引用的方法类似。 高级特性与注意事项 除了上述的基本功能外，自定义组件还提供了一组基础接口，用来实现各种各样的功能。 01 [图片]在页面和自定义组件间通信时，最常用的方法是事件机制，自定义组件可以使用 triggerEvent 接口向页面发送事件，页面 WXML 中使用 bind 或者 catch 就可以监听到。 02 [图片]如果事件机制还不足以满足组件间通信需要的话，可以使用  selectComponent 接口。 03 [图片]如果同时建立了好几个有相互关联关系的组件，可以使用组件间关系接口 relations 。 04 [图片]组件间可能需要共享部分代码，这时可以使用behaviors 。 有关它们的详细文档，请参考 开发者文档 - 框架 - 自定义组件 章节。 还需要注意的是，一些与 WXML 节点相关的接口，如wx.createSelectorQuery  、 wx.createCanvasContext ，在自定义组件中使用时有一定的变化，使用时请再次阅读一下相关的文档。

继知晓云 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，只需要对组件的属性进行配置即可，省去了引入多个库文件的操作。 那么具体如何操作呢？下面为大家简单介绍一下： 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[代码] 两个监听事件用于点击图片和链接时的自定义处理，详细使用可参考插件的文档。