zhuli il y a 3 semaines
Parent
commit
94fdba7109
1 fichiers modifiés avec 86 ajouts et 56 suppressions
  1. 86 56
      HBuilderProjects/shareIndex.html

+ 86 - 56
HBuilderProjects/shareIndex.html

@@ -469,32 +469,47 @@
 			pointer-events: auto;
 		}
 
-		/* 底部按钮始终展示,不因 wx.config 切换而隐藏 */
 		#fabDock {
 			display: block;
 		}
 
-		#fabDock .fab {
+		.fab-dock__slot {
+			position: relative;
+			width: 100%;
+			max-width: 320px;
+			height: 48px;
+			margin: 0 auto;
+		}
+
+		/* 底层按钮图始终可见;微信 JSSDK 成功后由上层开放标签接收点击 */
+		#openApp {
 			pointer-events: auto;
 		}
 
-		/* 开放标签仅满足 openTagList,不占位、不遮挡可见按钮 */
-		#fabWxHost {
-			position: fixed;
-			left: -9999px;
+		.fab-wx-hit {
+			display: none;
+			position: absolute;
+			left: 0;
+			right: 0;
 			top: 0;
-			width: 1px;
-			height: 1px;
-			overflow: hidden;
-			opacity: 0;
+			height: 48px;
+			z-index: 3;
+			pointer-events: auto;
+		}
+
+		#fabDock.wx-open-enabled .fab-wx-hit {
+			display: block;
+		}
+
+		#fabDock.wx-open-enabled #openApp {
 			pointer-events: none;
-			visibility: hidden;
 		}
 
 		#launch-btn {
 			display: block;
-			width: 1px;
-			height: 1px;
+			width: 100%;
+			height: 48px;
+			min-height: 48px;
 		}
 
 		.fab {
@@ -996,25 +1011,36 @@
 		</section>
 	</div>
 	<div id="fabDock" class="fab-wrap">
-		<button type="button" class="fab" id="openApp">
-			<img src="images/uBtn.png" alt="APP内打开" decoding="async">
-		</button>
-		<div id="fabWxHost" aria-hidden="true">
-			<wx-open-launch-app id="launch-btn" appid="wx5598889b28511717">
-				<script type="text/wxtag-template">
-					<style>
-						.wx-open-hit {
-							display: block;
-							width: 1px;
-							height: 1px;
-							opacity: 0;
-							border: 0;
-							padding: 0;
-						}
-					</style>
-					<button class="wx-open-hit" aria-label="APP内打开">打开</button>
-				</script>
-			</wx-open-launch-app>
+		<div class="fab-dock__slot">
+			<button type="button" class="fab" id="openApp">
+				<img src="images/uBtn.png" alt="APP内打开" decoding="async">
+			</button>
+			<div id="fabWxHit" class="fab-wx-hit" aria-hidden="true">
+				<wx-open-launch-app id="launch-btn" appid="wx5598889b28511717">
+					<script type="text/wxtag-template">
+						<style>
+							.wx-open-app-btn {
+								display: block;
+								width: 100%;
+								height: 48px;
+								margin: 0;
+								padding: 0;
+								border: none;
+								background: transparent;
+							}
+							.wx-open-app-btn img {
+								display: block;
+								width: 100%;
+								height: 48px;
+								object-fit: contain;
+							}
+						</style>
+						<button class="wx-open-app-btn" aria-label="APP内打开">
+							<img src="images/uBtn.png" alt="APP内打开" />
+						</button>
+					</script>
+				</wx-open-launch-app>
+			</div>
 		</div>
 		<div class="home-indicator" aria-hidden="true"></div>
 	</div>
@@ -1393,6 +1419,7 @@
 							tag.setAttribute('extinfo', buildWeChatLaunchExtinfo());
 						} catch (eReady) {}
 					}
