关于移动端页面开发（微信内置浏览器）总结

   上个礼拜，刚入职就接到一个移动端的活动页面项目，重点还是要兼容微信浏览器，兼容主流机型。在这之前，我所做的都是PC端的，想来两者差别不大，实际动手时遇到的坑还是蛮多的。时间过去的有点久，我也不能把每个坑都列出来，只能写些印象深刻的。

  1、关于页面背景

     由于手机端机型众多，各种机型屏幕大小不同，让美工针对每个机型设计背景图显然是不合理的。当时的想法是，给一张iPhone6的，width:100%,height:100%。我把他铺满整个屏幕就完事了。实际测试中，发现是铺满了，但是宽高百分百会把图片进行相对屏幕大小的拉伸，搞得背景图在一些大屏一些小屏手机中很丑。

   解决方法：手机宽度都差不了多少，可以把背景width:100%，高度自适应，这样在每个屏幕中显示的背景图就不会有拉伸现象了。

 2、关于页面布局

   由于微信浏览器是不兼容flex的，所以只能用定位方法布局。还是因为机型的不同，选择了百分比布局的方法。不过这个方法的生产效率真的是低下。所以我建议，一般可以写死的地方就写死。还有一点，尽量不要使用margin来进行布局，这样会引起整个页面移动，上下端出现留白。具体原因我也不太清楚。

 3、关于点击事件

    手机端的点击事件得用touch事件来替换click事件。一般点击事件都可以用touchend来完成。

 4、关于环形进度条的实现

   很多页面跳转的时候会出现一个百分比的圆，中间是百分数。我们美工给的图就是一个颜色渐变的圆环，所以实现只要把这张图进行旋转就好了。

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

  5、关于弹窗后弹窗外背景变暗

   很多地方都有，在点击一个按钮后会弹出一个列表，然后原先的页面变暗。

   具体实现：在原本页面的DIV后面加一个同级别的DIV，大小参数都一样，然后给这个DIV设置

 background-color: rgba(0, 0, 0, .3);z-index:100;

  最后的参数根据你想要的透明度设置。

 6、键盘呼出导致页面容器压缩

   手机端的键盘在一些浏览器中是不占容器的，但是在一些浏览器中是占容器的（一部分安卓自带浏览器，谷歌浏览器）。导致整个页面被压缩，由于我采用的是百分比布局（这种布局真的不推荐）而且高度自适应，所以整个页面都被压成一团。

   解决方法：当时想，既然高度被压缩了就把高度设死就完了。后来意识到，不同机型高度是不同的，一种机型在不同浏览器中容器的高度也是不一样的，有一些浏览器上面的地址栏也会占用容器的高度，这样设死值的话会导致一个屏幕显示不完全的结果。后来想到，可以每次加载页面的时候获取一次容器高度，然后直接把高度设死就行了。

(function(){
    var cliwidth = document.documentElement.clientWidth; 
    var cliheight = document.documentElement.clientHeight;
    if(cliheight < 504){
        cliheight = 504;//在iPhone5
    }
    $('#background').width(cliwidth);
    $('#background').height(cliheight);   
})();

 7、关于touchend事件在有弹窗时候会紧接着触发弹窗中该位置的点击事件

   这个问题怎么说呢。emmmm，当时的需求是点击一个按钮出来一个列表，然后列表中是一堆超链接。导致的是，如果我点击的按钮位置在弹窗中有超链接的话会导致超链接的触发。那时候试了阻止事件冒泡还是没用。后来仔细一想，就把超链接的点击事件取消，然后在弹窗出现的时候在恢复点击事件。

$("a").attr("onclick","return false");

$("a").removeAttr("onclick");

  可是后来发现问题依旧，仔细想想，我在弹窗出现的那一刻就恢复了点击事件，那不是依旧相当于我touchend着这个a标签，a标签依旧有着点击事件吗。所以我在remove的时候加了一个延时。

        setTimeout(function(){
        $("a").removeAttr("onclick");
        },1000);

  这是一个投机的方法，总算也是解决了这个问题。

  8、关于点击按钮然后复制一段文本来剪切框

   有一个clipboard.js，可以实现这个功能，但是在移动端并不能实现，好像他封装的时间触发方式只有click，具体我也没太仔细看源码。不过在PC端是可以实现的。

  大概只记得这些了，一直没时间写东西，拖拖拖就拖了一个礼拜。最近在学React不得不说，React的组件模式真的是非常好的，每个前端或早或晚的都会学React，早学早开心！推荐英文头疼的同学看下React小书，从项目入手，还配有一些课后练习。