html转百度小程序,百度小程序转换工具

CV or Not CV, isn't a question, Just CV!

一、Babel

解析 → 转换 → 生成

//解析 → 转换 → 生成

//babylon(解析)、babel-traverse(转换)、babel-generator(生成)、@babel/types(辅助)

解析(词法 → 语法)

//词法分析阶段把字符串形式的代码转换为tokens令牌流

{

type:"paren",value:"(",

type:"name",value:"foo",

...//tokens令牌

}

//语法分析阶段则会把一个令牌流转换成 AST的形式

// https://astexplorer.net/

demo

{'#frontend'}

{'#backend'}

JSXExpressionContainer(path, state) {

if (path.node.expression.value.startsWith("#")) {

path.replaceWith(

t.JSXOpeningElement(

t.JSXIdentifier("Iyourcar"),

[

t.JSXAttribute(

t.JSXIdentifier("id"),

t.StringLiteral(

path.node.expression.value.replace("#", "")

)

)

],

true

)

);

}

}

二、转换js

//先转换api、__router__、getExtConfigSync，再转wx前缀

三、转换wxml

// unified 一个流式的创建插入内容的工具。工作原理

| ........................ process ........................... |

| .......... parse ... | ... run ... | ... stringify ..........|

+--------+ +----------+

Input ->- | Parser | ->- Syntax Tree ->- | Compiler | ->- Output

+--------+ | +----------+

X

|

+--------------+

| Transformers |

+--------------+

// htmlparser2可以用来处理HTML / XML / RSS的解析器。

{ type: 'tag',

name: Symbol(fake-root),

attribs: {},

children:

[ { type: 'tag',

name: 'yc-navbar',

attribs: [Object],

children: [],

singleQuoteAttribs: {},

selfclose: true },

{ data: '\n', type: 'text' },

{ data: ' loading ', type: 'comment' },

{ data: '\n', type: 'text' },

{ type: 'tag',

name: 'loading',

attribs: [Object],

children: [],

singleQuoteAttribs: {},

selfclose: false },

]

}

四、转换wxs

//百度小程序对应的是filter与sjs。但是filter已弃用，sjs有bug

//对于wxml中的wxs

function tranformWxs(node, file, options){

const attribs = node.attribs;

node.name="import-sjs"

if (attribs && attribs.src) {

let src = attribs.src.replace(/\.wxs$/i, '.sjs');

return {

...node,

attribs: {

...attribs,

src: src

}

};

}

return node;

}

//.wxs文件 → 重命名 .sjs

function renameFileExt(filePath) {

if (/xml|wxml/.test(filePath)) {

return filePath.replace(/xml|wxml$/, swanFileSuffix);

}

else if (/\.wxs/.test(filePath)) {

return filePath.replace(/\.wxs$/, wxsFileSuffix);

}

else {

return filePath;

}

}

Thanks...