From d6c0ba17ad25e3ce88795796639d490ef06f2ab7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=8A=E9=87=8C?= <1227971437@qq.com>
Date: Wed, 21 Apr 2021 20:03:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0H5=E7=9A=84=E6=89=93=E5=BC=80?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 baseapp.config.js |  7 ++++++-
 common/openApp.js | 32 ++++++++++++++++++++++++++++++++
 main.js           |  4 ++--
 template.h5.html  | 26 ++++++++++++--------------
 4 files changed, 52 insertions(+), 17 deletions(-)
 create mode 100644 common/openApp.js

diff --git a/baseapp.config.js b/baseapp.config.js
index d04ae80..77a6f6b 100644
--- a/baseapp.config.js
+++ b/baseapp.config.js
@@ -1,6 +1,11 @@
 module.exports = {
 	"h5":{
-		"url":"https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com" //	前端网页托管的域名
+		"url":"https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com" ,//	前端网页托管的域名
+		"openApp":{
+			"openUrl":'https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.android.qqdownloader&info=6646FD239A6EBA9E2DEE5DFC7E18D867',
+			"appname": 'base-app',
+			"logo": './static/logo.png',
+		}
 	},
 	"mp":{
 		"weixin":{
diff --git a/common/openApp.js b/common/openApp.js
new file mode 100644
index 0000000..4b96728
--- /dev/null
+++ b/common/openApp.js
@@ -0,0 +1,32 @@
+import CONFIG from '../baseapp.config.js';
+
+const CONFIG_OPEN = CONFIG?.h5?.openApp?.openUrl ? CONFIG.h5.openApp : {};
+// 仅H5端添加"打开APP"
+export default function() {
+	// #ifdef H5
+	if (!CONFIG_OPEN.openUrl) return console.warn('请配置app地址');
+
+	let openLogo = CONFIG_OPEN.logo ?
+		`<img src="${CONFIG_OPEN.logo}" style="width: 2rem;height: 2rem;border-radius: 3px;">` : '';
+	let openApp = document.createElement("div");
+	openApp.id = 'openApp';
+	openApp.style =
+		'width: 100%;height: 45px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;box-sizing: border-box;padding: 0 0.5rem;background-color: #FFFFFF;'
+	openApp.innerHTML = `
+		<div style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
+			${openLogo}
+			<div style="padding-left: 0.3rem;font-size: 0.25rem;">${CONFIG_OPEN.appname || ''}</div>
+		</div>
+		<div class="openBtn" style="padding: 5px;font-size: 0.3rem;border-radius: 2px;border: 1px solid #007AFF;color: #007AFF;">下载app</div>
+	`;
+	document.body.insertBefore(openApp, document.body.firstChild);
+	document.body.style = 'height:calc(100% - 45px); margin-top:45px;';
+	openApp.addEventListener('click', e => {
+		var target = e.target || e.srcElement;
+		console.log(target);
+		if (target.className.indexOf('openBtn') >= 0) {
+			window.location.href = CONFIG_OPEN.openUrl;
+		}
+	})
+	//#endif
+}
diff --git a/main.js b/main.js
index 62c414c..7c03a73 100644
--- a/main.js
+++ b/main.js
@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import App from './App'
 import store from './store/index.js';
-
+import openApp from './common/openApp.js';
 import request from './js_sdk/request.js';
 
 Vue.config.productionTip = false
 Vue.prototype.request = request
-
+openApp();
 App.mpType = 'app'
 
 const app = new Vue({
diff --git a/template.h5.html b/template.h5.html
index 49ab5da..75d8322 100644
--- a/template.h5.html
+++ b/template.h5.html
@@ -34,18 +34,18 @@
 		<script>
 			// document.addEventListener('DOMContentLoaded', function() {
 			// 	document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
-			// })
-			
-			// setTimeout(()=>{
-			// 	document.querySelector('#gg').addEventListener('click',e=>{
-			// 		console.log(e);
-			// 		alert(12)
-			// 		window.location.href = "https://m3w.cn/uniapp"
-			// 	})
-			// },1000)
-			
+			// })
 		</script>
-		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
+		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
+		<style type="text/css">
+			#openApp{
+				position: fixed;
+				top: 0;
+				left: 0;
+				right: 0;
+				z-index: 999;
+			}
+		</style>
 	</head>
 	<body>
 		<!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
@@ -54,9 +54,7 @@
 		<noscript>
 			<strong>Please enable JavaScript to continue.</strong>
 		</noscript>
-			<!-- <div id="gg" style="width: 99px;height: 99px;background-color: #007AFF;"
-				>下载app</div> -->
-			<div style="margin-top: 100px;" id="app"></div>
+		<div style="margin-top: 100px;" id="app"></div>
 		<!-- built files will be auto injected -->
 		<script>
 			/*BAIDU_STAT*/
-- 
GitLab