前言
最近项目遇到的新需求，大部分都是生成各种表单进行审核。 作为专业摸鱼，相同代码写2遍就浑身难受的我，准备把这个需求进行自动化处理。于是就有了今天这篇文章。
其实网上有很多现成的，但是都是基于某个UI框架，生成的H5，或者vue的代码，我司的需求是生成微信小程序的代码，所以不能直接的“拿来主义”。
啥是表单生成器
基础概念介绍
开局一张图，大家先有个大致概念
- 左侧为可使用控件列表
- 中间为列表展示区，通过左侧控件进行拖拽生成
- 右侧为参数设置区
虽然现在已经有了大量的UI框架方便开发者，但人喜欢偷懒的属性应该是天生的，能对着图形做开发，谁愿意去写又臭又长的UI标签呢。
制作总流程
一说到表单生成器，其实大概也就是通过可视化的控件拖拽，生成页面代码。 看似简单，但其实这个过程还隐藏着一层核心配置的过程，如下图所示。
虽然大家看到的是可视化的界面，但这其中最重要的就是代码生成核心了。所以如果要做表单生成器，应该是从核心入手。保证在没有UI操作的情况下，通过配置参数，也可以生成代码。
代码生成核心
我完成的第一版，就是通过编辑json文件，传入代码生成核心，来生成代码的。这个过程不涉及UI界面。这个过程，又要细分到以下步骤：
开始我也是按照自己脑子里的蓝图直接开干来着，但写着写着就会发现自己的代码过于天马行空，而且这个东西写出来是要给别人用的，自己写爽了，别人看不懂，孤芳自赏多难受。
所以我还是老老实实的和其他人聊好需求，比如：
- 都有哪些组件可以自动化
- 自动生成时，组件的数据如何绑定到页面上
- 除了组件本身，页面是不是也需要配置参数
和大家定好需求，写好文档，这下就可以开工干代码了。
注意做好模块测试
因为我要生成的是微信小程序代码，默认要有.js,.wxml,.wxss,.json这4个格式的文件。每个文件都是一个生成模块，所以我的代码结构是这样的。
因为每个模块都是独立的功能，所以最好在开发过程中就做好功能测试。如果所有模块写好了再一起测试，会让你调bug调到想哭。
关于代码格式化
在模板里面生成的代码，格式出现错乱很正常，所以就考虑如何格式化代码。
在编写核心的时候，因为在本地开发，依赖node环境，所以美化代码也很简单,执行这行代码就行。
npx prettier --config prettier.config.js --write "目标文件夹地址/*
也可以直接写入js方法中，在node环境里调用：
const exec = require("child_process").exec;
function formateCode(configData) {
exec(
`npx prettier --config prettier.config.js --write "目标文件夹地址/*"`,
function (err, stdout, stderr) {
if (err) {
console.log("npx prettier error:" + stderr);
} else {
console.log("代码格式化成功");
}
}
);
}
注意prettier.config.js是自己定义的，详情可以去看prettier的官方文档
小结
上半部分写到这里就差不多了，其实我在做的时候就是先有了核心，根据文档，大家通过 node指令 执行js文件也就可以生成相关代码了。
保证这个生成核心可以正常使用的基础上，我们再进一步生成可视化UI来制作配置文件，这个下次再说。
新人不易，欢迎大家强势关注，长春本地技术 - 阿丰在长春━(｀∀´)ノ亻!
如果想细聊，可以邮箱联系k9629@qq.com，一起成长。
