uniapp开发踩坑兼容问题【第一弹！！】，血泪史o(╥﹏╥)o，一次学习终生避雷！！！

1.移动端适配与兼容性问题

1）new Date（）在IOS上出现值为NAN的问题

• 但在IOS下，这是使用获取到的值是NAN。 原因：因为IOS下的new Date()不支持"-“这个字符 解决方法：把”-“改成‘”/"就可以了

  new Date("2017-08-11 12:00:00".replace(/-/g, "/"));
  

2) Android部分机型使用height和line-height等值设置垂直居中，但会显示偏高的问题0

• 原因：貌似是有部分Android机型有自己默认的line-height，我们额外设置的line-height不起作用。 解决办法：设置line-height：normal，再通过padding去设置居中就可以了。

line-height：normal; padding:xxpx 0;

### 3) 防止手机中网页放大和缩小。
- viewport 设置不缩放
```html

3) iphone及ipad下输入框默认内阴影

Element {
 -webkit-tap-highlight-color:rgba(255,255,255,0)
}

4) 某些Android手机圆角失效

background-clip: padding-box;

5) 移动端300ms点击延迟

• 设置meta标签禁止缩放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

• FastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

6) 点击穿透问题

• 来得很直接github上有个fastclick可以完美解决 引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );

• 对于B元素本身存在默认click事件的情况，应及用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault()，从而阻止click事件的产生。

$("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});

7) 电话号码识别

• 在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

• 7 位数字，形如：1234567

• 带括号及加号的数字，形如：(+86)123456789

• 双连接线的数字，形如：00-00-00111

• 11 位数字，形如：13800138000

关闭识别
html复制代码<meta name="format-detection" content="telephone=no" />

8) 邮箱识别

邮箱识别
安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别：

<meta content="email=no" name="format-detection" />

9) 常用meta 标签的设置

<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
<meta name="full-screen" content="yes">             //全屏显示
<meta name="browsermode" content="application">     //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="x5-orientation" content="portrait">     //QQ强制竖屏
<meta name="x5-fullscreen" content="true">          //QQ强制全屏
<meta name="x5-page-mode" content="app">            //QQ应用模式

10) 清除输入框内阴影

div {
  -webkit-appearance: none;
}

11) 输入框默认字体颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

12) 用户设置字号放大或者缩小导致页面布局错误

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

13) android系统中元素被点击时产生边框

• 部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

css复制代码a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

14) audio 和 video 在 ios 和 andriod 中自动播放

• 这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。加入自动触发播放的代码

$('html').one('touchstart', function() {
  audio.play()
})

15) iOS 上拉边界下拉出现空白

• 手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。
• 在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

16) onkeyUp 和 onKeydown 兼容性问题

• IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件

17) IOS12 输入框难以点击获取焦点，弹不出软键盘

• 定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改

 FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf('date') !== 0 &&
    targetElement.type !== 'time' &&
    targetElement.type !== 'month'
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}

18) IOS 键盘收起时页面没用回落，底部会留白

通过监听键盘回落时间滚动到原来的位置

window.addEventListener('focusout', function() {
  window.scrollTo(0, 0)
})

//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })

19) iOS 下fixed 失效的原因

• 软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll

<body>
  <div class='warper'>
    <div class='main'>div>
  <div>
  <div class="fix-bottom">div>
body>

.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

2.获取用户电量进行提示

navigator.getBattery().then(function (battery) {
  // 获取设备电量剩余百分比
  var level = battery.level //最大值为1,对应电量100%
  console.log('Level: ' + level * 100 + '%')

  // 获取设备充电状态
  var charging = battery.charging
  console.log('充电状态: ' + charging)

  // 获取设备完全充电需要的时间
  var chargingTime = battery.chargingTime
  console.log('完全充电需要的时间: ' + chargingTime)

  // 获取设备完全放电需要的时间
  var dischargingTime = battery.dischargingTime
  console.log('完全放电需要的时间: ' + dischargingTime)
})

• 监听用户电池状态变化

navigator.getBattery().then(function (battery) {
  // 添加事件，当设备电量改变时触发
  battery.addEventListener('levelchange', function () {
    console.log('电量改变: ' + battery.level)
  })

  // 添加事件，当设备充电状态改变时触发
  battery.addEventListener('chargingchange', function () {
    console.log('充电状态改变: ' + battery.charging)
  })

  // 添加事件，当设备完全充电需要时间改变时触发
  battery.addEventListener('chargingtimechange', function () {
    console.log('完全充电需要时间: ' + battery.chargingTime)
  })

  // 添加事件，当设备完全放电需要时间改变时触发
  battery.addEventListener('dischargingtimechange', function () {
    console.log('完全放电需要时间: ' + battery.dischargingTime)
  })
})

• 兼容性

3.小程序版本更新提示

onShow: function(e) {
			console.log('showed2', e);
			uni.hideTabBar();
            //系统获取   本API返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。
			const updateManager = uni.getUpdateManager();
			console.log(updateManager, "uploadRes");
			updateManager.onCheckForUpdate(function(res) {
				console.log(res, "uploadRes");//返回true 或 false  是否更新
				// 请求完新版本信息的回调
				console.log(res.hasUpdate);
				if (res.hasUpdate) {
					updateManager.onUpdateReady(function(res) {
						uni.showModal({
							title: '更新提示',
							content: '新版本已经准备好，是否重启应用？',
							success(res) {
								if (res.confirm) {
									// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
									updateManager.applyUpdate();
								}
							}
						});

					});
					updateManager.onUpdateFailed(function(res) {
						// 新的版本下载失败
						uni.showModal({
							title: "新版本已更新！",
							content: "新版本已上线，请重启小程序完成更新！"
						});
					});
				}
			});

		},

4.手机端点击input输入框时网页自动放大

这是因为在移动端自适应宽度的代码中，没有把input的自动缩放关闭！一般常见于苹果手机的ios系统，而安卓系统似乎是默认关闭。

input框自动放大，虽然说有便于用户的输入和阅读，但也同时给用户带来了视觉的麻烦，所以一般情况下，我们都是选择关闭自动缩放的！

那么该如何关闭input输入框在手机端的这个缩放效果呢？

1，找到你的网页头部head的代码，查看代码并找到，下面的这段：

这段

2，找到之后，将这段代码更改为：

5.常用api

show-menu-by-longpress | 标签  添加后长按扫描二维码