赚点微信页面外快的一点记录

最近做了个移动页面的外包，写下来，页面布局感觉是比PC页面简单一点。

不像PC页面内容那么多，而且PC端的浏览器比较多，这边的话，我就考虑的比较少。

最后在页面写完后自己整理了两个小插件分别是弹出框zDialog和表单验证zValidate。

一、640设计稿

1）现在比较流行的做法是按照iPhone 5的尺寸来设计

倍率2，逻辑像素320x568。看到的设计稿的宽度就是640的了，当你在编写页面的时候，就要缩小一倍。

边距宽度等缩小一倍比较精确，但是如果是字体缩小一倍的话，放到手机上面看就不太合适啦，比如16px的，缩小一倍就是8px，有点小了。

自己刚开始写的时候，不明白这640的意义，就自己在那边随便改边距等，当和设计稿差不多的时候，就好了。

这样写出来的跟设计稿是有出入的，等于是否定了设计师的成果。

2）自定义icon字体

移动端，引入的文件最好是小一点，这样在用2G载入的时候，速度也能快点。

原先我用的字体库是Font-Awesome，做PC后台的时候，用这个不错，什么类型的都有了，但是前端页面最好还是只要需要的。

这次使用了阿里的Iconfont，在这里面可以自己制作字体，并且还有Unicode方式，让IE6这种低端浏览器也来享受自定义字体。

 

二、穿透层与流布局

1）flex布局

上图中最后一列有个空白处，而点击这个空白处就需要能穿透点击到下面那个列表。

这次地方就需要CSS，pointer-events:none。

其实用到这个属性也是逼不得已，上面的布局在有顶宽的时候，是很简单的，float浮动+宽高度定死，宽度只要计算一下就能出来。

但是手机页面的话，屏幕宽度都是不定的，那么要计算这个宽度的话就太难了，而且还有margin，左右都有，中间也有。

没办法就用了个flex布局，这个可以让浏览器自动计算宽度，而且还是让宽度自动相等。

接着就出现了上面要穿透的问题了。

flex流布局有很多属性，而我这次在项目中也仅仅是为了方便计算宽度。

/*flexbox布局*/
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-2{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;}
.flex-3{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;}

 

2）column属性

这个是多列布局属性，上面的城市块布局，本来是想用这个的，但发现很不合适。

dl {
    -webkit-column-count:4;
    -webkit-column-gap: 1px;
    column-count:4;
    column-gap: 1px;
}

<dl>
    <dd>
        <img src="images/city/nanjing.png"/>
        <p>南京p>
    dd>
    <dd>
        <img src="images/city/hefei.png"/>
        <p>合肥p>
    dd>
    <dd>
        <img src="images/city/shanghai.png"/>
        <p>上海p>
    dd>
dl>

跟我想象中的使用方法不一样，里面如果是一个标签的话，比如只要显示个img标签，展现的就是流布局

<dl>
    <img src="images/city/shanghai.png"/>
    <img src="images/city/shanghai.png"/>
dl>

 

三、选择符

写PC端的时候，用选择符会很谨慎，万恶的低版本IE好多选择符都不支持，而到了移动端，情况就不同啦，好多都能支持。

所以这次我大量使用了选择符。

伪类选择符:first-child、:last-child、:last-of-type等用的好多，原先很多列表的最后一个的样式与其他地方不一样，要么额外加一个样式要么用JS控制，现在只要用选择符就能搞定，代码的简洁性也增强了。

1）用伪类美化单选框或多选框

用::before来将原控件盖住，用图片替代，在:checked选中后修改图片，本来这些都是需要配合JS脚本的，现在只用CSS即可。

只是第一次点击某个多选框的时候，会先隐藏，然后再出现选中图片，造成一个闪烁。

input[type="checkbox"] {
  position: absolute;
  vertical-align: top;
  margin-top: 4px;
  margin-left: -20px;
  visibility:hidden;
}
input[type="checkbox"]::before {
    content: '';
    background:url('../images/checkbox.png') no-repeat center center;
    position: absolute;
    top:-3px;left:-2px;
    width:18px;height:19px;
    visibility:visible;
}
input[type="checkbox"]:checked::before {
    content: '';
    background:url('../images/checkbox_checked.png') no-repeat center center;
    position: absolute;
    top:-3px;left:-2px;
    width:19px;height:19px;
    visibility:visible;
}

 

2）flex布局与::after配合出现的问题

这个地方为了宽度相等，间距一样，我使用了flex布局，用flex布局还会自动会将高度也对齐

选中的地方会有个小勾，并且有三角形背景，分别用了::before和::after设置，上面的图片中就是两个高度不一样的内容块

在IOS中，一切正常，很OK，但是在Android系统中就有点苦了。这好端端的三角形变形啦。

后面发现小勾是根据内容块中原先的高度相对定位的，后面自动拉高后就不会触发那段CSS了，最终只能用JS修改内容块的高度，然后在触发::after中的样式

