zhuli 3 tygodni temu
rodzic
commit
96181bc977
1 zmienionych plików z 135 dodań i 25 usunięć
  1. 135 25
      HBuilderProjects/shareIndex.html

+ 135 - 25
HBuilderProjects/shareIndex.html

@@ -465,7 +465,10 @@
 			pointer-events: none;
 		}
 
-		.fab-wrap .fab {
+		#fabDock,
+		.fab-dock__slot,
+		#fabDock .fab,
+		.fab-wx-hit {
 			pointer-events: auto;
 		}
 
@@ -479,11 +482,17 @@
 			max-width: 320px;
 			height: 48px;
 			margin: 0 auto;
+			-webkit-tap-highlight-color: transparent;
 		}
 
-		/* 底层按钮图始终可见;微信 JSSDK 成功后由上层开放标签接收点击 */
 		#openApp {
-			pointer-events: auto;
+			position: relative;
+			z-index: 1;
+			touch-action: manipulation;
+		}
+
+		#openApp img {
+			pointer-events: none;
 		}
 
 		.fab-wx-hit {
@@ -494,17 +503,12 @@
 			top: 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;
-		}
-
 		#launch-btn {
 			display: block;
 			width: 100%;
@@ -512,6 +516,24 @@
 			min-height: 48px;
 		}
 
+		#openAppToast {
+			display: none;
+			position: fixed;
+			left: 16px;
+			right: 16px;
+			bottom: calc(72px + var(--safe-bottom));
+			z-index: 10001;
+			padding: 10px 14px;
+			font-size: 13px;
+			line-height: 1.45;
+			color: #fff;
+			text-align: center;
+			background: rgba(0, 0, 0, 0.78);
+			border-radius: 8px;
+			pointer-events: none;
+			word-break: break-all;
+		}
+
 		.fab {
 			display: flex;
 			align-items: center;
@@ -1011,6 +1033,7 @@
 		</section>
 	</div>
 	<pre id="wxDebugBar" style="display:none;position:fixed;left:8px;right:8px;top:8px;z-index:9999;max-height:40vh;overflow:auto;margin:0;padding:8px;font-size:11px;line-height:1.35;background:rgba(0,0,0,.82);color:#0f0;white-space:pre-wrap;word-break:break-all;border-radius:6px;pointer-events:none;"></pre>
+	<div id="openAppToast" role="status" aria-live="polite"></div>
 	<div id="fabDock" class="fab-wrap">
 		<div class="fab-dock__slot">
 			<button type="button" class="fab" id="openApp">
@@ -1037,7 +1060,7 @@
 							}
 						</style>
 						<button class="wx-open-app-btn" aria-label="APP内打开">
-							<img src="images/uBtn.png" alt="APP内打开" />
+							<img src="https://test.ailien.shop/h5/HBuilderProjects/images/uBtn.png" alt="APP内打开" />
 						</button>
 					</script>
 				</wx-open-launch-app>
@@ -1150,16 +1173,30 @@
 			}
 		}
 
+		function showFabToast(msg, ms) {
+			var tip = String(msg || '').trim();
+			if (!tip) return;
+			var el = document.getElementById('openAppToast');
+			if (el) {
+				el.textContent = tip;
+				el.style.display = 'block';
+				if (showFabToast._timer) clearTimeout(showFabToast._timer);
+				showFabToast._timer = setTimeout(function () {
+					el.style.display = 'none';
+				}, ms || 3200);
+			}
+			console.log('[openApp]', tip);
+		}
+
 		function showAppOpenFailTip(msg) {
 			var tip =
 				msg ||
 				'未能打开 App,请确认已安装最新版「U店在哪」;微信内请使用页面底部按钮打开。';
+			showFabToast(tip, 4000);
 			if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {
 				uni.showToast({ title: tip, icon: 'none', duration: 2800 });
-			} else if (isWeChatInAppBrowser()) {
+			} else if (isWeChatInAppBrowser() && isWxDebugOn()) {
 				window.alert(tip);
-			} else {
-				console.warn('[openApp]', tip);
 			}
 		}
 
@@ -1481,6 +1518,8 @@
 						} catch (eReady) {}
 					}
 					updateFabOpenLayer();
+					setTimeout(updateFabOpenLayer, 300);
+					setTimeout(updateFabOpenLayer, 1000);
 					resolve(true);
 				});
 				wx.error(function (err) {
@@ -1530,14 +1569,49 @@
 			});
 		}
 
