介绍

“转换” 意思是将"小程序"不支持的东西转换成它支持的东西。我在开发的小程序的过程中遇到了两种需要做“转换”的场景：

html 转换成 wxml
svg 转换成 canvas

我将在下文详细介绍我是怎么处理这两种情况的。

`html` 转换成 `wxml`

我们的产品在某些场景下，后端接口会直接传 html 字符串给前端。在 ReactJs 中，我们可以用 dangerouslySetInnerHTML 直接渲染 html 字符串（不一定安全），而 ”小程序“不支持 html ，因此必须对 html 进行处理。解决这个问题的步骤主要是：1. 将 html 转换成 json ( 树结构) ；2. 将 json 转换成 wxml 。我在对问题做了调研后发现，现有一个库 wxParse 满足该转换的目的，但是在我看来，这个库做的事情太多，需要依赖文件过多，不满足只需要简单处理的需要，所以我决定自己写。

`html` 转换成 `json`

在参考了 html2json 与 himalaya 两个库的处理思路的基础上，我写了一个简单的解析库 htmlParser。htmlParser 处理 html字符串分两步：

lexer: 生成标记（token）


 function lex(html) {
  let string = html
  let tokens = []
 
  while (string) {
    if (string.indexOf("< /") === 0) {
      const match = string.match(REGEXP.endTag)
      if (!match) continue
      string = string.substring(match[0].length)
      tokens.push({
        tag: match[1],
        type: 'tag-end',
      })
      continue
    }
    if (string.indexOf("<") === 0) {
      const match = string.match(REGEXP.startTag)
      if (!match) continue
      string = string.substring(match[0].length)
      const tag = match[1]
      const isEmpty = !!MAKER.empty[tag]
      const type = isEmpty ? 'tag-empty' : 'tag-start'
      const attributes = getAttributes(match[2])
 
      tokens.push({
        tag,
        type,
        attributes
      })
      continue
    }
 
    const index = string.indexOf('<')
    const text = index < 0 ? string : string.substring(0, index)
 
    string = index < 0 ? "" : string.substring(index)
    tokens.push({
      type: "text",
      text
    })
  }
  return tokens
}

parser: 根据标记生成树


function parse(tokens) {
  let root = {
    tag: "root",
    children: []
  }
  let tagArray = [root]
  tagArray.last = () => tagArray[tagArray.length - 1]
 
  for (var i = 0; i < tokens.length; i++) {
    const token = tokens[i]
    if (token.type === 'tag-start') {
      const node = {
        type: "Element",
        tagName: token.tag,
        attributes: Object.assign({}, {
          class: token.tag
        }, token.attributes),
        children: []
      }
      tagArray.push(node)
      continue
    }
    if (token.type === 'tag-end') {
      let parent = tagArray[tagArray.length - 2]
      let node = tagArray.pop()
      parent.children.push(node)
      continue
    }
    if (token.type === 'text') {
      tagArray.last().children.push({
        type: 'text',
        content: replaceMark(token.text)
      })
      continue
    }
    if (token.type === 'tag-empty') {
      tagArray.last().children.push({
        type: "Element",
        tagName: token.tag,
        attributes: Object.assign({}, {
          class: token.tag
        }, token.attributes),
      })
      continue
    }
  }
  return root
}

完整代码请戳 htmlParser

`json` 转换成 `wxml`

在熟悉了“小程序”框架的基础上，发现需要借助模板 template ，将 json 数据填充进 template，并根据元素类型渲染相应的 wxml 组件以达到转换目的。而因为模板没有引用自身的能力，只能使用笨办法：使用多个同样内容，但是模板名称不一样的模板来解决嵌套的层级关系，而嵌套的层级取决于使用的模板个数。


  < template name="html-image">
  < image
    mode="widthFix"
    class="{{attributes.class}}"
    src="{{attributes.src}}">< /image>
< /template>
 
< template name="html-video">
  < video
    class="{{attributes.class}}"
    src="{{attributes.src}}">< /video>
< /template>
 
< template name="html-text" wx:if="{{content}}">
  < text>{{content}}< /text>
< /template>
 
< template name="html-br">
  < text>\n< /text>
< /template>
 
< template name="html-item">
  < block wx:if="{{item.type === 'text'}}">
    < template is="html-text" data="{{...item}}" />
  < /block>
  < block wx:elif="{{item.tagName === 'img'}}">
    < template is="html-image" data="{{...item}}" />
  < /block>
  < block wx:elif="{{item.tagName === 'video'}}">
    < template is="html-video" data="{{...item}}" />
  < /block>
  < block wx:elif="{{item.tagName === 'br'}}">
    < template is="html-br">< /template>
  < /block>
  < block wx:else>< /block>
