微信H5苹果机和安卓机兼容性问题

1、音乐播放

<audio id="audio" :src="music" loop="loop" autoplay="autoplay" ref="myMusic"></audio>

使用autoplay来设置音乐自动播放，安卓机是可以的，但是苹果机并不能自动播放，这个时候需要借助微信jsdk，如下：

  import Vue from "vue";

  import wx from "weixin-js-sdk";

  Vue.use(wx);

import Vue from "vue"; import wx from "weixin-js-sdk"; Vue.use(wx); wx.config({ appId:appId, timestamp: timestamp, nonceStr: nonceStr, signature:signature, jsApiList: [ "onMenuShareTimeline", //分享给好友 "onMenuShareAppMessage", //分享到朋友圈 "onMenuShareQQ", //分享到QQ "onMenuShareWeibo" //分享到微博 ] }); wx.ready(function(e) { // 在这里进行自动播放 document.getElementById('audio').play(); var shareData = { title: "title", desc: "desc", link: rul, imgUrl:imgUrl "" //分享时候的图片 }; wx.onMenuShareAppMessage(shareData); wx.onMenuShareTimeline(shareData); wx.onMenuShareQQ(shareData); wx.onMenuShareWeibo(shareData); });

2、视频自动播放

<video id="video" controls="controls" webkit-playsinline="true" playsinline="true" preload="auto" autoplay=“autoplay” loop width="100%" muted style="object-fit:fill" :poster="url + 'poster.jpg'" > <source :src="url +'bgvedio.mp4'" type="video/mp4" /> </video>

video设置autops属性则为自动播放，但是现在基本上浏览器都不支持这个功能了，想要自动播放可以加入muted属性，表示静音播放，除了浏览器兼容之外，还有手机的兼容，苹果机可以支持静音播放，但是安卓机并不行

3、小间隙问题

在图盘与图片之间若间隙太小则默认隐藏了（1px）

4、定时器

setTimeOut(()=>{}, timer),在苹果机中，timer值不支持30ms一下的

5、ios 表单元素 有内部阴影

可通过修改css样式：

input{ -webkit-appearance: none; }

6、ios input 调用键盘屏幕上移后，失去焦点不自动回落

解决方法是监听键盘弹起和收起事件或者在输入框失去焦点的时候是使用事件调用

监听键盘方法

let myFunction let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIos) { // 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起） document.body.addEventListener('focusin', () => { // 软键盘弹起事件 clearTimeout(myFunction) }) document.body.addEventListener('focusout', () => { // 软键盘关闭事件 clearTimeout(myFunction) myFunction = setTimeout(function() { window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置 }, 200) }) }

调用事件

let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){ setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) }

7、IOS/safari设备上，接口返回日期为字符串格式「 yyyy-MM-dd hh:mm:ss」, 经过new Date(str)后会出现NAN

可通过正则进行转换

let dateStr = '2019-09-09 10:11:11' let dateNum = new Date(dateStr.replace(/-/g,'/')).getTime() console.log(dateNum) // 时间戳

8、使用html2canvas插件时，iphone7 iphonex只支持1.0.0-rc.4版本，具体请看下面链接

https://blog.csdn.net/qq_41227106/article/details/106764421

9、vue使用不同的路由模式对分享接口的影响，hash模式大家只需要进行一次的初始化，history模式安卓机需要每个页面都进行一次初始化，具体操作请看下面链接

https://mp.csdn.net/console/editor/html/105058174