手机浏览器与我的那些事（三）

最近一直在学习，cordova与vue的结合   cordova与ios的结合   原生路由框架   axios的封装  好多好多  。。。

分享下我最开始的一套代码；

背景：上级要求在2周内完成一个手机H5版本   ，界面有19个，随带的效果大概有loading，toast，confirm，轮播图，上拉加载，懒加载图片，没有接口的搜索功能。。。

感受：对领导莫大的信任感觉到热(lei)泪(liu)盈(man)眶(mian)  ,只有2周，当然2周是开发时间，自动算上周末14天；

动手前的想法：

1.1界面的切换用路由的话，担心出问题(主要是还没能驾驭vue到生产)，所以就来了简单粗暴的方式，只换内容，不换url。

1.2只换内容，不换url，大家应该猜到了   display  block  none;

2.1没有接口的搜索，实际上还是有搜索接口的，可是一个返回数据像蜗牛的接口，你怎么敢用。

2.2过程就不说了，直接上实现方式  

 存：首先发送一个请求所有数据的接口，再用localstorage存起来，将关键字段抽取出来组成数组，存的item很讲究的---1存数据   2存每个用户的数据(理论上是搜索接口返回的） 所以item的拼接是用户字段+数据字段      

取：一般来说输入框都是input，input有一个oninput事件，是oninput不是onchange  ，这个很重要！！！    oninput取值再用  arr.indexOf（value）>-1得到搜索数据的索引，逆推回去，得到搜索数据的详情

3.1大家都知道手机适配是很关键的，但是很少有人关注横竖屏切换的用户体验  毕竟是浏览器这个还是要考虑的，之前我有发过rem布局的写法，现在优化了一下

(function(doc,win){

//此处是兼容ios的写法  
    var supportOrientation = (typeof window.orientation === 'number' &&
    typeof window.onorientationchange === 'object');
    var init = function(){
        var orientation,docEl = doc.documentElement, dpr=Math.min(win.devicePixelRatio, 3),count = 0;
        var updateOrientation = function(){
            clientWidth = docEl.clientWidth;
            clientHeight = docEl.clientHeight;
            if(supportOrientation){
                orientation = window.orientation
                switch(orientation){
                    case 90:
                    case -90:
                        orientation = 'landscape';//横屏
                        break;
                    default:
                        orientation = 'portrait';//竖屏
                        break;
                }
            }else{
                orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
            }
            docEl.setAttribute('class',orientation);
            if(orientation==='portrait'){
                if (clientWidth == undefined) return;

//ui给的效果图是安卓iphone6来做的  所以此处是750   ，老实说这个if在这里没一点用，但是淘宝的写法有用到dpr，还是自己不够专业  所以此处暂留
                if (clientWidth / dpr > 750) {
                    clientWidth = 750 * dpr;
                }

//根部的fontsize是20px （这个看个人）；为什么要用Math。round（）是因为项目中是rem和px混合使用，在做数据滚动的时候会出现1px的问题，加上Math。round就行了
                docEl.style.fontSize = Math.round(40 * (clientWidth / 750)) + 'px';
                //                document.body.scrollTop = 0 ;
                //               alert(docEl.style.fontSize)
            }
            if(orientation==='landscape'){
                if (clientHeight === undefined) return;
                if (clientHeight / dpr > 750) {
                    clientHeight = 750 * dpr;
                }

//横屏的fontsize   还可以用原生js写一些操作 ：在竖屏浏览到界面一半时横屏，横屏的界面处在哪个位置可以在这里设置   scolltop
                docEl.style.fontSize = Math.round(40 * (clientHeight / 750)) + 'px';
                //                document.body.scrollTop = Math.round(40 * (clientHeight / 750))*8 ;
                //                alert(docEl.style.fontSize)
            }
        };

//此处是重点中的重点   这样写的原因是：在横竖屏切换操作时，无法一开始正确的获取设备的宽度（高度），所以要用settimeout，找了好久的帖子才找到的黑魔法  
        if(supportOrientation){
            window.addEventListener('orientationchange',function(){
                if(count<20){
                    count++;
                    setTimeout(updateOrientation,10)
                }
            },false);
        }else{
            //监听resize事件
            window.addEventListener('resize',function(){
                if(count<20){
                    count++;
                    setTimeout(updateOrientation,10)
                }
            },false);
        }
        updateOrientation();
    };
    window.addEventListener('DOMContentLoaded',init,false);


})(document, window);

4.1 懒加载图片   这个网上有很多  我用的是img的onload替换src，这里也用了settimeout，解释原因可能知识不太够。描述下现象吧：第一次显示过渡图片（一般为公司形象图片）直到真实图片加载完毕完成懒加载，但是第二次就不行了

function changeImgSrc(obj) {
    setTimeout(function () {
        if (obj.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
            obj.onload = null;
        }
        var trueSrc = $(obj).attr('data-src');
        $(obj).attr('src', trueSrc);
    }, 100)
}

5结束

结果---大体上差强人意，发了一笔奖金给女朋友买了点东西   ^_^