项目总结 Aparse

Aparse是一个钉钉小程序的富文本解析方案，是我在大二暑期的时候帮老师做一个钉钉小程序的时候借鉴微信小程序的解决方案实现的，现在来总结下。

首先分析下项目目录：

component 为核心代码：

aParse.js 为 入口文件 和 出口文件

htmlParser.js 解析HTML字符串为DOM 记为tmp

html2json 将tmp对象转换为json

aParse.axml 渲染模板

aParse.css 渲染模板对应的样式（需要自己写）

整个工作流是这样的：
先看一下我们使用的工具组件 htmlParser.js 与 html2json.js 的效果：

将这段 HTML 字符串转换为树状对象：

<div id="1" class="foo">
    <h2>sample text with <code>inline tag</code></h2>
    <pre id="demo" class="foo bar">foo</pre>
    <pre id="output" class="goo">goo</pre>
    <input id="execute" type="button" value="execute"/>
</div>

得到

之后将这个解析后的数据，记为obj，交给渲染模板组件进行递归渲染：

使用

<template name="aParse">
  <block a:for="{{aParseData}}">
    <template is="aParse0" data="{{item}}" />
  </block>
</template>

<template name="aParseModel">
	<block a:elif="{{item.tag == 'li'}}">
      <view class="{{item.classStr}} aParse-li" style="{{item.styleStr}}">
        <view class="{{item.classStr}} aParse-li-inner">
          <view class="{{item.classStr}} aParse-li-text">
            <view class="{{item.classStr}} aParse-li-circle"></view>
          </view>
          <view class="{{item.classStr}} aParse-li-text">
            <block a:for="{{item.nodes}}" a:for-item="item" a:key="">
              <template is="aParse1" data="{{item}}" />
            </block>
          </view>
        </view>
      </view>
    </block>
</template>

之后在 页面中 导入这个渲染出的组件即可