+		function isWxOpenLaunchTagReady() {
+			var tag = document.getElementById('launch-btn');
+			if (!tag) return false;
+			if ((tag.offsetHeight || 0) >= 40 && (tag.offsetWidth || 0) >= 100) return true;
+			try {
+				if (tag.shadowRoot) {
+					var inner = tag.shadowRoot.querySelector('button');
+					if (inner && (inner.offsetHeight || 0) >= 40) return true;
+				}
+			} catch (eSh) {}
+			return false;
+		}
+
+		function tryTriggerWxOpenLaunchApp() {
+			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 (eWx) {
+				console.warn('[wx-open-launch-app] trigger', eWx);
+			}
+			return false;
+		}
+
 		/**
-		 * 微信内:wx.config 成功后开放标签盖住按钮图,用户必须点到开放标签才能唤起 App。
-		 * 失败时退回 #openApp + scheme。
+		 * 仅当开放标签在真机已渲染出可点区域时,才用透明层盖住 #openApp;
+		 * 否则保持 #openApp 可点,避免「点了没反应」
 		 */
 		function updateFabOpenLayer() {
 			var dock = document.getElementById('fabDock');
 			var hit = document.getElementById('fabWxHit');
-			var useWx = isWeChatInAppBrowser() && weChatJssdkConfigured;
+			var useWx =
+				isWeChatInAppBrowser() && weChatJssdkConfigured && isWxOpenLaunchTagReady();
 			if (dock) {
 				if (useWx) dock.classList.add('wx-open-enabled');
 				else dock.classList.remove('wx-open-enabled');
@@ -1545,6 +1619,36 @@
 			if (hit) hit.setAttribute('aria-hidden', useWx ? 'false' : 'true');
 		}
 
+		var openAppFabClickLock = 0;
+		function handleOpenAppFabClick() {
+			var now = Date.now();
+			if (now - openAppFabClickLock < 500) return;
+			openAppFabClickLock = now;
+			tryOpenHBuilderApp();
+		}
+
+		function bindOpenAppFabClick() {
+			var slot = document.querySelector('.fab-dock__slot');
+			var btn = document.getElementById('openApp');
+			function onFabActivate(e) {
+				if (e && e.cancelable) e.preventDefault();
+				handleOpenAppFabClick();
+			}
+			if (btn) {
+				btn.addEventListener('click', onFabActivate);
+			}
+			if (slot) {
+				slot.addEventListener(
+					'touchend',
+					function (e) {
+						if (e.cancelable) e.preventDefault();
+						onFabActivate(e);
+					},
+					false
+				);
+			}
+		}
+
 		function bindWeChatLaunchTagEvents() {
 			var tag = document.getElementById('launch-btn');
 			if (!tag) return;
@@ -1672,17 +1776,24 @@
 		 */
 		function tryOpenHBuilderApp() {
 			var inWx = isWeChatInAppBrowser();
-			/** 微信内 JSSDK 已就绪:点击由开放标签处理,勿再走 scheme */
-			if (inWx && weChatJssdkConfigured) {
-				return;
-			}
+			showFabToast('正在尝试打开 U店在哪…');
+
 			if (inWx && !weChatJssdkConfigured) {
 				showAppOpenFailTip(
-					'微信内暂无法唤起 App:请先关注测试号并确保 JSSDK 配置成功(wx.config)。配置成功后底部按钮将自动切换为开放标签唤起。'
+					'微信 JSSDK 未就绪:请先关注测试号并确保 wx.config 成功。链接可加 wxDebug=1 查看 config 报错。'
 				);
+				launchAppDeepLink(buildAppDeepLink());
 				return;
 			}
 
+			if (inWx && weChatJssdkConfigured) {
+				if (isWxOpenLaunchTagReady()) {
+					tryTriggerWxOpenLaunchApp();
+				} else {
+					showFabToast('开放标签未加载,正在尝试深链唤起…');
+				}
+			}
+
 			var deepLink = buildAppDeepLink();
 
 			if (typeof plus !== 'undefined' && plus.runtime) {
@@ -2897,12 +3008,11 @@
 			run();
 			bindMarketingMore();
 			bindStaffSection();
-			var openBtn = document.getElementById('openApp');
-			if (openBtn) {
-				openBtn.addEventListener('click', function () {
-					tryOpenHBuilderApp();
-				});
+			var launchTag = document.getElementById('launch-btn');
+			if (launchTag && WECHAT_OPEN_APP_ID) {
+				launchTag.setAttribute('appid', WECHAT_OPEN_APP_ID);
 			}
+			bindOpenAppFabClick();
 			updateFabOpenLayer();
 			if (isWxDebugOn()) {
 				reportWxDebug('page load', { errMsg: 'wxDebug=1 已开启' }, [