添加H5的打开按钮

d6c0ba17 · 芊里 · 276bef28 · d6c0ba17 · d6c0ba17 · d6c0ba17
隐藏空白更改
内联并排

Showing with 52 addition and 17 deletion

baseapp.config.js baseapp.config.js +6 -1

common/openApp.js common/openApp.js +32 -0

main.js main.js +2 -2

template.h5.html template.h5.html +12 -14

未找到文件。
--- a/baseapp.config.js
+++ b/baseapp.config.js
 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":{

--- a/common/openApp.js
+++ b/common/openApp.js
+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
+}
--- a/main.js
+++ b/main.js
 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({

--- 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*/