vue3中H5页面兼容安卓与IOS问题

大白592

已于 2024-04-30 14:08:49 修改

阅读量739

点赞数 3

文章标签： android ios

于 2024-04-29 14:05:05 首次发布

本文链接：https://blog.csdn.net/weixin_69890748/article/details/138305239

版权

本文讨论了在移动端混合开发中，如何使用Vue3、vant3和Vite框架解决WebView中的JavaScript兼容问题，包括判断设备类型（Android/IOS）的函数，以及在使用dayjs插件处理日期格式时的注意事项。

摘要由CSDN通过智能技术生成

一、项目背景描述：移动端混合开发中，在使用WebView或类似技术在iOS和安卓应用中运行JavaScript代码时，常常要考虑到兼容安卓与IOS的问题。

二、项目技术栈：vue3+vant3+vite。

三、相关代码：
3.1、在utils定义好判断是否安卓或IOS的函数方法。

/**
* 判断是否为安卓
*/
export const isAndroid = ()=>{
    var u = navigator.userAgent.toLowerCase();
    var isAndroid = u.indexOf('android') > -1 || u.indexOf('adr') > -1;//android终端
    return isAndroid;  
}
/**
* 判断是否为IOS
*/
export const isIPhone = ()=>{
    var u = navigator.userAgent.toLowerCase();
    var isIOS = u.indexOf('iphone') > -1; //ios终端
    return isIOS;
}

3.2、在使用vant日期组件时,dayjs插件转换日期格式时，不要用"-",统一用"/"。

    import dayjs from 'dayjs';

    const Date1 =  dayjs().startOf('month').format('YYYY/MM/DD');   // 当月第一天
    const Date2 =  dayjs().add(3, 'month').format('YYYY/MM');       // 当月后三个自然月的第一天
    const Date3 =  dayjs().subtract(1, 'month').startOf('month').format('YYYY/MM/DD'); ;    // 上月第一天
    let minDate = ref<any>(new Date(Date1)) //当天选择日期
    let maxDate = ref<any>(new Date(`${dayjs(Date2).subtract(1, 'day').format('YYYY/MM/DD')} 23:59`))  //当月后三个自然月的最后一天

有需求来了，后面内容我再补上。。