前端根据不同手机类型,跳转对应的市场下载APP

<template>
	<view class="index">
		<image src="../../static/icon/downapp2.png" mode="" class="img" @click="goDownload">image>
		<image src="../../static/icon/downapp3.png" mode="" class="img" @click="goDownload">image>
	view>
template>

<script>
	export default {
		data() {
			return {

			}
		},
		onShow() {
		},
		methods:{
			// 判断机型
			judeBrand() {
				const userAgent = navigator.userAgent.toLowerCase()
				const isIphone = userAgent.match(/(iphone|ipad|ipod)/i);
				const isHuawei = userAgent.match(/huawei/i);
				const isHonor = userAgent.match(/honor/i);
				const isOppo = userAgent.match(/oppo/i);
				const isOppoR15 = userAgent.match(/pacm00/i);
				const isVivo = userAgent.match(/vivo/i);
				const isXiaomi = userAgent.match(/mi\s/i);
				const isXIAOMI = userAgent.match(/xiaomi/i);
				const isXiaomi2s = userAgent.match(/mix\s/i);
				const isRedmi = userAgent.match(/redmi/i);
 
				if (isIphone) {
					return 'iphone'
				} else if (isHuawei || isHonor) {
					return 'huawei';
				} else if (isOppo || isOppoR15) {
					return 'oppo';
				} else if (isVivo) {
					return 'vivo';
				} else if (isXiaomi || isRedmi || isXiaomi2s || isXIAOMI) {
					return 'xiaomi';
				} else {
					return 'other'
				}
			},
			 goDownload() {
				const iosLinkUrl = "苹果链接"
				const androidLinkurl = "安卓链接"
				const huaweiUrl = 'appmarket://details?id=com.xx.xxx'
				const oppoUrl = "oppomarket://details?packagename=com.xx.xxx"
				const vivoUrl = "vivomarket://details?id=com.xx.xxx"
				const xiaomiUrl = 'mimarket://details?id=com.xx.xxx'
				switch (this.judeBrand()) {
					case 'iphone':
						this.downLoadUrl(iosLinkUrl)
						break
					case 'xiaomi':
						this.downLoadUrl(xiaomiUrl)
						break
					case 'huawei':
						this.downLoadUrl(huaweiUrl)
						break
					case 'vivo':
						this.downLoadUrl(vivoUrl)
						break
					case 'oppo':
						this.downLoadUrl(oppoUrl)
						break
					default:
						this.downLoadUrl(androidLinkurl)
						break
				}
			},
			downLoadUrl(url) {
				console.log(url);
				return
				location.href = url;
			}
		}
	}
script>

<style scoped lang="scss">
	.index{
		min-height: 100vh;
		background: url('../../static/icon/downapp1.png')no-repeat left top #fff;
		background-size: 750rpx 930rpx;
		padding-top: 1030rpx;
		.img{
			display: block;
			width: 453rpx;
			height: 130rpx;
			margin: auto;
		}
	}
style>

前端根据不同手机类型,跳转对应的市场下载APP_第1张图片

你可能感兴趣的:(uniapp,前端,智能手机)