wxml2json & json2wxml

基于HTMLParser的微信小程序wxml-json的解析转换库

How to use

node

$ npm install wxml2json

var wxml2json = require('wxml2json').wxml2json;
var json2wxml = require('wxml2json').json2wxml;

API

json === wxml2json(WXML代码);
wxml === json2wxml(json);

console.assert(json === wxml);

JSON format

every json has node

memeber of node is

• root
• element
• text
• comment

root node is the root of JSON, every JSON must have only one root root, could have children.

element node represents html element, could have tag, attr, children.

text node represents text element, could have text.

comment node represents commment element, could have text.

Sample

wxml:

<view class="index">
  <view class="index-hd">
    <image class="index-logo" src="resources/kind/logo.png"></image>
    <view class="index-desc">以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。</view>
  </view>
  <view class="index-bd">
    <view class="kind-list">
      <block wx:for-items="{{list}}" wx:key="{{item.id}}">
        <view class="kind-list-item">
          <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
            <view class="kind-list-text">{{item.name}}</view>
            <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
          </view>
          <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
            <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
              <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                <navigator url="pages/{{page}}/{{page}}" class="navigator">
                  <view class="navigator-text">{{page}}</view>
                  <view class="navigator-arrow"></view>
                </navigator>
              </block>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>

json:

[
    {
        "type": "element",
        "tag": "view",
        "attr": {
            "class": "index"
        },
        "children": [
            {
                "type": "element",
                "tag": "view",
                "attr": {
                    "class": "index-hd"
                },
                "children": [
                    {
                        "type": "element",
                        "tag": "image",
                        "attr": {
                            "class": "index-logo",
                            "src": "resources/kind/logo.png"
                        }
                    },
                    {
                        "type": "element",
                        "tag": "view",
                        "attr": {
                            "class": "index-desc"
                        },
                        "children": [
                            {
                                "type": "text",
                                "text": "以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。"
                            }
                        ]
                    }
                ]
            },
            {
                "type": "element",
                "tag": "view",
                "attr": {
                    "class": "index-bd"
                },
                "children": [
                    {
                        "type": "element",
                        "tag": "view",
                        "attr": {
                            "class": "kind-list"
                        },
                        "children": [
                            {
                                "type": "element",
                                "tag": "block",
                                "attr": {
                                    "wx:for-items": "{{list}}",
                                    "wx:key": "{{item.id}}"
                                },
                                "children": [
                                    {
                                        "type": "element",
                                        "tag": "view",
                                        "attr": {
                                            "class": "kind-list-item"
                                        },
                                        "children": [
                                            {
                                                "type": "element",
                                                "tag": "view",
                                                "attr": {
                                                    "id": "{{item.id}}",
                                                    "class": "kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}",
                                                    "bindtap": "kindToggle"
                                                },
                                                "children": [
                                                    {
                                                        "type": "element",
                                                        "tag": "view",
                                                        "attr": {
                                                            "class": "kind-list-text"
                                                        },
                                                        "children": [
                                                            {
                                                                "type": "text",
                                                                "text": "{{item.name}}"
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        "type": "element",
                                                        "tag": "image",
                                                        "attr": {
                                                            "class": "kind-list-img",
                                                            "src": "resources/kind/{{item.id}}.png"
                                                        }
                                                    }
                                                ]
                                            },
                                            {
                                                "type": "element",
                                                "tag": "view",
                                                "attr": {
                                                    "class": "kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}"
                                                },
                                                "children": [
                                                    {
                                                        "type": "element",
                                                        "tag": "view",
                                                        "attr": {
                                                            "class": "navigator-box {{item.open ? 'navigator-box-show' : ''}}"
                                                        },
                                                        "children": [
                                                            {
                                                                "type": "element",
                                                                "tag": "block",
                                                                "attr": {
                                                                    "wx:for-items": "{{item.pages}}",
                                                                    "wx:for-item": "page",
                                                                    "wx:key": "*item"
                                                                },
                                                                "children": [
                                                                    {
                                                                        "type": "element",
                                                                        "tag": "navigator",
                                                                        "attr": {
                                                                            "url": "pages/{{page}}/{{page}}",
                                                                            "class": "navigator"
                                                                        },
                                                                        "children": [
                                                                            {
                                                                                "type": "element",
                                                                                "tag": "view",
                                                                                "attr": {
                                                                                    "class": "navigator-text"
                                                                                },
                                                                                "children": [
                                                                                    {
                                                                                        "type": "text",
                                                                                        "text": "{{page}}"
                                                                                    }
                                                                                ]
                                                                            },
                                                                            {
                                                                                "type": "element",
                                                                                "tag": "view",
                                                                                "attr": {
                                                                                    "class": "navigator-arrow"
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            }
                                                        ]
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Dependencies

htmlparser.js(wxmlparse.js)

repositry includes this at lib/ as git subtree.

Version

• 2.0.1

• fix the bug: "parent = !!parent || []", delete the "!!" to avoid the boolean type conversion , keep the object attribute of "parent"