siyu_app/components/h5-down-app-tip/h5-down-app-popup.vue

<template>
	<uni-popup ref="downappPop" type="center" is-mask-click="false">
		  <view class="downappPop">
				<uni-icons class="closebtn" type="closeempty" size="27" color="#bbb" @click="$refs.downappPop.close()"></uni-icons>
				<image src="/static/logo.png" class="es-w-100 es-h-100"></image>
				<view>请下载App观看</view>
				<view v-if="!isWechat" class="es-br-20 es-w-250 es-bc es es-pc es-ac es-fw-bold es-fs-30" style="min-height: 80rpx;border-radius: 10rpx;" @tap="openApp('btn')">
					<view class="es-ml-30 es-mr-30">App内打开</view>
				</view>
				<template v-if="isWechat">
					<!-- 此处的APPID为移动应用APPID -->
					<wx-open-launch-app appid="wx703c4bd07bbd1695" :extinfo="extinfo" @launch="AppLaunch" @error="AppError">
						<component :is="'script'" type="text/wxtag-template">
							<button id="footer-btn" class="es-br-20 es-w-250 es-bc es es-pc es-ac es-fw-bold es-fs-30 es-ml-30 es-mr-30" style="min-height: 80rpx;border-radius: 10rpx;">
								App内打开
							</button>
					  	</component>
					</wx-open-launch-app>
				</template>
		  </view>
	</uni-popup>
</template>

<script>
	import * as wx from 'weixin-js-sdk'
	import {getWxConfig} from "@/api/common.js";
	export default {
		props: ['pageUrl','type','courseId'],
		data() {
			return {
				timer: null,
				isWechat: false,
				// 跳转所需额外信息
				extinfo: "rtlive://livingApp",
			}
		},
		created() {
			this.isWechat = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger"
			this.initWXConfig()
		},
		methods: {
			openPop() {
				this.$refs.downappPop.open()
			},
			initWXConfig(packageVal) {
				if(this.isWechat) {
					let url = window.location.href.split('#')[0]
					let param ={
						url: encodeURIComponent(url)
					}
					uni.showLoading({
						  title: '加载中'
					});
					getWxConfig(param).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							wx.config({
								debug: false,
								appId: res.data.appId,
								timestamp: res.data.timestamp,
								nonceStr: res.data.nonceStr,
								signature: res.data.signature,
								jsApiList: ['requestMerchantTransfer','updateAppMessageShareData'],
								openTagList: ['wx-open-launch-app']
							});
							wx.error(function(error){
							  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}).catch(err=>{
						uni.hideLoading();
					})
				} else {
					// 非微信浏览器
					this.openApp()
				}
			},
			AppLaunch(e){
				console.log("success",e)
			},
			AppError(e){
				if(e.detail.errMsg == "launch:fail"){
					window.location.href = uni.getStorageSync('h5Path') + "/pages/index/appDownload";
				} else {
					uni.showToast({
						title: e.detail.errMsg,
						icon: 'error'
					})
				}
			},
			// 判断浏览器是否为头部APP（判断是否为微信或则其它APP浏览器，如果是则引导外置浏览器打开）
			isBlackApp() {
			  var u = navigator.userAgent.toLowerCase();
			  return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
			},
			openApp(type){
				if(type == 'btn') {
					// 打开app，打不开跳转下载页
					const isOpenMode = this.isOpenMode()
					if(isOpenMode == 1 ||isOpenMode == 4) {
						if (this.isBlackApp() ) {
						   // 头部APP让网页显示提示在浏览器中打开
							uni.showToast({
								title: '复制页面链接在浏览器中打开',
								icon: 'none'
							})
						 } else {
						   // 不是头部APP就直接打开
							const pagesUrl = encodeURIComponent(this.pageUrl)
							let schemeUrl = ''
							schemeUrl = "rtlive://livingApp";
							// if(this.type == 'course') {
							// 	schemeUrl = "rtlive://course?courseId="+this.courseId;
							// }else {
							// 	// window.location.href="rtlive://pagesApp?pagesUrl="+pagesUrl;
							// 	schemeUrl = "rtlive://pagesApp?pagesUrl="+pagesUrl;
							// }
							this.jumpApp(schemeUrl);
							this.noApp();
						 }
					}
				} else {
					// 直接打开，打不开不跳转
					const isOpenMode = this.isOpenMode()
					if(isOpenMode == 4) {
						const pagesUrl = encodeURIComponent(this.pageUrl)
						let schemeUrl = ''
						if(this.type == 'course') {
							schemeUrl = "rtlive://course?courseId="+this.courseId;
						}else {
							// window.location.href="rtlive://pagesApp?pagesUrl="+pagesUrl;
							schemeUrl = "rtlive://pagesApp?pagesUrl="+pagesUrl;
						}
						this.jumpApp(schemeUrl);
					}
				}
			},
			// 跳转打开app
			jumpApp(t) {
				console.log(t, "===========》jumpApp");
				try {
					var e = navigator.userAgent.toLowerCase(),
						n = e.match(/cpu iphone os (.*?) like mac os/);
					if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {         		
					    //ios8之后的版本
						window.location.href = t;
					} else { //注意iOS8之前是可以使用iframe来实现的
						var r = document.createElement("iframe");
						(r.src = t), (r.style.display = "none"), document.body.appendChild(r);
					}
				} catch (e) {
					window.location.href = t;
				}
			},
			// 无响应或者没安装跳转下载
			noApp() {
				console.log("===========》noApp");
				var t = Date.now(),
					r = uni.getStorageSync('h5Path') + "/pages/index/appDownload";
				this.timer = setTimeout(()=> {
					return Date.now() - t > 3200 ?
						(clearTimeout(this.timer), !1) :
						!document.webkitHidden &&
						!document.hidden &&
						void(location.href = r);
				}, 3000);
			},
			isOpenMode() {
				//平台、设备和操作系统
				var system = {
					win: false,
					mac: false,
					xll: false,
					ipad: false
				};
				//检测平台
				var p = navigator.platform;
				system.win = p.indexOf("Win") == 0;
				system.mac = p.indexOf("Mac") == 0;
				system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
				system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
				//跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面
				if (system.win || system.mac || system.xll || system.ipad) {
					var ua = navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == "micromessenger") {
						// alert("在PC端微信上打开的");
						return 2;
					} else {
						// alert("在PC端非微信上打开的");
						return 3;
					}
				} else {
					var ua = navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == "micromessenger") {
						// alert("在手机端微信上打开的");
						return 1;
					} else {
						// alert("在手机上非微信上打开的");
						return 4;
					}
				}
			}
		}
	}
</script>

<style scoped>
	.downappPop {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		width: 80vw;
		height: 400rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		text-align: center;
		position: relative;
	}
	.closebtn {
		position: absolute;
		top: 14rpx;
		right: 14rpx;
	}
</style>