微信小程序的出现引发了很多讨论，很多开发者都跃跃欲试小程序的开发。它重新定义了自己的一套开发规范，不支持现有的html页面。为此，我们设想了一套解决方案，如何将现有的开发流程快速接入小程序，并快速修改现有的html工程，使其符合微信小程序的规范？于是自己写了一套html暴力翻译成wxml，以及用初始模板搭建的脚手架。结构沿用feWorkflow，大部分改动是针对目录的gulp工作流。1、脚手架小程序有一个默认的文件结构，根目录下必须存放以下三个文件：.├──app.js├──app.json├──app.wxss页面由4个文件组成:.├──js├──wxml├──wxss├──json根据这套规则，通过GUI工具创建的模板，本脚手架会默认创建一个源码src目录：点击develop，一个会创建dist文件目录，并将编译好的less（或者设置中配置成sass）文件转为wxss文件。其他html、js、css文件的改动也会在dist目录下同步处理，图片资源会被imagemin压缩后丢到dist/image目录下。src源码目录和dist目录的划分（都可以通过配置项修改）是为了保持源码的完整性，保持图片（psd等）的原始文件在编译时不被破坏.到目前微信开发者工具版本（0.10.101100），已经具备了自动刷新页面的功能，所以src目录下的所有改动都会同步修改并刷新到dist目录下，可以无缝衔接显示在熟悉的编辑器中操作。脚手架示例：新建项目：开发项目：HTML到WXML转换工具演示：1.目录结构如上所述，小程序有一套默认的脚手架结构。编译工具会翻译源码目录下的所有html文件，并创建一个文件夹，当前目录名为-build，将所有编译好的wxml存放在page/filename/filename.wxml中。app.json中全局配置的页面也会默认创建。根据创建的目录名，将与wxss文件同名的css文件重命名为wxss文件，存放在同名目录下。如果css与文件名不匹配，合并不一致的css文件，存放到全局目录下的app.wxss中。并且由于小程序不再支持jQuery等通用库，源代码目录下的所有js都会被忽略，页面级的js会被复制到同名目录下。该js包含了注册页面的Page功能基础模板。例如：源代码test目录文件结构如下├──test|└──CSS|└──index.css|└──global.css|└──js|└──index.js|└──索引.html|└──other.html编译后的目录结构会变成：├──test-build|└──app.wxss|└──页|└──索引|└──index.wxml|└──index.wxss|└──index.js|└──其他|└──other.wxml2.HTML首先我们看一下wxml和html的标签的大致对比：根据图中标签的匹配规则，在编译过程中，遍历html文件，先转成xml，保证img等包含结束标签，然后通过匹配匹配的标签进行替换或删除。可以在设置中更改此替换标签。例如：
