“儿行千里”项目总结

一、主要工作：

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 />

换用类选择器或者其他选择器代替属性选择器进行样式设置。

同时parcel用uglify-es混合压缩 js，cssnano压缩css

坑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布局，需要考虑到移动端的最大屏宽，最好用媒体查询控制最大宽度。