1.html5 video autoplay 自动播放失效的问题

  1. chrome66以及更高的版本不允许媒体自动播放。
  2. safari 阻止自动播放视频
1
2
<!-- pc端 设置 muted 静音属性可以实现自动播放 -->
<video src="xx" autoplay muted></video>
1
2
3
4
5
// 移动端 可以在微信的一个回调里面执行自动播放 “仅在微信浏览器环境有效”
const video = document.getElementById('video')
document.addEventListener('WeixinJSBridgeReady', () => {
    video.play()
});

2.监听ios微信关闭页面事件

1
2
3
4
5
6
7
8
9
10
11
12
13
pushHistory(); 
window.addEventListener("popstate", function(e) { 
    // alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
    // 关闭当前微信窗口
   WeixinJSBridge.call('closeWindow');
}, false); 
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#"
    }; 
    window.history.pushState(state, "title", "#"); 
}

3.js动态修改animationDuration无效

根据w3c规定运行中的动画改变animation timing / keyframe被忽略是符合标准的。

解决方案利用body动态添加一个class样式，在这个样式单独设置animationDuration，最后添加class即可

4.vue监听手机物理返回键（浏览器返回）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//1、挂载完成后，判断浏览器是否支持popstate
mounted(){
  if (window.history && window.history.pushState) {
    // history.pushState(null, null, document.URL);
    // 这里不使用 ` pushState `` 因为会产生一条历史记录
    // 而使用 ` replaceState ` 但是会直接替换掉当前url,而不会在history中留下记录
    history.replaceState(null, null, document.URL);
    window.addEventListener('popstate', this.goBack, false);
  }
},
//页面销毁时，取消监听。否则其他vue路由页面也会被监听
destroyed(){
  window.removeEventListener('popstate', this.goBack, false);
},
//3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写
methods:{
  goBack(){
    this.$router.replace({path: '/'});
    //replace替换原路由，作用是避免回退死循环
  }
}

5.vue 对子组件使用v-if，子组件无法watch到props的值

1
2
3
4
5
6
7
8
9
10

  watch: {
  levelDetail: {
    immediate: true, // 很重要！！！
    handler (val) {
      this.levelPersonal = !val ? {} : val
      // console.log('action Value:', val, this.levelPersonal)
    }
  }
}

6.解决npm有时候无法下载的情况

1
2
3
npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
npm config get registry

7.手机和电脑同局域网下，手机打不开链接

往往是电脑没有关闭防火墙

8.安卓部分机型文字会有一部分被截取的问题

设置 line-height 即可

9.处理ios input 获取焦点时背景顶上去的bug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function disposeIosInputFocus() {
    var u = navigator.userAgent;
    var flag;
    var myFunction;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if(isIOS){
        document.body.addEventListener('focusin', () => {  //软键盘弹起事件
            flag=true;
            clearTimeout(myFunction);
        })
        document.body.addEventListener('focusout', () => { //软键盘关闭事件
            flag=false;
            if(!flag){
                myFunction = setTimeout(function(){  
                    window.scrollTo({top:0,left:0,behavior:"smooth"})//重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)
                    
                },200);
            }else{
                return
            }
        })
    }else{
        return
    }
}

10.安卓app里面内嵌html5页面当设置手机字体大小的时候会影响到页面的显示

解决方案：安卓设置 webview.getSettings().setTextZoom(100); 即可

11.ios在使用渐变透明色会出现样式错误问题

解决方案：将 transpaent 换成 rgba(x,x,x,x) 即可

12.解决安卓、ios遮罩层背景还可以滚动的问题

1
2
3
4
5
6
7
8
9
<div @touchmove="onPreventTouchMove"></div>
function onPreventTouchMove() {
    /* istanbul ignore else */
    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
      event.preventDefault()
    }
    
    event.stopPropagation()
}