关于IOS与安卓的区别这些事

文章会经常更新，作为在开发中遇到的一些坑希望能够得到大家的帮助

1、关于new Date（）在IOS的webview中与安卓的webview的区别

在前端与后端同学的交互中经常有关于时间上的数据交流，后端同学使用的sql语句来创建时间的时候，只有以下几种SQL Date 数据类型：

DATE - 格式 YYYY-MM-DD
DATETIME - 格式: YYYY-MM-DD HH:MM:SS
TIMESTAMP - 格式: YYYY-MM-DD HH:MM:SS
YEAR - 格式 YYYY 或 YY 这就导致了我们前端经常会拿到2022-06-23 12：00：00这种格式，在安卓中如果直接将其放入new Date()使用并没有什么问题，各种操作都可以得到支持，但是在ios中却会报错，这是因为在ios的对于格式的处理与安卓是不一样的，Android端是兼容以下两种日期格式的（YYYY-MM-dd HH:mm:ss、YYYY/MM/dd HH:mm:ss），所以在Android上允许以上代码是没有问题的。iOS上只兼容（yyyy/MM/dd HH:mm:ss）格式故需要把YYYY-MM-dd HH:mm:ss转换为YYYY/MM/dd HH:mm:ss

//这里有一个自己用的处理方法
const iosTimeString =  normalTime.split("-").join("/")

2、关于audio标签在页面的不可以自动播放的问题

ios出于对用户的保护，拦截audio标签的el.play()方法,并不是代表着我们不能用了，只是需要在用户的点击方法中才可以正常使用，而且这个点击触发不能够放在promise，settimeout等异步方法中使用，我这里的处理方法有两个

添加一个按钮，由用户手动触发播放
让IOS的同学把自动播放开启，这里可以由客户端的开发同学手动开关的，可以内嵌一个js方法，或者在跳转的时候附带参数让开发同学开启自动播放

3、关于在template的`:style`中使用backgroundImage动态输入链接不显示问题

在平常编写页面的时候必不可免我们需要动态写入背景图链接例如头像，或者后端给的图片链接等等，正常情况这样写是可以的

//这里是平常写法
<div class="lest-item" v-for="(item, index) in workList.slice(3, workList.length)" :key="index">
   <div class="rankNo">{{ item.rank }}</div>
       <div
        class="userAvatar"
        :style="{ backgroundImage: `url(${item.url})` }"></div>
       </div>
   </div>

但是遇到一些特殊情况会无法正确被识别，元素上也不会出现这个内嵌css属性，例如：#、\、中文()、等这些特殊符号，被后端或者其他服务器转码之后会被转译成%21、%20或者不转译直接发送过来解决方案：

//在url中加入''单引号即可
       <div
        class="userAvatar"
        :style="{ backgroundImage: `url('${item.url}')` }"></div>
       </div>

4、关于cdn资源出现跨域问题

在日常的运营过程中，偶现一个问题，就是cdn资源莫名其妙的出现跨域问题，导致线上出现问题，当我们在面临问题的时候，我首先第一时间查看了cdn关于资源的设置问题，再排查一下其他资源问题，发现只有一个svga资源文件出现了这个问题，在仔细通过对资源请求进行排查时候发现资源曾被下线过一段时间，或者说这个资源曾长期的不被使用过，在对这个资源的跨域设置陪之后刷新一下cdn缓存就可以了。具体原因还不是很清楚，只能归因于这个。如果有大佬知道为什么希望能够留言说一下，拜谢

Hybrid页面开发中的一些小坑