摘要：介紹轉(zhuǎn)換意思是將小程序不支持的東西轉(zhuǎn)換成它支持的東西。我在開(kāi)發(fā)的小程序的過(guò)程中遇到了兩種需要做轉(zhuǎn)換的場(chǎng)景轉(zhuǎn)換成轉(zhuǎn)換成我將在下文詳細(xì)介紹我是怎么處理這兩種情況的?？偨Y(jié)以上，就是我在開(kāi)發(fā)小程序中對(duì)與做的一些轉(zhuǎn)換的經(jīng)歷。

“轉(zhuǎn)換” 意思是將"小程序"不支持的東西轉(zhuǎn)換成它支持的東西。我在開(kāi)發(fā)的小程序的過(guò)程中遇到了兩種需要做“轉(zhuǎn)換”的場(chǎng)景：

html 轉(zhuǎn)換成 wxml

svg 轉(zhuǎn)換成 canvas

我將在下文詳細(xì)介紹我是怎么處理這兩種情況的。

我們的產(chǎn)品在某些場(chǎng)景下，后端接口會(huì)直接傳 html 字符串給前端。在 ReactJs 中，我們可以用 dangerouslySetInnerHTML 直接渲染 html 字符串（不一定安全），而 ”小程序“不支持 html ，因此必須對(duì) html 進(jìn)行處理。解決這個(gè)問(wèn)題的步驟主要是：1. 將 html 轉(zhuǎn)換成 json ( 樹(shù)結(jié)構(gòu)) ；2. 將 json 轉(zhuǎn)換成 wxml 。我在對(duì)問(wèn)題做了調(diào)研后發(fā)現(xiàn)，現(xiàn)有一個(gè)庫(kù) wxParse 滿足該轉(zhuǎn)換的目的，但是在我看來(lái)，這個(gè)庫(kù)做的事情太多，需要依賴文件過(guò)多，不滿足只需要簡(jiǎn)單處理的需要，所以我決定自己寫。

在參考了 html2json 與 himalaya 兩個(gè)庫(kù)的處理思路的基礎(chǔ)上，我寫了一個(gè)簡(jiǎn)單的解析庫(kù) htmlParser 。htmlParser 處理 html字符串分兩步：

lexer: 生成標(biāo)記（token）

function lex(html) {
  let string = html
  let tokens = []

  while (string) {
    // 先處理以 "
parser:  根據(jù)標(biāo)記生成樹(shù)
上面的 lexer 將 html 字符串分隔成了一個(gè)一個(gè) token，然后，我們通過(guò)遍歷所有的標(biāo)識(shí)來(lái)構(gòu)建樹(shù)
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") {
      // 構(gòu)建節(jié)點(diǎn)
      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()
      // 將該節(jié)點(diǎn)加入父節(jié)點(diǎn)中
      parent.children.push(node) 
      continue
    }
    if (token.type === "text") {
      // 往該節(jié)點(diǎn)中加入子元素
      tagArray.last().children.push({
        type: "text",
        content: replaceMark(token.text)
      })
      continue
    }
    if (token.type === "tag-empty") { 
     // 往該節(jié)點(diǎn)中加入子元素
      tagArray.last().children.push({
        type: "Element",
        tagName: token.tag,
        attributes: Object.assign({}, {
          class: token.tag
        }, token.attributes),
      })
      continue
    }
  }
  return root
}
整個(gè)程序的運(yùn)行結(jié)果舉例：
var html = "
"
htmlParser(html)
# 轉(zhuǎn)換結(jié)果
{
  "tag": "root",
  "children": [{
    "type": "Element",
    "tagName": "div",
    "attributes": {
      "style": "height:10rpx;width: 20rpx;"
    },
    "children": [ {
      "type": "Element",
      "tagName": "img",
      "attributes": {
          src: "http://xxx.jpg",
          class: "image"
      }
    }]  
  }]
}
以上，我們完成了 html字符串的轉(zhuǎn)換，完整代碼請(qǐng)戳  htmlParser

json 轉(zhuǎn)換成 wxml

在熟悉了“小程序”框架的基礎(chǔ)上，發(fā)現(xiàn)需要借助模板 template ，將 json 數(shù)據(jù)填充進(jìn) template，并根據(jù)元素類型渲染相應(yīng)的 wxml 組件以達(dá)到轉(zhuǎn)換目的。比如：
# 定義一個(gè)名稱為 html-image 的模板

/* 使用模板
   其中 json 的結(jié)構(gòu)為： {
      "type": "Element",
      "tagName": "img",
      "attributes": {
          src: "http://xxx.jpg",
          class: "image"
      }
    }
 */

這樣，我們就能轉(zhuǎn)化成功了。
而因?yàn)槟０鍥](méi)有引用自身的能力，只能使用笨辦法：使用多個(gè)同樣內(nèi)容，但是模板名稱不一樣的模板來(lái)解決嵌套的層級(jí)關(guān)系，而嵌套的層級(jí)取決于使用的模板個(gè)數(shù)。