前记

最近要做一个注册页面，这个页面是为了配合App那边分享到微信准备的。
流程是：首先APP点击分享按钮，分享方式选择微信，然后分享到微信里面，其他人通过这个分享链接打开注册页面去注册，邀请人的邀请id是带在url里面的。

• 第一坑：
  分享链接传参的坑：本来分享链接是
  https://xxx.com/#/register?code=1111&locale=zh_cn
  ,结果你在微信里面点击的时候变成了
  https://xxx.com/?from=grounmessage&installed=0#/register?code=1111&locale=zh_cn

这样子hash路由的注册页面就不能正确的取到code值
解决办法：
1、不用hash路由
2、自己写方法去截取字符串去拿code

• 第二坑：
  输入框默认有内阴影 和圆角
  解决方法：
  border-radius: 0;
  -webkit-appearance: none;

• 第三坑：
  输入框foucs样式有时不起作用，明明聚焦却不改变样式
  如
  input:focus {
  border-bottom-color: #f9c164;
  }

focus有时不改变border-color

解决方法：
input:focus ，
input:active {
border-bottom-color: #f9c164;
}

• 第四坑：
  有时候我们需要一个fixed或者absolute定位的固定宽高容器，内容超出时自动滚动；
  如：
  div{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 300px;
  overflow-y: auto;
  }

在电脑上没问题，超出时自动会有滚动条;
但是在手机上，上下滑动时明显感觉不是很流畅；

一般这种情况你只能去找插件了，如swiper \ better-scroll \ Iscoll \ Islder等等；

如果你没那么大要求，只是想渐进增强的效果，让js打包更小的话，可以加个css ：-webkit-overflow-scrolling: touch; 这样就能让内容滚动流畅了，虽然没有插件的那种滚动到底时拉扯回弹效果
div{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

总结

这些小坑，一开始会浪费挺多开发时间的；以后慢慢积累就是经验了。为什么企业招有经验的人，因为他能节约时间，快速开发，而不是等你慢慢摸，除了大公司有培养意识之外，一般小公司是没有培养意识的。