ul li.active{
    border:1px solid #dc481b;
    overflow:hidden;
}
ul li.active::before{
    content: "\e605";
    position:absolute;
    right:2px;
    bottom:2px;
    z-index:2;
    color:#FFF;
}
ul li.active::after{
    content:"#";
    background:#dc481b;
    color:#dc481b;
    width:50px;
    height:50px;
    position:absolute;
    right:-25px;
    bottom:-25px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

 

四、h1~h6

这几个我在写CSS的时候用的非常多，但是由于沿用的是PC中的reset，显示在移动端，字体会特别的大

而且在reset的时候，会设置margin-top和margin-bottom，可是好多场景下，都不会用到或者被父级元素用到了

索性我就去除了外边距，然后重新reset了这几个标签中字体大小

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,
.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,
h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,
.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small {
      font-weight: normal;line-height: 1;color: #777;
}
h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,
h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small {
      font-size: 65%;
}
h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,
h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small {
      font-size: 75%;
}
h1,.h1 {font-size: 22px;}h2,.h2 {font-size: 20px;}h3,.h3 {font-size: 18px;}
h4,.h4 {font-size: 16px;}h5,.h5 {font-size: 14px;}h6,.h6 {font-size: 12px;}

 

五、微信浏览器中记住密码

在一次登录微信页面后，客户希望能不用再次输入帐号密码，直接进入登录状态。

简单点么，就用cookie保存账户信息好了，但是要求在退出微信后，还能登录，这个时候用cookie就不行了。

后面只得获取公众号的openid，然后将openid和账户绑定，当读取到openid的时候，读取到账户信息，从而模拟登录。

由于只需要获取openid，所以可以避免弹出授权页面。点击查看网页授权获取用户基本信息。

后面还做了个微信关注后将推送欢迎信息。

 

六、脚本

页面肯定会有验证的逻辑，还有弹出框的展示，在写页面的时候，写的比较仓促。

在将页面写好后，特地自己整理了两个小插件，方便以后自己开发的时候使用，并且代码很少都只有200多行。插件分别是zDialog和zValidate。

1）zepto

整个脚本使用了zepto类库，语法与jQuery相似，但是又有些不同，有些jQuery可以使用的方式，在这里不能使用。

可以不用载入完整的zepto，根据需要再载入不同的模块。如下面的图片：

 

2）用iSlider来做图片切换

有中文文档说明，还能自定义添加组件，这个文档很详细，看了就会。点击查看iSlider。

 

3）用Lightbox2点击查看大图展示

老字号的一个插件，作者重新写了个第二版本的，我稍微修改了下，让这个插件能够支持手指的左右滑动事件，这样更接地气。点击查看Lightbox2。

 

4）用lazyload来延迟图片加载

图片可以不用一下子全部加载进来，可以在滚动的时候显示。点击查看lazyload。

 

5）用dropload做下来刷新特效，用mustache模版插件来填充内容

自己公司有个项目需要用到下拉刷新，当时的同事使用了iScroll插件，这个插件很大，而且连带了很多副作用，这次我想找个简单点的，代码能少一点，好让我知道原理的，就找到了这个插件，目前用的很流畅。点击查看dropload。

配合mustache，将内容展现在页面上。

 

6）用lrz4来上传图片

上传图片是经常使用的一个功能，我在搜索的时候看到了这个插件，也用了一下，挺方便的，运用JS技术，读取到图片的base64内容，再将内容传送到服务器接收，并生成图片。

文档也是蛮全的，点击查看lrz4。在使用的时候自己也做了些封装，使之更容易使用。

 

7）用fastclick解决zepto的tap点透问题

我在网上看点透看到是在一张页面中的，可我这个地方显示的点透却是在两张页面中。

当时在微信浏览器中会出现这种点透情况，可是在UC浏览器中却不会出现。

而且在微信浏览器中第一次进入的时候不出现，点击浏览器中的返回按钮，再次进入才会出现。

如下面的操作，红色框框中的地方，进入到下一个页面，就会自动点击到那个位置的地方，那个地方正好有弹出层事件。

点头的原理我这里不介绍了，在搜索引擎中输入“tap 点透”，会出现一大串的。

最后我用fastclick，将300ms延迟去除，将绑定的tap事件改成click事件，就没有出现这种情况了，难道说微信浏览器在将两个页面放在一起了吗？才导致这个问题.....

     

 

 

参考资料：

http://www.ui.cn/detail/48317.html   移动端尺寸基础知识

http://www.qianduan.net/css3-pointer-event-description/   CSS3 pointer-events介绍

http://qianduanblog.com/post/css-learning-19-css3-flex-responsive-design-class.html  css3 flex流动自适应响应式布局样式类

http://zh.learnlayout.com/column.html  column

http://youyogmail-001-site1.site4future.com/archives/zepto-tap-click-through-research.html   zepto tap “点透”研究

http://www.cnblogs.com/mmmjiang13/p/4141557.html   微信内置浏览器WebApp开发