wxml-transformer

0.1.2 • Public • Published

wxml-transformer

将微信小程序的wxml代码转换成js object或html片段

注意:此工具单独使用无任何意义,因为默认配置中,wxml标签的相关属性名和值都会原封不动的传递给转换后的html标签,所以转换后的html不拥有功能,只拥有结构;不过此工具可以供其他解决方案使用,如:存在一种将小程序应用直接转换成vue/react/angular单页应用的解决方案。

Build Status image image image

安装

npm i wxml-transformer --save-dev

使用

var transformer = require('wxml-transformer');
transformer.toHtml('<view id="box">{{123}}</view>');
//<div id="box">{{123}}</div>
 
 
var options = {
    mapping: {
        view: 'section',
        text: (element, helper) => {
            return `<span data-wxa="text" ${helper.propsStringify(element.props)}>` +
                `${helper.childrenStringify(element.children, options)}</span>`;
        }
    }
};
transformer.toHtml('<view id="box">{{123}} <text id="t1">456</text></view>', options);
//<section id="box">{{123}} <span data-wxa="text" id="t1">456</span></section>
 
transformer.toObject('<view id="box">{{123}}</view>');
//{tag:'view', props:[{name:'id', value:'box'}], children:[ {'{{123}}'} ]}
 
transformer.toObject('<view id="box" hidden>{{123}}</view>');
//{tag:'view', props:[{name:'id', value:'box'}, {name:'hidden', onlyName:true}], children:[ {'{{123}}'} ]}

更新日志

v0.1.2

  • toObject方法转换后的结果中props不在是一个object,而是一个Array,结构为:[{name:String, value:String, onlyName:Boolean}];
  • toObject支持将无属性值的属性添加特殊标记,以供后续程序使用,特殊标记为onlyName,是个Boolean值;

v0.1.0 ~ v0.1.1

初步功能,包括:

  • wxml转换成object;
  • wxml转换成html;
  • object转换成html;

Readme

Keywords

none

Package Sidebar

Install

npm i wxml-transformer

Weekly Downloads

2

Version

0.1.2

License

BSD-3-Clause

Last publish

Collaborators

  • imingyu