DevelopmentGuide.md

二次开发指南

如您需要为本组件支持更多的组件或实现更多的更多的功能，可以参考这里

DomHander.js

• 宏定义

  变量名	功能
  trustTag	信任的标签列表，其中0标记一些难以模拟的标签（如列表和表格等），将直接用rich-text组件显示，不能继续深入递归显示；Common标记的标签可以继续递归
  blockTag	一些rich-text组件不直接支持的块级标签列表，将被转为div标签
  textTag	行内标签列表
  ignoreTag	忽略的标签列表，将被直接移除

  对于一个标签，若在ignoreTag中，则被直接忽略；否则若在trustTag中则保持不变；否则若在blockTag则被转为div标签；否则将被转为span标签，可根据需要添加

• 属性处理
  在一个大的switch中对一些需要特殊处理的标签进行处理，以font和a标签为例：

  case 'font':
      name = 'span'; //font标签是rich-text（低版本）不支持的，需要转为span
      if (attrs.color) { //将color和face属性解析到style中，使其生效
          attrs.style += (';color:' + attrs.color);
           delete attrs.color;
      }
      if (attrs.face) {
          attrs.style += (";font-family:" + attrs.face);
          delete attrs.face;
      }
      break;
  case 'a':
      /*该函数的功能是对该标签的所有祖先节点做一个标记，有该标记的标签在显示时会继续递归深入，这样才能实现自定义的a标签点击效果*/
      this._bubbling(); 
      break;

• 组件的默认样式
  initStyle函数用于设置标签的默认样式，可在这里添加或删除
  CanIuse变量用于标记当前设备基础库版本是否大于2.7.1，rich-text组件在2.7.1基础库增加支持了大量标签，可通过这个变量进行兼容处理

Parser.js

• 宏定义

  变量名	功能
  trustAttrs	支持的属性列表，不在该列表中的属性都会被移除，如需增加支持新的属性，需要在这里添加
  voidTag	没有子标签的标签列表，可根据需要添加

• 其余部分是较底层的处理，一般不需要修改

trees组件

trees组件是一个递归定义的组件，用于显示结点树

• trees.wxml(swan)
trees.wxml定义的是标签的显示效果，对于有continue标记的标签将继续递归，否则将直接用基本类型进行显示，主要分为图片，文本，视频，音频，富文本，链接等基本类型，可根据需要添加，以链接为例：

  <!--链接-->
  <navigator wx:elif="{{item.name=='a'}}" // 选择a标签
    url="{{item.attrs.href}}" 
    style="{{item.attrs.style}}" // 设置属性，所有属性都在item.attrs中
    data-href='{{item.attrs.href}}' 
    hover-class="navigator-hover" 
    hover-start-time="25" 
    hover-stay-time="300" // 设置一些默认的样式
    bindtap="tapEvent">
      <trees id="node" nodes="{{item.children}}" controls="{{controls}}" />
    </navigator>

• trees.wxss(css)
  定义一些标签基本的样式，主要是由于这些标签在rich-text组件中有默认样式，在模拟时需要加上，以strong标签为例

  /* strong标签在rich-text组件中有默认加粗效果，在模拟实现时通过class="{{item.name}}"的方式加上这个效果 */
  .b, .strong {
      display: inline;
      font-weight: bold;
  }

  可根据需要添加或修改样式

• trees.js
  主要向顶层组件冒泡传递事件，因此需要将设置bubbles和compose设置为true，可根据需要添加事件

• handler.wxs
  主要用于rich-text组件。例如，在rich-text中的顶层标签设置了float:left，如果没有对rich-text组件本身也设置，其作为整体的一部分布局就会出现问题；但又不能直接将顶层标签的所有样式直接赋给rich-text，否则如margin等属性会被缩进多次，也会导致错误的效果；因此通过这个脚本将一些需要的样式，如float，display等提取出来给rich-text作为样式，可根据需要修改
  百度版由于filter无法在s-if、style处使用，是在Parser.js中解析完成后进行了一次遍历并提取出一些样式作为containStyle属性并赋给rich-text的style

index组件

这是顶层组件，直接与用户交互，主要功能是捕获子组件trees冒泡上来的事件，经过处理后发送给调用者，另外还需要处理初始数据的解析等操作
initData函数主要用于在组件加载完毕后获取video和audio组件的context，video组件的context用于实现一个视频播放时暂停其他视频播放的功能；audio的context用于播放背景音乐

其他文件

• Tokenizer.js
  这是解析html比较底层的模块，一般不需要修改，顶层的模块是DomHandler.js，解析完成的结构体结构同rich-text组件的要求
• CssTokenizer.js
  这是处理style标签中的css的底层模块，一般不需要修改
• api.js
  提炼出的一些常用函数，一般不需要修改，可添加

一些问题

• 为什么图片使用rich-text组件中的img显示而不是用image组件显示
  因为rich-text组件中的img更贴近html中的显示模式，在没有设置宽高时，会自动按照原大小显示；设置了宽或高时，按照比例缩放；同时设置了宽高时，按设置的宽高显示。若用image组件实现这样的效果将比较复杂，且需要多次setData（不过这样的缺陷是不支持lazyload和error事件）
   
• 为什么文本标签都被设置了continue（/trees/handler.wxs中）
  因为rich-text组件设置display:inline是无效的（仅微信版），对于文本标签，除了个别难模拟的（如bdi、bdo等），会使用rich-text（设置display:inline-block），其他标签都会通过一个display:inline的view来模拟，以实现最佳效果

最后

欢迎将本插件适配更多前端框架，欢迎提PR