h5页面相关1. new Date()的使用 2. ios中margin-bottom失效 3. vue项目打开后一直

1. new Date()的使用

在安卓系统中new Date(‘2018-11-1’)可以正常使用，但是ios系统不能正常使用，日期必须是两位数，如：new Date(‘2018-11-01’) 更改：ios系统中支持的是new Date(‘2018/11/1’)形式

2. ios中margin-bottom失效

可替换成padding-bottom

3. vue项目打开后一直发请求 /sockjs-node/info?t=

浏览器一直在频繁发送这个请求，导致联调时很不方便，而且本地开发时项目也不能实时更新。首先 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道，作用就是保证我们在改完代码重新编译后，通知浏览器重新加载变更结果。

解决方法（1）

找到/node_modules/sockjs-client/dist/sockjs.js，找到代码的 1605行

 try {
  //  self.xhr.send(payload); 把这里注掉
  } catch (e) {
    self.emit('finish', 0, '');
    self._cleanup(false);
  }

解决方法（2）

第一种方法操作后，项目不能自动更新了，所以方法1并不好。将代理配置的端口号改成与项目一致的端口号既可以解决提示的问题又不影响更新

4. 页面自适应

研究了几大厂h5端自适应的方法，最后还是采用vw+rem的方法，参考网易新闻，因为我们主要是显示文章

/**
750px设计稿
    取1rem=100px为参照，那么html元素的宽度就可以设置为width: 7.5rem，于是html的font-size=deviceWidth / 7.5
**/
html {
    font-size: 13.33333vw
}

@media screen and (max-width: 320px) {
    html {
        font-size: 42.667PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size: 48PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size: 50PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size: 52.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size: 54.93PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size: 55.2PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size: 64PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size: 72PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size: 85.33PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size: 96PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size: 102.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size: 102.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size: 102.4PX;

        #app {
            margin: 0 auto
        }
    }


}

vue.config.js配置rem的单位

loaderOptions: {
    postcss: {
        // 这是rem适配的配置
        plugins: [
            require('postcss-px2rem')({
                remUnit: 100
            })
        ]
    }
}

配置完成后可根据设计稿的单位直接用px单位即可，不需计算，不需要转换单位

5.音频播放、拖动进度条

进度条结构

完整的进度条 + 播放时的进度条 + 当前时间的点
功能

点击『播放』按钮的时候，进度条和当前时候开始变化，拖动进度条可以修改当前时间，拖动结束后播放音频，播放完成回到起点，停止播放
实现思路

1）在音频的 @canplay 事件中，获取音频的总时长 2）点击播放按钮，音乐播放，播放时间/总时长 = 进度条/总长度，根据比例获取进度条的长度 3）拖动进度条，进度条上有三个事件： @touchstart.prevent ， @touchmove.prevent， @touchend touchstart 拖动开始需要记录当前进度条的位置，获取总长度 touchmove 拖动过程中拖动的距离+起点就是当前进度条的位置（注意判断是左移动还是右移动），再根据当前进度条/总长比例值获取当前的时间， touchend拖动结束后，再根据比例获取当前时间，播放音频 4）完整的进度条上还要写上点击事件，点击的时候直接跳转到当前的位置，播放音频。

6. vue-cli3 内网穿透(映射) 出现 Invalid Host header

这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 不是配置内的，将中断访问。所以需要设置禁止主机检查

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

7.文字两端居中

给文字本身元素添加text-align: justify;代码并不能达到我们想要的效果，还需要给元素的父元素添加以下声明

text-align: justify; 
text-align-last: justify; 
text-justify: inter-ideograph;

8.文字多行超出

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //要显示的行数
overflow: hidden;

9.安卓手机上的圆不圆

安卓手机上要用border-radius设置出的圆圈不圆，嗯就是这么变态，主要是因为我们用的rem单位，安卓的各版本手机不同的分辨率，兼容不好，可直接设置味、为PX单位，也可以通过放大两倍的方法再缩小的方法，但是处理比较麻烦

  i{
       display inline-block
       width .16rem
       height .16rem
       background-color #D0021B
       border-radius 50%
       transform scale(.5)
       transform-origin: 0% center
   }

10.textarea去掉右下角的样式，ios键盘收起页面不回弹

去掉样式

<style type="text/css">
textarea {
    resize: none;
}
</style>

不回弹的问题需要自己设置下页面的滚动

//失去焦点后页面弹回
handleBlur() { 
     setTimeout(() => {
           window.scrollTo(0, 0);
      }, 200);
}

11.ios点击态

伪类:active在ios中不生效，需要在相关的元素或者body上绑定touchstart事件才能使元素的:active生效

  document.body.addEventListener('touchstart', function (){});

也可以直接在body上添加

<body touchstart>
    <!-- ... -->
</body>

11. picker穿透

mint-ui mt-datetime-picker滚动时会穿透页面，弹出层打开的时候禁止body的滑动事件，弹出层关闭恢复body的滑动事件

//对应的组件上面添加事件
<mt-datetime-picker v-model="value" @confirm="handleConfirm" @visible-change="handleValueChange">
</mt-datetime-picker>

//Vue数据变量区域
data(){
   handler:function(e){e.preventDefault();}
},

//Vue函数方法区域
methods:{
	handleValueChange(val){
  		if(val) {
     		document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
  		}else{
    		document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false });    
  		}
	}
}

12. vue中的百度统计

在index.html里添加

var _hmt = _hmt || [];
window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到
(function() {
	var hm = document.createElement("script");
	hm.src = "https://hm.baidu.com/hm.js?ce29c531b57364882485d65bbdd13586";
	var s = document.getElementsByTagName("script")[0]; 
	s.parentNode.insertBefore(hm, s);
})();

route.js中设置

// vue router
router.beforeEach((to, from, next) => {
    // 统计代码
    // _hmt.push(['_trackPageview', pageURL]) 必须是以"/"（斜杠）开头的相对路径
    
    if (to.path) window._hmt.push(['_trackPageview', '/#' + to.fullPath])
    next()
})

在控制台看到有hm.gif的请求就代表成功了，还可以自定义事件，具体看文档

13.axios允许后端缓存

主要是用于设置cookie

axios.defaults.withCredentials = true;

segmentfault.com/a/119000001…

14. cookie和localstorage缓存数据

cookie能设置有效期但是不能缓存对象数组，且存储控件小 storage能缓存对象，但是不能设置有效期

15.创建特定大小的数组

[...Array(3).keys()]

h5页面相关