首页 > 其他分享 >检测手机系统是iOS还是android(可实现根据手机系统跳转App下载链接)

检测手机系统是iOS还是android(可实现根据手机系统跳转App下载链接)

时间:2023-05-26 21:24:06浏览次数:40  
标签:title App iOS urlStr let 跳转 手机 android

快速实现检测手机系统是iOS还是android(可实现根据手机系统跳转App下载链接); 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12652

效果图如下: 

 


 

实现代码如下:

# 使用方法

#### HTML代码部分

```html

<template>

<view class="content">

<image class="logo" src="@/static/img/appIcon.png" mode="aspectFit"></image>

<view class="text-area">

<text class="title">{{title}}</text>

</view>

</view>

</template>

```

#### JS代码 (引入组件 填充数据)

```javascript

<script>

export default {

data() {

return {

title: '检测手机系统iOS/android系统跳转链接下载App'

}

},

mounted() {

},

onLoad() {

let urlStr = '';

if (this.detect() === 'ios') {

//对IOS系统的移动端页面做点什么

urlStr =

'https://apps.apple.com/cn/app/'

location.href = urlStr;

this.title = "当前手机系统: iOS";

} else if (this.detect() === 'android') {

urlStr = 'https://appgallery1.huawei.com/#/app/';

location.href = urlStr;

this.title = "当前手机系统: android";

} else {

}

},

methods: {

detect() {

let equipmentType = "";

let agent = navigator.userAgent.toLowerCase();

let android = agent.indexOf("android");

let iphone = agent.indexOf("iphone");

let ipad = agent.indexOf("ipad");

if (android != -1) {

equipmentType = "android";

}

if (iphone != -1 || ipad != -1) {

equipmentType = "ios";

}

return equipmentType;

}

}

}

</script>

```

#### CSS

```CSS

<style>

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.logo {

height: 200rpx;

width: 200rpx;

margin-top: 200rpx;

margin-bottom: 40rpx;

}

.title {

font-size: 36rpx;

color: #333333;

}

</style>

```

标签:title,App,iOS,urlStr,let,跳转,手机,android
From: https://www.cnblogs.com/ccVue/p/17435843.html

相关文章

  • 婚恋APP小程序基本功能展示。
    当代年轻人的生活基本上就是两点一线,每天往返于家里和公司,几乎很少有结交新朋友的机会,找对象更是难上加难。相亲,这个年轻时曾无比反感的词,随着年龄增长,现在倒是没那么抗拒了。但是线下联谊往往竞争者众多,难以突出;朋友介绍的不用竞争,但长相一般的是大多数;约会软件上的俊男靓女倒是多......
  • 深入理解 apply()方法
      apply(thisArg)apply(thisArg,argsArray)thisArg在 func 函数运行时使用的 this 值。请注意,this 可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。argsArray 可选一个数组或......
  • 选择APP开发公司有哪些注意事项?
    随着移动互联网的高速发展,许多团队选择投入到APP开发的工作中去。无论是经验丰富的,还是刚刚毕业的学生,都想要快速进入APP开发行业,想要尽快捕获到APP开发的第一桶金。这就导致了APP开发公司鱼龙混杂,企业在选择广州APP开发公司的时候也会略显吃力。今天,广州思久科技小编就站在中立的......
  • 广州app开发公司哪家最好?
    广州是中国南方最大的城市之一,国内四大一线城市。具有丰富的商业和文化资源,拥有众多的互联网企业和科技公司。在这里,预算不成问题,寻找一个好的app开发公司也是很容易的。那么,广州app开发公司哪家最好?首先,作为一个经验丰富的个人用户或企业,您需要确定您的应用程序的目标和需求。例如......
  • 手机App模板开发的优势和弊端有哪些?
    手机App模板开发是自移动App开发行业产生以来,比较受欢迎、较简单的App制作方式,也是很多App开发公司提供给客户的服务,但凡事都有两面性,App模板制作手机客户端同时也具备一定的弊端,下面来看看手机App模板开发的优势和弊端。 手机App模板开发的优点App模板开发就是已经开发好的一套系......
  • 【2023最新】超详细图文保姆级教程:App开发新手入门(6)
    9.编译正式版 本章我们简单介绍一下如何设置应用的桌面图标及应用的启动页 通过之前章节的学习,我们已经完成了一个简单应用的开发,本部分章节主要目的是为本系列教程进行一个整体性的收尾,简介讲解一下如何编译一个可用于上架应用市场的正式版安装包。(本章内容超级简单......
  • 2023最新多端社交圈子系统源码 | 陌生人社交 | 即时聊天通信 | 小程序+H5+PC+APP等多
     DUOKE多客圈子论坛社区系统,含完整的后台PHP系统。功能:小程序授权登陆,H5和APP,手机号登陆,发帖,建圈子、发活动。圈主可置顶推荐帖子,关注、粉丝、点赞等。可作为圈子贴吧、小红书等自媒体。下载地址直接点击群聊插件单独频道功能说明:1、可申请建群。后台审核,2、群分为自由加入......
  • 如何在上架App之前设置证书并上传应用
    ​App上架教程在上架App之前想要进行真机测试的同学,请查看《iOS-最全的真机测试教程》,里面包含如何让多台电脑同时上架App和真机调试。P12文件的使用详解注意:同样可以在BuildSetting的sign中设置证书,但是有点麻烦,建议就在General中设置证书,比较方便,还可以查看错误的地方。......
  • 如何在上架App之前设置证书并上传应用
    ​App上架教程在上架App之前想要进行真机测试的同学,请查看《iOS-最全的真机测试教程》,里面包含如何让多台电脑同时上架App和真机调试。P12文件的使用详解注意:同样可以在BuildSetting的sign中设置证书,但是有点麻烦,建议就在General中设置证书,比较方便,还可以查看错误的地方。......
  • 使用 CloudFront Functions 做域名30X跳转
    创建函数此过程向您展示如何使用CloudFront控制台创建一个将查看器重定向到不同URL并返回自定义响应标头的简单函数。在CloudFront控制台中创建函数登录AWS管理控制台并在 https://console.aws.amazon.com/cloudfront/v3/home打开CloudFront控制台.在导航窗格......