微信开发中，不同手机系统遇到的bug（不定时更新）

Ios系统

1、body上绑定click事件失效。

解决：body标签下面，用个div，当做包裹所有内容的大容器。给这个div，绑定click事件。

2、不支持 YYYY-MM-DD 的时间格式。

用new Date(YYYY-MM-DD) 时，在安卓手机上正常获取时间数据。在ios上就不行。

解决：改成  YYYY/MM/DD 的格式。用 .replace(/-/g, '/') 的方法。

3、使用vue开发时，有回退显示空白的现象

出现情景描述：列表页（多条数据）—— 滑到下面，点击某条数据，进入详情页 —— 点击详情页的微信自带返回按钮 —— 回到的列表页显示一片空白

解决： 在列表页的ajax成功回调中，获取数据后，加上如下代码：

this.$nextTick(()=>{
    window.scrollTo(0,1);
    window.scrollTo(0,0);
});

4、使用transform定位素材时，有时会丢失素材。

解决：给这个用transform定位的元素，它的父元素，加上 transform: perspective(1000); 的样式。

1000是自定义的值，具体 perspective 的用法，可以去 W3school 查一下。

5、动画有时不执行。

情景：给元素设置动画，但元素是依赖接口返回的数据生成的。点击页面链接刚进入这个页面，动画是不执行的。刷新也不执行。

解决：用 animation 定义动画的时候，设置延时执行。比如： animation: rotate1  3s  .5s  linear  infinite ;

6、如何禁用微信浏览器的调整字体大小？（不属于bug，属于优化。）

body {
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}

7、tab栏固定定位在底部，iphoneX 的自带黑条遮挡tab栏内容。

第一步，下面这句中加入“viewport-fit=cover”

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

第二步，body和固定在底部的元素，加上如下样式：

比如 .tab 是固定在底部的元素。

@supports (bottom: env(safe-area-inset-bottom)) {
        body, .tab {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

加上@supports 的条件限制，是为了该样式仅对 iphoneX 生效。

详细了解，可以参考下面两篇文章：

https://www.cnblogs.com/lhb25/p/h5-web-app-adapt-to-iphonex.html

http://www.mamicode.com/info-detail-2147266.html

8、设置overflow:auto/scroll; 后，ios上滑动不流畅

解决办法：给设置overflow:auto/scroll;的元素，加上 -webkit-overflow-scrolling: touch; 的样式

Android系统

1、一加等手机，rem计算有误。

解决：封装的函数如下。将这个函数放到rem计算的函数中运行。

function modifyPx() {
    var ele = document.documentElement;
    if(!ele) return;
    var standard_rem = Math.round(parseFloat(ele.style.fontSize));
    var test_div = document.createElement('div');
    test_div.style.width = '1rem';
    test_div.style.height = '0';
    document.body.appendChild(test_div);
    var actual_rem = test_div.offsetWidth;
    var rate = standard_rem / actual_rem;
    if(rate != 1) {
        document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + (parseFloat(htmlEle.style.fontSize) * rate) + "px !important");
    }
    document.body.removeChild(test_div);
}

　原理：假设一个盒子，设置它的宽度是1rem。计算它的理想宽度（就是按照正常rem计算的结果），然后得到它在手机上的实际宽度。

将这两个数据作比较，一旦不同，就按照这两个数据的关系比例，重新设置根元素大小。

2、如何禁用微信浏览器的调整字体大小？（不属于bug，属于优化。）

  if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		handleFontSize();
	} else {
		if (document.addEventListener) {
			document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
		} else if (document.attachEvent) {
			document.attachEvent("WeixinJSBridgeReady", handleFontSize);
			document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
	}
	function handleFontSize() {
		// 设置网页字体为默认大小
		WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
		// 重写设置网页字体大小的事件
		WeixinJSBridge.on('menu:setfont', function() {
			WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
		});
	}

3、用 Vue+Webpack 开发的项目，安卓低版本上，无法正常显示和使用。

测试机：华为荣耀6  android 4.4.2

解决办法：

项目安装 babel-polyfill 、 es6-promise 、viewport-units-buggyfill 三个插件。（第三个插件的前提是项目中使用的适配单位是 vw）

在项目入口文件，比如main.js中，头部引入

import "babel-polyfill"
import 'es6-promise/auto'　　

还要调用 viewport-units-buggyfill

var hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
	hacks: hacks
});

解释： babel-polyfill 、 es6-promise 是解决低版本不识别 es6 新的 api

　        viewport-units-buggyfill 是解决低版本不识别 vw 单位。

补充：虽然项目里已经装了bable一些插件，但是只转换新语法，不转换新api。

其它问题

1、阻止浏览器的橡皮筋效果

document.body.addEventListener('touchmove', function (e) {
　　e.preventDefault(); //阻止默认的下拉滑动的效果
}, {passive: false});

　{passive: false} 必须加，否则ios无效

参考文章：https://segmentfault.com/a/1190000014134234

此外，经过测试（ios版本 11.4.1），页面中如果有按钮，在 safari浏览器中，快速点击会缩放页面。后来发现，把标签 button 改成 div 的方式。就不会这样了。

页面前提，在viewport的meta中设置了 user-scalable=no