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

  1. chrome66以及更高的版本不允许媒体自动播放。
  2. safari 阻止自动播放视频

设置 muted 静音属性可以实现自动播放

1
<video src="xx" autoplay muted></video>

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()
}

13.使用html2canvas截图不全的问题

如果截图的内容高度高于当前浏览器可视区域,则需要在截图前将body滚动条置顶

14.服务端部署的一些小事

  • 尽量将npm i 换成下面语句,可以保证安装依赖的时候是使用 package-lock.json中的版本,并且在linux拥有root最高权限

  • 尽量不要使用cnpm,cnpm将无法自动生成或者更新 package-lock.json

  • npm太慢可以设置成国内淘宝源 npm config set registry https://registry.npm.taobao.org

1
npm ci --unsafe-perm

15.node-sass安装失败

除了使用cnpm去安装还可以通过设置全局环境变量

1
SASS_BINARY_SITE = https://npm.taobao.org/mirrors/node-sass

16. vue+axios图片上传爬坑

因上传文件要使用到 FormData对象,代码如下

1
2
3
4
5
6
7
onUpload() {
const formData = new FormData()
formData.append('file', file)
axios.post(url, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
}
这个时候你会发现请求头是没有boundary,主要的原因还是我的axios做了全局拦截器,里面是有做一些数据处理,并且我们的headers 是不需要额外去处理的,浏览器会自动判断类型加上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// http.js
// 添加请求拦截器,主要是做全局参数和签名处理
axios.interceptors.request.use(config => {
if (config.method === 'post' && !whiteList.includes(config.url)) {
config.data = qs.stringify(Object.assign(config.data || {}, {
sign: paramsToMd5(Object.assign(config.data || {}, {
timestamp: Date.now()
}))
}))
} else {
config.params = Object.assign(config.params || {}, {
sign: paramsToMd5(Object.assign(config.params || {}, {
timestamp: Date.now()
}))
})
}
console.log('config = ', config)

return config
}, error => {
// 对请求错误做些什么
return Promise.reject(error)
})

最终的解决方案就是重新axios create一个纯净的axios对象方可解决

1
2
3
4
5
6

onUpload() {
const formData = new FormData()
formData.append('file', file)
axios.create().post(url, formData)
}

17.移动端适配

目前移动端有两种流行的两种适配方式

  • px转换rem
  • px转换vw

今天介绍一下px转换vw

安装 postcss-px-to-viewport

1
npm i postcss-px-to-viewport -D

配置文件

在项目根目录创建 postcss.config.js 代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
// 视窗的宽度,对应的是我们设计稿的宽度,我们公司用的是375
viewportWidth: 375,
// 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
// viewportHeight: 1334,
// 指定`px`转换为视窗单位值的小数位数
unitPrecision: 3,
// 指定需要转换成的视窗单位,建议使用vw
viewportUnit: 'vw',
// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
selectorBlackList: ['.ignore'],
// 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
minPixelValue: 1,
// 允许在媒体查询中转换`px`
mediaQuery: false
}
}
}