+					updateFabOpenLayer();
 					resolve(true);
 				});
 				wx.error(function (err) {
@@ -1407,6 +1434,7 @@
 						urlForWx === baseUrl
 					) {
 						weChatJssdkConfigured = false;
+						updateFabOpenLayer();
 						showAppOpenFailTip(formatWxConfigErrorTip(err, urlForWx));
 						resolve(false);
 						return;
@@ -1418,6 +1446,7 @@
 						.then(function (sign2) {
 							if (!sign2) {
 								weChatJssdkConfigured = false;
+								updateFabOpenLayer();
 								showAppOpenFailTip(formatWxConfigErrorTip(err, urlForWx));
 								resolve(false);
 								return;
@@ -1426,6 +1455,7 @@
 						})
 						.catch(function () {
 							weChatJssdkConfigured = false;
+							updateFabOpenLayer();
 							showAppOpenFailTip(formatWxConfigErrorTip(err, urlForWx));
 							resolve(false);
 						});
@@ -1433,27 +1463,19 @@
 			});
 		}
 
-		/** 点击可见按钮时,若 JSSDK 已就绪则先尝试触发隐藏开放标签(部分机型有效) */
-		function tryTriggerWxOpenLaunchApp() {
-			if (!isWeChatInAppBrowser() || !weChatJssdkConfigured) return false;
-			var tag = document.getElementById('launch-btn');
-			if (!tag) return false;
-			try {
-				if (tag.shadowRoot) {
-					var inner = tag.shadowRoot.querySelector('button');
-					if (inner && typeof inner.click === 'function') {
-						inner.click();
-						return true;
-					}
-				}
-				if (typeof tag.click === 'function') {
-					tag.click();
-					return true;
-				}
-			} catch (eWxClick) {
-				console.warn('[wx-open-launch-app] trigger click', eWxClick);
+		/**
+		 * 微信内:wx.config 成功后开放标签盖住按钮图,用户必须点到开放标签才能唤起 App。
+		 * 失败时退回 #openApp + scheme。
+		 */
+		function updateFabOpenLayer() {
+			var dock = document.getElementById('fabDock');
+			var hit = document.getElementById('fabWxHit');
+			var useWx = isWeChatInAppBrowser() && weChatJssdkConfigured;
+			if (dock) {
+				if (useWx) dock.classList.add('wx-open-enabled');
+				else dock.classList.remove('wx-open-enabled');
 			}
-			return false;
+			if (hit) hit.setAttribute('aria-hidden', useWx ? 'false' : 'true');
 		}
 
 		function bindWeChatLaunchTagEvents() {
@@ -1469,6 +1491,7 @@
 				var detail = e && e.detail;
 				console.warn('[wx-open-launch-app]', detail);
 				weChatJssdkConfigured = false;
+				updateFabOpenLayer();
 				var errMsg =
 					detail && detail.errMsg
 						? String(detail.errMsg)
@@ -1569,12 +1592,19 @@
 		 * 系统浏览器:scheme 唤起;微信内优先 wx-open-launch-app,失败再 scheme(不再弹「在浏览器中打开」)。
 		 */
 		function tryOpenHBuilderApp() {
-			if (isWeChatInAppBrowser()) {
-				tryTriggerWxOpenLaunchApp();
+			var inWx = isWeChatInAppBrowser();
+			/** 微信内 JSSDK 已就绪:点击由开放标签处理,勿再走 scheme */
+			if (inWx && weChatJssdkConfigured) {
+				return;
+			}
+			if (inWx && !weChatJssdkConfigured) {
+				showAppOpenFailTip(
+					'微信内暂无法唤起 App:请先关注测试号并确保 JSSDK 配置成功(wx.config)。配置成功后底部按钮将自动切换为开放标签唤起。'
+				);
+				return;
 			}
 
 			var deepLink = buildAppDeepLink();
-			var inWx = isWeChatInAppBrowser();
 
 			if (typeof plus !== 'undefined' && plus.runtime) {
 				var installed = null;
@@ -2794,7 +2824,7 @@
 					tryOpenHBuilderApp();
 				});
 			}
-			/* 底部 #fabDock / #openApp 不做 display 切换,进入页即显示 */
+			updateFabOpenLayer();
 			initWeChatOpenLaunchApp();
 		}