一、主要工作：
1、收集用户信息（文本输入、单选、二级联动）
2、验证信息，跳转成功页
3、微信分享
二、总结
1、parcel作为打包工具（https://github.com/parcel-bundler/parcel）
- 坑1： 开发模式和生成模式下效果不一样：
html.index:
<input type="text" />
index.scss:
input[type=text] {
border: 1px solid #e0e0e0;
}
上述代码在生成模式时，样式没有生效的。原因是parcel在parcel build的时候会使用 htmlnano压缩html代码，而这个插件会忽略掉 type属性，从而产生的压缩代码如下：
<input />
换用类选择器或者其他选择器代替属性选择器进行样式设置。
- 坑2: 打包路径的问题
在parcel仓库的issue中，有很多提出来路径的问题。
在gulp中，项目的文件一般都会通过流的方式保存到另一个（dist）与当前（src）嵌套关系一样的目录中，gulp本身也不会对路径进行修改。
在webpack中，我们一般会配置 assetsPublicPath， 比如 ‘/’；然后生成的文件会拼在该路径下。
而parcel中，比如用如下命令打包
parcel build index.html -d dist // 默认dist
所有资源生成的文件都会带上这个dist这个路径。意思是：部署的时候这些打包生成的文件必须放置到服务器中 同样命名为dist 的目录下。这很不方便。
2、 布局的问题（布局不难，但花了点时间，记录一下）
项目中有大量表单输入，类似下图
表单样式
实际上单纯的布局并不难，考虑到要适配所有的主流机型，所以要充分考虑到屏宽的影响。
左侧固定，右侧自适应。
<li class="item name-item">
<label class="label name" for="name">家长姓名:</label>
<div class="input-wrapper">
<input class="text-input" type="text" id="name">
</div>
</li>
.item {
position: relative;
}
.input-wrapper {
width: 100%;
padding-left: 75px;
box-sizing: border-box;
}
input.text-input {
width: 100%;
}
.name {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
font-size: 16px;
}
这里的fontSize很重要。
如果要rem布局，需要考虑到移动端的最大屏宽，最好用媒体查询控制最大宽度。
