废话不多说,代码走起,
//判断是否微信登陆
isWeiXinLogin() {
var ua = window.navigator.userAgent.toLowerCase();
console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true; // 微信中打开
} else {
return false; // 普通浏览器中打开
}
},
实例: app 分享下载页面的链接到微信中,用户点击链接在微信中打开,点击下载确不是跳转到浏览器中进行下载,而是直接在微信中打开下载文件,会出现乱码,所有需要 判断是否是在微信浏览器中打开还是在普通浏览器中打开,
image.png
上代码:
<template>
<view>
<view class="top-img"><image src="../../static/img/download-img.png" mode=""></image></view>
<view class="content-box100"></view>
<view class="download-wrap">
<view class="left-logo">
<image src="../../static/img/logo.png" mode=""></image>
<text class="js-text">应用名称</text>
</view>
<button class="download-btn" @click="DownLoadAndroid">安卓下载</button>
</view>
<view class="content-box50"></view>
<view class="download-wrap">
<view class="left-logo">
<image src="../../static/img/logo.png" mode=""></image>
<text class="js-text">应用名称</text>
</view>
<button class="download-btn" @click="DownLoadIOS">IOS下载</button>
</view>
<view class="content-box100"></view>
<view class="content-box50"></view>
<!-- 弹出层插件 -->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog type="input" mode="base" :content="content" :duration="2000" :before-close="true" @close="close" @confirm="confirm">IOS下载暂未开放</uni-popup-dialog>
</uni-popup>
</view>
</template>
export default {
data() {
return {
content: '',
platform: ''
};
},
onLoad() {
uni.getSystemInfo({
success: res => {
console.log(res.platform)
this.$data.platform = res.platform;
}
});
},
methods: {
//判断是否微信登陆
isWeiXinLogin() {
var ua = window.navigator.userAgent.toLowerCase();
console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
},
//安卓下载
DownLoadAndroid() {
if (this.isWeiXinLogin()) {
uni.showToast({
icon:'none',
title:'点击右上角 ··· 在浏览器中打开下载',
duration:3000
})
return;
}
var downloadUrl = 'http://192.168.0.251:9999/android/android.apk'; // 下载地址
var urlStr = encodeURI(downloadUrl)
// #ifdef APP-PLUS
plus.runtime.openURL(urlStr);
return;
// #endif
// #ifdef H5
window.open(urlStr);
// #endif
},
// IOS下载
DownLoadIOS() {
uni.showToast({
icon: 'none',
title: 'IOS下载暂未开放',
duration: 3000
});
},
}
};
</script>
CSS
<style lang="less">
.top-img {
width: 750rpx;
height: 685rpx;
image {
width: 750rpx;
height: 685rpx;
}
}
.download-wrap {
display: flex;
width: 670rpx;
margin: 0 auto;
justify-content: space-between;
align-items: center;
.left-logo {
height: 160rpx;
display: flex;
align-items: center;
.js-text {
font-size: 40rpx;
font-weight: 500;
color: #000000;
margin-left: 10rpx;
}
image {
width: 160rpx;
height: 160rpx;
}
}
.download-btn {
width: 250rpx;
height: 80rpx;
background: linear-gradient(359deg, rgba(47, 128, 237, 1) 0%, rgba(86, 204, 242, 1) 100%);
text-align: center;
line-height: 80rpx;
border-radius: 40px;
box-shadow: 0px 1px 4px 0px rgba(47, 128, 237, 0.6);
color: #ffffff;
font-size: 40rpx;
margin: 0;
font-weight: 500;
}
}
</style>
网友评论