Initial commit

2025-12-08 14:39:07 +08:00
commit 9d4f78656b
782 changed files with 66418 additions and 0 deletions
--- a/wechat-mini-program/components/mp-html/docs/overview/feature.md
+++ b/wechat-mini-program/components/mp-html/docs/overview/feature.md
@@ -0,0 +1,228 @@
+# 功能介绍
+
+## ⏳ 渲染效果 :id=show
+1. *加载提示*  
+   支持在 *mp-html* 标签内部放上自定义的加载提示，内容未加载完成（或为空）时将显示，加载完成后自动隐藏  
+   ```wxml
+   <mp-html>加载中...</mp-html>
+   ```
+2. *自动设置标题*  
+   支持自动把 *title* 标签的内容设置到页面标题上，如不需要，可通过 [set-title](basic/prop#set-title) 属性关闭  
+3. *长按复制*  
+   支持长按复制文本内容，可通过 [selectable](basic/prop#selectable) 属性开启  
+4. *支持 rpx*  
+   支持 *rpx* 作为单位，自动根据屏幕宽度调整  
+5. *支持 html 实体*  
+   支持所有形如 *&amp;#123;* 的 *html* 实体和大部分常用的形如 *&amp;nbsp;* 的实体  
+   
+
+## 📰 图片效果 :id=img
+1. *占位图*  
+   支持设置图片未加载完成时的占位图 [loading-img](basic/prop#loading-img) 和加载出错时的占位图 [error-img](basic/prop#error-img)  
+2. *懒加载*  
+   内容较长、图片较多时，开启懒加载有助于改善性能，需要时可通过 [lazy-load](basic/prop#lazy-load) 属性开启  
+3. *自动预览*  
+   图片被点击时，将自动放大预览，如不需要，可通过 [preview-img](basic/prop#preview-img) 属性关闭。还可以在 [imgtap](basic/event#imgtap) 事件中进行自定义处理    
+   自动预览通过特定的处理，可以实现左右滑动查看所有图片、预览重复链接不错位等效果  
+4. *预览高清图*  
+   同一张图片，可以给显示时和预览时设置不同的链接地址以达到最佳效果  
+   设置方式 1：给 *img* 标签增加一个 *original-src* 即可  
+   ```html
+   <!-- 显示时使用 xxx，预览时使用 yyy -->
+   <img src="xxx" original-src="yyy" />
+   ```
+   设置方式 2：通过 [imgList](advanced/api#imgList) 的 *api* 进行设置  
+5. *长按弹出菜单*  
+   微信和百度平台支持图片长按时弹出菜单，可以进行保存、分享等操作，如不需要，可通过 [show-img-menu](basic/prop#show-img-menu) 属性关闭  
+6. *装饰图片处理*  
+   有时对于一些小的装饰性图片，可能不希望产生上述效果，此时可以给 *img* 标签设置 *ignore* 属性，将屏蔽预览、弹出菜单等操作，提升体验  
+   ```html
+   <!-- 设置 ignore 属性后这张图片不可预览、不会弹出菜单 -->
+   <img src="xxx" ignore />
+   ```
+   在链接内的、*src* 为 *data url* 且没有设置 *original-src* 的图片，默认为不可预览的小图片  
+7. *支持原大小显示*  
+   本组件通过合理转换，基本实现了和 *html* 中 *img* 的相同效果：没有设置宽度时按原大小显示；设置了宽度时按比例缩放；同时设置宽高时按设置的值显示。不必去考虑小程序中的 *mode* 等问题  
+8. *支持 svg*  
+   虽然小程序中不支持 *svg* 系列标签，本组件通过在解析过程中转为 *data url* 图片的方式实现了 *svg* 的显示  
+
+## 🔗 链接效果 :id=link
+1. *支持设置多种状态下的样式*  
+   包括默认状态、点击态的样式，可以在 *src/node/node.wxss* 中进行修改  
+2. *锚点跳转*  
+   支持跳转内部锚点，使用锚点需要开启 [use-anchor](basic/prop#use-anchor) 属性  
+   跳转方式 1：给 *a* 标签的 *href* 属性设置为 *#id*，点击时即可跳转到对应 *id* 的位置（设置为 *#* 则跳转到开头）  
+   跳转方式 2：通过 [navigateTo](advanced/api#navigateTo) 的 *api* 进行跳转  
+   默认情况下锚点跳转通过控制页面滚动的方式进行，如果要在 *scroll-view* 内使用，可以通过 [in](advanced/api#in) 的 *api* 进行配置  
+3. *跳转内部路径*  
+   如果需要点击 *a* 标签跳转到小程序内的一个页面，直接将其 *href* 属性设置为页面路径即可（包括 *tab* 页面，需要使用绝对路径）  
+   ```html
+   <!-- 该链接被点击后将跳转到 /pages/test/test 页面 -->
+   <a href="/pages/test/test">链接</a>
+   ```
+4. *复制外部链接*  
+   对于外部链接，由于小程序无法直接打开，将自动复制到剪贴板，如不需要，可通过 [copy-link](basic/prop#copy-link) 属性关闭  
+
+?> 设置 *a* 标签的 *href* 属性时，如果是外部链接需将协议名 *http://* 写完整，否则会被认为是内部路径并尝试跳转  
+除这些默认的处理外，还可以在 [linktap](basic/event#linktap) 事件中进行自定义处理  
+
+## 📈 表格效果 :id=table
+1. *支持独立横向滚动*  
+   表格宽度通常较大，容易超出屏幕宽度，导致整体内容一起滚动，影响体验，可以通过设置 [scroll-table](basic/prop#scroll-table) 属性给所有表格添加一个滚动层使其能单独横向滚动  
+2. *支持常用表格属性*  
+   支持 *border*, *cellspacing*, *cellpadding*, *align* 等常用表格属性  
+3. *支持含有合并单元格的表格*  
+   
+附渲染原理：   
+小程序中没有 *table* 标签，使得显示表格一直是一个难题，本组件主要通过以下三种方式显示表格  
+
+| 显示方式 | 适用情况 | 说明 |
+|:---:|:---:|:---:|
+| *rich-text* 标签 | 表格内部没有链接、图片等特殊标签 | 效果最佳，几乎不需要进行转换 |
+| *table* 布局 | 表格内有特殊标签但没有使用合并单元格 | 需要进行一定转换，将 *table*, *tr*, *td* 等标签转为对应的布局 |
+| *grid* 布局 | 表格内有特殊标签且使用了合并单元格 | 需要进行复杂的转换将合并单元格用 *grid* 布局表现出来 |
+
+## 📊 列表效果 :id=list
+1. *支持多层嵌套*  
+   支持嵌套多层列表，对于无序列表，不同的层级会显示不同的黑点格式  
+2. *支持多种有序列表格式*  
+   通过设置 *ol* 标签的 *type* 属性，可以显示数字、字母、罗马数字等多种形式的标号  
+3. *支持不显示标号*  
+   支持通过设置 *list-style:none* 的方式不显示 *li* 标签开头的标号  
+
+## 🎬 音视频效果 :id=video  
+1. *自动暂停*  
+   在存在多个视频的情况下，同时播放可能会影响体验，本组件支持在播放一个视频的时候自动暂停其他所有视频，如不需要，可通过 [pause-video](basic/prop#pause-video) 属性关闭  
+   音频在引入 [audio](advanced/plugin#audio) 插件后也可以实现此效果  
+2. *多源加载*  
+   不同平台支持播放的格式不同，只设置一个 *src* 可能会出现兼容性问题导致无法播放，因此本组件支持像 *html* 中一样给 *video* 和 *audio* 设置多个 *source*，将按照顺序进行加载，直到可以播放，最大程度上避免无法播放  
+   ```html
+   <!-- 组件将依次加载 xxx 和 yyy -->
+   <video controls>
+     <source src="xxx">
+     <source src="yyy">
+   </video>
+   ```
+3. *自动添加控件*  
+   对于既没有设置 *controls* 也没有设置 *autoplay* 的标签将自动把 *controls* 属性设置为 *true*，避免无法播放，影响体验  
+
+## 📡 样式设置 :id=style
+样式（*css*）是富文本中最重要的内容之一，本组件提供多种样式设置的方法，可以进行灵活的设置  
+
+1. *行内样式*  
+   这是最常用的样式设置方法，直接将需要的样式放在对应标签的 *style* 属性中即可，这种方式仅作用于单个标签，优先级最高  
+2. *tag-style*  
+   这是本组件独有的一种样式设置方式，可以给某一种标签名设置默认的样式  
+   可以通过 [tag-style](basic/prop#tag-style) 属性设置，具体用法见对应说明  
+3. *外部样式*  
+   如果希望将某些样式固定的用于渲染，可以添加到 *tools/config.js* 的 *externStyle* 字段中，该方法仅支持 *class* 选择器（[2.1.0](changelog/changlog#v210) 版本起支持标签名选择器），优先级最低，具体见 [个性化](overview/quickstart#setting)  
+
+需要调整优先级时，可以通过设置 *!important* 实现  
+
+另外，通过引入 [style](advanced/plugin#style) 插件，还可以实现匹配 *style* 标签中样式的功能  
+
+## 🍭 全面的标签支持 :id=tag
+本组件支持以下标签和属性：  
+
+| 标签 | 属性 |
+|:---:|:---:|
+| a | href |
+| abbr |  |
+| address |  |
+| article |  |
+| aside |  |
+| audio | author, controls, loop, name, poster, src |
+| b |  |
+| base | href |
+| big |  |
+| blockquote |  |
+| body |  |
+| br |  |
+| caption |   |
+| center |  |
+| cite |  |
+| code |  |
+| col | span |
+| colgroup | span |
+| dd |  |
+| del |  |
+| div |  |
+| dl |  |
+| dt |  |
+| em |  |
+| embed | autostart, loop, src, type |
+| fieldset |  |
+| font | color, face, size |
+| footer |  |
+| h1 |  |
+| h2 |  |
+| h3 |  |
+| h4 |  |
+| h5 |  |
+| h6 |  |
+| head |  |
+| header |  |
+| hr |  |
+| html |  |
+| i |  |
+| img | ignore, original-src, src |
+| ins |  |
+| label |  |
+| legend |  |
+| li |  |
+| mark |  |
+| nav |  |
+| ol | start, type |
+| p |  |
+| pre |  |
+| q |  |
+| rt |  |
+| ruby |  |
+| s |  |
+| section |  |
+| small |  |
+| source | src |
+| span |  |
+| strike |  |
+| strong |  |
+| style |  |
+| sub |  |
+| sup |  |
+| table | border, cellpadding, cellspacing |
+| tbody |  |
+| td | colspan, rowspan |
+| tfoot |   |
+| th | colspan, rowspan |
+| thead |  |
+| tr |  |
+| tt |  |
+| u |  |
+| ul |  |
+| video | autoplay, controls, loop, muted, object-fit, poster, src |
+
+说明：  
+1. 除上面列举的外，还支持 *svg* 系列的标签和 *id*、*style*、*class*、*align*、*height*、*width*、*dir* 属性  
+2. 对于不信任的标签，除个别将被直接移除，都会被转为一个行内标签，因此可以使用更多语义化标签  
+
+## 🌟 稳定性 :id=stable  
+本组件的解析脚本能够支持多种 *html* 格式，具有强大的稳定性：  
+1. 标签名中可以含有 *:* 等特殊字符（如 *o:p*）  
+2. 标签名和属性名大小写不敏感  
+3. 属性值可以不加引号、加单引号、加双引号，也可以缺省（默认 *true*）  
+4. 属性之间可以没有空格（通过引号划分）、有空格（可以多个）、有换行符  
+5. 支持正常格式、*CDATA* 等多种形式的注释  
+
+同时，对于一些错误情况，程序也能够自动处理：  
+1. 标签首尾不匹配  
+2. 属性值中冒号不匹配  
+3. 标签未闭合  
+
+以下情况均能正确解析：  
+```html
+<!-- 不同的属性格式 -->
+<font face="宋体" color='green' size=7>Hello</font>
+<!-- 标签首尾不匹配或未闭合 -->
+<div> World</section>
+<!-- 大小写搭配 -->
+<dIv StYle="color:green">!</DIv>
+```
--- a/wechat-mini-program/components/mp-html/docs/overview/quickstart.md
+++ b/wechat-mini-program/components/mp-html/docs/overview/quickstart.md
@@ -0,0 +1,287 @@
+# 快速开始 :id=quickstart
+
+## 📦 源码获取 :id=source
+
+#### 小程序方式 :id=mp
+!> 该方式暂不可用
+
+打开微信小程序 *富文本插件*，点击 *获取组件包* 按钮，选择使用平台、[扩展插件](advanced/plugin) 以及 [个性化设置](#setting) 后即可生成组件包  
+![富文本插件](../assets/case/富文本插件.jpg)
+
+#### npm 方式 :id=npm
+   ```bash
+   # 通过 npm 获取
+   npm install mp-html
+   # 或通过 yarn 获取
+   yarn add mp-html
+   ```
+   需要升级时：  
+   ```bash
+   # 通过 npm 升级
+   npm update mp-html
+   # 或通过 yarn 升级
+   yarn upgrade mp-html
+   ```
+#### git 方式 :id=git
+   ```bash
+   # 通过 github 获取
+   git clone https://github.com/jin-yufeng/mp-html.git
+   # 或通过 gitee 获取
+   git clone https://gitee.com/jin-yufeng/mp-html.git
+   ```
+#### 下载 zip :id=zip
+   *github releases*：[https://github.com/jin-yufeng/mp-html/releases](https://github.com/jin-yufeng/mp-html/releases)  
+   *gitee releases*：[https://gitee.com/jin-yufeng/mp-html/releases](https://gitee.com/jin-yufeng/mp-html/releases)
+
+#### QQ 群 :id=qqgroup
+*QQ* 交流群的群文件中也可以获取组件包  
+交流群1: `699734691`  
+交流群2: `778239129`  
+交流群3: `960265313`  
+
+## 📚 引入和使用 :id=use
+
+### 📗 原生框架 :id=miniprogram
+
+#### 引入 :id=mp-import
+- npm 方式  
+  
+  ?> 本方法仅适用于微信、*QQ* 小程序  
+
+  1. 在小程序项目根目录下通过 [npm](#npm) 安装组件包  
+  2. 开发者工具中勾选 *使用 npm 模块*（若没有此选项则不需要）并点击 *工具* - *构建 npm*  
+  3. 在需要使用页面的 *json* 文件中添加  
+     ```json
+     {
+       "usingComponents": {
+         "mp-html": "mp-html"
+       }
+     }
+     ```
+
+- 源码引入
+  
+  ?> 本方法适用于所有平台  
+
+  1. 将 [源码](#source) 中对应平台的代码包（*dist/platform*）拷贝到 *components* 目录下，更名为 *mp-html*  
+  2. 在需要使用页面的 *json* 文件中添加  
+     ```json
+     {
+       "usingComponents": {
+         "mp-html": "/components/mp-html/index"
+       }
+     }
+     ```
+
+#### 使用 :id=mp-use
+
+1. 在需要使用页面的 *wxml* 文件中添加  
+   ```wxml
+   <mp-html content="{{html}}" />
+   ```
+2. 在需要使用页面的 *js* 文件中添加  
+   ```javascript
+   Page({
+     onLoad () {
+       this.setData({
+         html: '<div>Hello World!</div>'
+       })
+     }
+   })
+   ```
+
+支持的 [属性](basic/prop) 和 [事件](basic/event) 见对应文档
+
+### 📘 uni-app 框架 :id=uni-app
+
+#### uni-modules 方式 :id=uni-modules
+?> 本方法需要使用 *3.1.0+* 版本的 *HBuilder X* 开发  
+
+1. 进入 [插件市场](https://ext.dcloud.net.cn/plugin?id=805)，点击右上角的 *使用 HBuilder X 导入插件* 按钮导入项目或点击 *下载插件ZIP* 按钮下载插件包并解压到项目的 *uni_modules/mp-html* 目录下  
+2. 在需要使用页面的 *(n)vue* 文件中添加  
+  ```vue
+   <template>
+     <view>
+       <!-- 不需要引入，可直接使用 -->
+       <mp-html :content="html" />
+     </view>
+   </template>
+   <script>
+     export default {
+       data () {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+   </script>
+   ```
+3. 需要更新版本时在 *HBuilder X* 中右键 *uni_modules/mp-html* 目录选择 *从插件市场更新* 即可  
+
+#### 源码方式 :id=uni-app-source
+1. 将 [源码](#source) 中 *dist/uni-app* 内的内容拷贝到 **项目根目录** 下   
+
+   !> [插件市场](https://ext.dcloud.net.cn/plugin?id=805) 的 *非 uni_modules* 版本无法更新，请从其他方式获取 [源码](#source)
+2. 在需要使用页面的 *(n)vue* 文件中添加  
+   ```vue
+   <template>
+     <view>
+       <mp-html :content="html" />
+     </view>
+   </template>
+   <script>
+     import mpHtml from '@/components/mp-html/mp-html'
+     export default {
+       // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
+       components: {
+         mpHtml
+       },
+       data () {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+   </script>
+   ```
+
+#### npm 方式 :id=uni-app-npm
+1. 在项目根目录下通过 [npm](#npm) 安装组件包  
+2. 在需要使用页面的 *(n)vue* 文件中添加  
+   ```vue
+   <template>
+     <view>
+       <mp-html :content="html" />
+     </view>
+   </template>
+   <script>
+     import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
+     export default {
+       // 不可省略
+       components: {
+         mpHtml
+       },
+       data () {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+   </script>
+   ```
+
+!> 使用 *cli* 方式运行的项目，通过 *npm* 方式引入时，需要在 *vue.config.js* 中配置 *transpileDependencies*，详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687)
+
+!> 如果在 *nvue* 中使用还要将 *dist/uni-app/static* 目录下的内容拷贝到项目的 *static* 目录下，否则无法运行  
+
+支持的 [属性](basic/prop) 和 [事件](basic/event) 见对应文档  
+
+由于 *uni-app* 编译过程中会进行压缩，构建 *uni-app* 包时基本不进行压缩，包的体积与原生包相比较大  
+
+#### 关于 nvue :id=nvue
+*nvue* 使用原生渲染，不支持部分 *css* 样式，为实现和 *html* 相同的效果，组件内部通过 *web-view* 进行渲染，性能上差于原生，根据 *weex* 官方建议，*web* 标签仅应用在非常规的降级场景。因此，如果通过原生的方式（如 *richtext*）能够满足需要，则不建议使用本组件，如果有较多的富文本内容，则可以直接使用 *vue* 页面  
+由于渲染方式与其他端不同，有以下限制：  
+1. 不支持 [lazy-load](basic/prop#lazy-load) 属性
+2. 视频不支持全屏播放
+3. 如果在 *flex-direction: row* 的容器中使用，需要给组件设置宽度或设置 *flex: 1* 占满剩余宽度
+
+### 📙 其他框架 :id=other
+其他框架没有专用包，但也可以引入对应平台的原生包使用，具体方法参考各框架官方文档    
+
+- taro  
+  [https://taro-docs.jd.com/docs/hybrid#使用原生组件](https://taro-docs.jd.com/docs/hybrid#%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6)  
+
+  !> 在 *taro2* 中使用请使用 [示例项目](#demo) 中的非压缩组件包，否则可能出现异常，详见 [#301](https://github.com/jin-yufeng/mp-html/issues/301)
+
+  !> 在 *taro3* 的 *vue3* 中使用时需要修改 *content* 属性的属性名或使用 [setContent](advanced/api#setContent) 方法设置内容，详见 [taro#13146](https://github.com/NervJS/taro/issues/13146)
+
+  ?> 在 *taro* 中使用时属性名需用驼峰写法，如 *copy-link* 属性应写作 *copyLink*  
+  
+  ?> 需要 *taro* 专用包的开发者欢迎参与 [需求调研](https://github.com/jin-yufeng/mp-html/issues/374)
+- kbone  
+  [https://wechat-miniprogram.github.io/kbone/docs/guide/advanced.html#使用小程序自定义组件](https://wechat-miniprogram.github.io/kbone/docs/guide/advanced.html#%E4%BD%BF%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6)  
+- chameleon  
+  [https://cml.js.org/docs/io.html#怎么引入微信小程序组件](https://cml.js.org/docs/io.html#%E6%80%8E%E4%B9%88%E5%BC%95%E5%85%A5%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6)
+- remax  
+  [https://remaxjs.org/guide/basic/custom-component](https://remaxjs.org/guide/basic/custom-component)
+
+## 💡 运行示例 :id=demo
+1. 安装依赖  
+   ```bash
+   # 通过 npm 安装
+   npm install
+   # 或通过 yarn 安装
+   yarn
+   ```
+2. 生成 *demo* 项目  
+   ```bash
+   # 生成微信示例项目到 dev/mp-weixin
+   npm run dev:weixin
+   # 生成 qq 示例项目到 dev/mp-qq
+   npm run dev:qq
+   # 生成百度示例项目到 dev/mp-baidu
+   npm run dev:baidu
+   # 生成支付宝示例项目到 dev/mp-alipay
+   npm run dev:alipay
+   # 生成头条示例项目到 dev/mp-toutiao
+   npm run dev:toutiao
+   # 生成 uni-app 示例项目到 dev/uni-app
+   npm run dev:uni-app
+   ```
+3. 运行  
+   用各平台的开发者工具打开 *dev/platform* 文件夹即可  
+4. 监听修改  
+   如果要对 *demo* 项目进行修改（如放入自己的测试内容）可在 *tools/demo* 目录中进行修改  
+   如果要对组件包进行修改可在 *src* 目录中进行修改（参考 [二次开发](advanced/develop) ）  
+   可以通过 *watch* 命令监听修改并实时编译到 *dev* 目录下  
+   ```bash
+   # 监听并实时生成微信示例项目到 dev/mp-weixin
+   npm run watch:weixin
+   # 监听并实时生成 qq 示例项目到 dev/mp-qq
+   npm run watch:qq
+   # 监听并实时生成百度示例项目到 dev/mp-baidu
+   npm run watch:baidu
+   # 监听并实时生成支付宝示例项目到 dev/mp-alipay
+   npm run watch:alipay
+   # 监听并实时生成头条示例项目到 dev/mp-toutiao
+   npm run watch:toutiao
+   ```
+
+## 🎈 个性化 :id=setting  
+?> 本组件提供了以下配置项可以生成个性化的组件包，配置项可以通过 [示例小程序](#mp) 进行设置，或参考 [使用插件包](advanced/plugin#use) 中的 *npm* 方式自行设置配置文件并进行打包  
+
+#### plugins  
+需要使用的插件名称列表，关于插件的详细信息见 [插件](advanced/plugin)  
+
+#### externStyle  
+!> 暂不支持对图片设置宽高，详见 [#426](https://github.com/jin-yufeng/mp-html/issues/426)
+
+外部样式，一个 *css* 字符串，将被用于 *html* 的渲染，但仅支持 *class* 选择器  
+
+?> [2.1.0](changelog/changelog#v210) 版本起增加支持 **标签名选择器**，通过这种方式给标签设置的样式全局有效，在样式较长或作用标签数量较大时这种方法的性能要高于 [tag-style](basic/prop#tag-style) 属性，且写法更加灵活（可以与伪类、*class* 配合等）  
+需要注意的是，由于 [组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F) 内仅支持 *class* 选择器，直接将标签名选择器 **写在 wxss 中是无效的**，必须写在本字段中，构建过程中会自动转换为 *class* 选择器  
+
+?> [2.3.1](changelog/changelog#v231) 版本起，组件取消样式隔离，部分平台（微信小程序 *2.11.0+* 基础库完全支持；*QQ*、百度小程序部分情况下支持）支持直接引入页面样式中的 *class* 选择器，无需使用本方法引入；若遇到样式无法生效或需要使用标签名选择器，则仍需要使用本方法
+
+#### customElements  
+自定义标签列表（[2.2.0](changelog/changelog#v220) 版本起支持），可以在这里注册需要使用的小程序功能标签（如 *ad*、*ad-custom*、*official-account*、*map* 等）  
+每个标签为一个 *object*，需要包含以下字段，注册完成后即可在传入的 `html` 中使用该组件  
+
+| 字段名 | 功能 | 类型 | 必填 | 备注 |
+|:---:|:---:|:---:|:---:|:---:|
+| name | 标签名 | String | 是 |  |
+| attrs | 需要使用的属性列表 | String[] | 否 | class 和 style 默认添加，无需填写 |
+| platforms | 需要使用的平台 | String[] | 否 | 默认添加到所有平台，可以从 h5、mp-weixin、mp-qq、mp-baidu、mp-alipay、mp-toutiao、app-plus 中选择，不区分大小写 |
+
+?> 仅能添加没有子节点的标签，且不响应任何事件，如果需要更加复杂的功能，可以通过 [插件](advanced/plugin#develop) 实现  
+
+示例：  
+```javascript
+// 设置完成后 html 中添加 <ad unit-id="xxx" /> 即可使用该标签
+customElements: [{
+  name: 'ad',
+  attrs: ['unit-id']
+}]
+```
+
+剩余的是一些编译过程中压缩工具的配置，可以按需要设置