摘要：介紹轉換意思是將小程序不支持的東西轉換成它支持的東西。我在開發的小程序的過程中遇到了兩種需要做轉換的場景轉換成轉換成我將在下文詳細介紹我是怎么處理這兩種情況的。總結以上，就是我在開發小程序中對與做的一些轉換的經歷。

“轉換” 意思是將"小程序"不支持的東西轉換成它支持的東西。我在開發的小程序的過程中遇到了兩種需要做“轉換”的場景：

html 轉換成 wxml

svg 轉換成 canvas

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

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

在參考了 html2json 與 himalaya 兩個庫的處理思路的基礎上，我寫了一個簡單的解析庫 htmlParser 。htmlParser 處理 html字符串分兩步：

lexer: 生成標記（token）

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

  while (string) {
    // 先處理以 "
parser:  根據標記生成樹
上面的 lexer 將 html 字符串分隔成了一個一個 token，然后，我們通過遍歷所有的標識來構建樹
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
}
整個程序的運行結果舉例：
var html = "
"
htmlParser(html)
# 轉換結果
{
  "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字符串的轉換，完整代碼請戳  htmlParser

json 轉換成 wxml

在熟悉了“小程序”框架的基礎上，發現需要借助模板 template ，將 json 數據填充進 template，并根據元素類型渲染相應的 wxml 組件以達到轉換目的。比如：
# 定義一個名稱為 html-image 的模板

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

這樣，我們就能轉化成功了。
而因為模板沒有引用自身的能力，只能使用笨辦法：使用多個同樣內容，但是模板名稱不一樣的模板來解決嵌套的層級關系，而嵌套的層級取決于使用的模板個數。