移动端前端开发遇到过的Andorid和IOS的差异记录

移动端前端开发遇到过的安卓和苹果的差异记录

  • [1. 引入外部资源,最好用https](#1. 引入外部资源,最好用https)
  • [2. IOS时间戳获取NaN问题](#2. IOS时间戳获取NaN问题)
  • [3. 金额三位分节显示方式](#3. 金额三位分节显示方式)
  • [4. .webp图片支持问题](#4. .webp图片支持问题)

1. 引入外部资源,最好用https

ios处于安全性的考虑,不大支持http引入外部资源,所以引入外部资源的时候最好用https,防止引入失败

2. IOS时间戳获取NaN问题

ios识别不了时间文本里的-,所以用时间文本获取时间戳的时候要做一下处理

时间格式里的-需要替换为/

javascript 复制代码
let time = '2022-11-11'.replace(/-/g, "/");
let date = Date.parse(`${time} 23:59:59`);

3. 金额三位分节显示方式

toLocaleString在部分苹果手机不能用

javascript 复制代码
money.toLocaleString();
javascript 复制代码
// 不兼容小数
	filtermoney(money, decimal, symbol) {
      if (!money || isNaN(money)) return "0";
      var num = parseFloat(money);
      num = String(num.toFixed(decimal ? decimal : 0));
      var re = /(-?\d+)(\d{3})/;
      while (re.test(num)) {
        num = num.replace(re, "$1,$2");
      }
      return symbol ? symbol + num : num;
    },
javascript 复制代码
// 兼容小数,小数部分不分节
if (!money || isNaN(money)) return "0";
      return money.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");

4. .webp图片支持问题

.webp图片在一些苹果手机上无法显示,可以使用字符串的 replace() 方法,将 webp 的后缀名替换为 jpg 的后缀名

监听error事件,当事件目标位img标签时,替换图片路径中的webp

javascript 复制代码
document.addEventListener(
  "error",
  (e) => {
    let target = e.target;
    const tagName = target.tagName || "";
    let type = tagName.toLowerCase();
    console.log(tagName.toLowerCase());
    if (tagName.toLowerCase() === "img" && !target.flag) {
      target.flag = true;
      target.src = target.src.replace("format,webp", "format,jpg");
    }
    target = null;
  },
  true
);
相关推荐
just小千25 分钟前
重学React(二):添加交互
javascript·react.js·交互
qq_5895681043 分钟前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~1 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿3 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年3 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端8 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app