< /template>
 
// html 引用 html1 两个模板一样
< template name="html">
  < block wx:if="{{tag}}">
    < block wx:for="{{children}}" wx:key="{{index}}">
      < block wx:if="{{item.children.length}}">
      < template is="html1" data="{{...item}}"/>
      < /block>
      < block wx:else>
        < template is="html-item" data="{{item}}"/>
      < /block>
    < /block>
  < /block>
< /template>
 
< template name="html1">
  < view class="{{attributes.class}}" style="{{attributes.style}}">
    < block wx:for="{{children}}" wx:key="{{index}}">
      < block wx:if="{{item.children.length}}">
        < template is="html2" data="{{...item}}"/>
      < /block>
      < block wx:else>
        < template is="html-item" data="{{item}}"/>
      < /block>
    < /block>
   < /view>
< /template>

如上处理过程中，有些需要注意的细节，比如：要对 html 实体字符转换，让模板的 image 组件支持 mode 等等。总之，经过如上的处理，html 字符串对 wxml 组件的转换基本功能完成。

`svg` 转换成 `canvas`

在我们的产品 web 版本中，由于需要在页面元素中使用 svg 作为 dom 元素，而“小程序” 没有 svg 组件的支持，如此一来，我们也需要对后端接口传来的 svg 字符串做转换。“小程序”没有svg 组件但是有 canvas 组件，于是我决定使用 canvas 来模拟 svg 绘制图形，并将图形做一定的修改以满足基本需求。

做这个“转换”的关键也有两点：1. 提取 svg 字符串中的元素；2.canvas 模拟元素功能进行绘制

`svg` 元素的提取

因为 svg 字符串是一个 xml，用上面的 htmlParser 可以将其生成 json ，问题解决。

`canvas` 模拟绘制

在 web 中 svg 的元素有很多，好在我们需要的只有一些基本的元素：image, rect, path。rect 用 canvas 模拟不算难事，canvas 绘制起来很简单，代码如下：


 // draw rect
 ctx.save()
 ctx.setFillStyle(attr.fill)
 ctx.fillRect(attr.x, attr.y, attr.width, attr.height)
 ctx.restore()

然而，在开发过程中，遇到了一个难点：不知道对 path 的 d 属性如何进行模拟模拟。d 属性涉及移动、贝塞尔曲线等等。用 canvas 进行绘制，需要知道 svg d 各属性值的含义。为此，先需要先提取 d 各属性值，再依据各属性值与 canvas 的对应绘制关系依次进行绘制。在我为此犯难的时候，好在发现有前人有做了这样事情。在 gist 上，发现了对 d 的解析，与 canvas 绘制 d 的相关代码，困难问题也得以解决。


 /**
 * svg path
 * < path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />
 * d 属性值 "c 50,0 50,100 100,100 50,0 50,-100 100,-100"
 * 
 * https://gist.github.com/shamansir/0ba30dc262d54d04cd7f79e03b281505
 * 以下代码在源代码基础上修改
 */
 _pathDtoCommands(str) {
     let results = [],
       match;
     while ((match = markerRegEx.exec(str)) !== null) {
       results.push(match)
     }
     return results
       .map((match) => {
         return {
           marker: str[match.index],
           index: match.index
         }
       })
       .reduceRight((all, cur) => {
         let chunk = str.substring(cur.index, all.length ? all[all.length - 1].index : str.length);
         return all.concat([{
           marker: cur.marker,
           index: cur.index,
           chunk: (chunk.length > 0) ? chunk.substr(1, chunk.length - 1) : chunk
         }])
       }, [])
       .reverse()
       .map((command) => {
         let values = command.chunk.match(digitRegEx);
         return {
           marker: command.marker,
           values: values ? values.map(parseFloat) : []
         };
       })
   }

完成了如上的步骤后，图形基本绘制出来了，但是在后期，出现了 svg image 位置的问题。svg 中的图片除了会有 x, y 坐标关系，还会根据视窗大小，以短边为准，保持宽高比，长边做缩放，视窗中居中显示。这是我之前不清楚的部分，为此多花了点时间和精力。此外，还有些细节需要注意，比如需要调整 canvas 的缩放比例，以让图形完全显示。

总结

以上，就是我在开发“小程序”中对 html 与 svg 做的一些“转换”的经过。总结起来就是，对字符串解析，转换成“小程序”语言。在此延伸一下，如需在 wxml 中支持 wxml 字符串，借助 htmlParser 做解析，再写一个 wxml 模板，我们也就能“转换” wxml 了。

参考