eccentric

HBuilderProjects/shareIndex.html

@@ -465,20 +465,30 @@
 			pointer-events: none;
 		}
 
-		.fab-wrap .fab {
+		.fab-slot {
+			position: relative;
+			width: 100%;
+			max-width: 320px;
+			margin: 0 auto;
+			height: 48px;
+			flex-shrink: 0;
+		}
+
+		.fab-slot .fab {
 			pointer-events: auto;
+			width: 100%;
+			max-width: none;
+			margin: 0;
 		}
 
 		.fab-wx-launch-host {
 			display: none;
 			position: absolute;
-			left: 24px;
-			right: 24px;
-			top: 12px;
-			height: 48px;
-			z-index: 3;
-			max-width: 320px;
-			margin: 0 auto;
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 5;
 			pointer-events: none;
 		}
 
@@ -490,11 +500,14 @@
 		.fab-wx-launch-host wx-open-launch-app {
 			display: block;
 			width: 100%;
-			height: 48px;
+			height: 100%;
 		}
 
 		.fab.fab--wx-pending {
 			opacity: 0.65;
+		}
+
+		.fab-slot--wx-ready .fab {
 			pointer-events: none;
 		}
 
@@ -998,10 +1011,12 @@
 	</div>
 	<div id="shareBelowContentEl">
 		<div class="fab-wrap">
-			<div class="fab-wx-launch-host" id="openAppWxLaunchHost" aria-hidden="true"></div>
-			<button type="button" class="fab" id="openApp">
-				<img src="images/uBtn.png" alt="APP内打开" decoding="async">
-			</button>
+			<div class="fab-slot" id="openAppFabSlot">
+				<div class="fab-wx-launch-host" id="openAppWxLaunchHost" aria-hidden="true"></div>
+				<button type="button" class="fab" id="openApp">
+					<img src="images/uBtn.png" alt="APP内打开" decoding="async">
+				</button>
+			</div>
 			<div class="home-indicator" aria-hidden="true"></div>
 		</div>
 	</div>
@@ -1182,6 +1197,30 @@
 			return String(location.href || '').split('#')[0];
 		}
 
+		function getPageAssetUrl(rel) {
+			try {
+				return new URL(rel, location.href).href;
+			} catch (e) {
+				return rel;
+			}
+		}
+
+		function tryClickWxLaunchButton() {
+			var host = document.getElementById('openAppWxLaunchHost');
+			if (!host) return false;
+			var inner = host.querySelector('.wx-fab-inner');
+			var tag = host.querySelector('wx-open-launch-app');
+			if (inner && typeof inner.click === 'function') {
+				inner.click();
+				return true;
+			}
+			if (tag && typeof tag.click === 'function') {
+				tag.click();
+				return true;
+			}
+			return false;
+		}
+
 		function loadWxJssdk() {
 			if (typeof wx !== 'undefined' && typeof wx.config === 'function') {
 				return Promise.resolve();
@@ -1287,9 +1326,7 @@
 		}
 
 		function buildAppExtInfo() {
-			var path = getAppUniPathForBusinessSection().replace(/^\//, '');
-			var qs = buildAppOpenQueryString();
-			return path + (qs || '');
+			return buildAppDeepLink();
 		}
 
 		function escapeHtmlAttr(s) {
@@ -1303,12 +1340,17 @@
 			if (!launchAppId) return false;
 			var host = document.getElementById('openAppWxLaunchHost');
 			var btn = document.getElementById('openApp');
+			var slot = document.getElementById('openAppFabSlot');
 			if (!host || !btn) return false;
-			if (wxLaunchMounted && host.querySelector('wx-open-launch-app')) return true;
+			if (wxLaunchMounted && host.querySelector('wx-open-launch-app')) {
+				if (!wxTagReady) notifyWxTagReady();
+				return true;
+			}
 
 			wxTagReady = false;
 			var extinfo = escapeHtmlAttr(buildAppExtInfo());
 			var appid = escapeHtmlAttr(launchAppId);
+			var imgUrl = escapeHtmlAttr(getPageAssetUrl('images/uBtn.png'));
 			host.innerHTML =
 				'<wx-open-launch-app id="wxOpenLaunchApp" appid="' +
 				appid +
@@ -1318,13 +1360,16 @@
 				'<script type="text/wxtag-template">' +
 				'<style>.wx-fab-inner{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border:0;padding:0;margin:0;background:transparent;}</style>' +
 				'<button type="button" class="wx-fab-inner" aria-label="APP内打开">' +
-				'<img src="images/uBtn.png" alt="" style="height:48px;width:auto;max-width:100%;display:block;">' +
+				'<img src="' +
+				imgUrl +
+				'" alt="" style="height:48px;width:auto;max-width:100%;display:block;">' +
 				'</button>' +
 				'<\/script></wx-open-launch-app>';
 
 			var tag = host.querySelector('wx-open-launch-app');
 			if (tag) {
 				tag.addEventListener('ready', function () {
+					console.log('[wx-open-launch-app] ready');
 					notifyWxTagReady();
 				});
 				tag.addEventListener('launch', function () {
@@ -1343,15 +1388,12 @@
 
 			host.classList.add('fab-wx-launch-host--active');
 			host.setAttribute('aria-hidden', 'false');
-			btn.setAttribute('aria-hidden', 'true');
-			btn.classList.add('fab--wx-pending');
-			btn.style.visibility = 'hidden';
-			btn.style.pointerEvents = 'none';
+			if (slot) slot.classList.add('fab-slot--wx-ready');
+			btn.classList.remove('fab--wx-pending');
 			wxLaunchMounted = true;
-			/* 部分机型 ready 事件不稳定，超时后仍允许点击 */
 			window.setTimeout(function () {
 				if (!wxTagReady) notifyWxTagReady();
-			}, 1500);
+			}, 1200);
 			return true;
 		}
 
@@ -1400,32 +1442,48 @@
 			return wxPreparePromise;
 		}
 
-		function openAppViaWeChat() {
+		function showWeChatLaunchError(e) {
+			console.warn('[微信唤起App]', e, {
+				signUrl: getWxSignPageUrl(),
+				wxConfigReady: wxConfigReady,
+				wxLaunchMounted: wxLaunchMounted,
+				wxTagReady: wxTagReady
+			});
+			var msg = '暂时无法打开 App';
+			if (e && e.message) {
+				if (/HTTP 404/i.test(e.message)) {
+					msg = '微信配置接口 404，请确认接口为 /alienStore/wx/getWxConfig';
+				} else if (/缺少移动应用/i.test(e.message)) {
+					msg = '缺少移动应用 AppId，请配置 WX_LAUNCH_APP_ID';
+				} else if (/getWxConfig 返回无效/i.test(e.message)) {
+					msg = 'getWxConfig 数据无效，请查看控制台 [getWxConfig]';
+				} else if (/wx\.config|签名/i.test(e.message)) {
+					msg = '微信签名失败：页面域名须与 JS 安全域名一致（' + getWxSignPageUrl() + '）';
+				} else if (/挂载失败|初始化超时/i.test(e.message)) {
+					msg = '开放标签未就绪，请刷新页面后重试';
+				}
+			}
+			showWxLaunchTip(msg);
+		}
+
+		/** 微信内点击「APP内打开」：就绪则触发开放标签，否则先 prepare 再触发 */
+		function onWeChatOpenAppClick() {
 			if (wxLaunchMounted && wxConfigReady && wxTagReady) {
+				tryClickWxLaunchButton();
 				return;
 			}
-			prepareWeChatAppLaunch(false)
-				.catch(function (e) {
-					console.warn('[微信唤起App]', e, {
-						signUrl: getWxSignPageUrl(),
-						wxConfigReady: wxConfigReady,
-						wxLaunchMounted: wxLaunchMounted
-					});
-					var msg = '暂时无法打开 App';
-					if (e && e.message) {
-						if (/HTTP 404/i.test(e.message)) {
-							msg = '微信配置接口 404，请确认接口为 /alienStore/wx/getWxConfig';
-						} else if (/缺少移动应用/i.test(e.message)) {
-							msg = '缺少移动应用 AppId，请配置 WX_LAUNCH_APP_ID';
-						} else if (/getWxConfig 返回无效/i.test(e.message)) {
-							msg = 'getWxConfig 数据无效，请查看控制台 [getWxConfig]';
-						} else if (/wx\.config|签名/i.test(e.message)) {
-							msg = '微信签名失败：页面域名须与 JS 安全域名一致（' + getWxSignPageUrl() + '）';
-						} else if (/挂载失败/i.test(e.message)) {
-							msg = '开放标签挂载失败，请用微信打开并重试';
-						}
+			setOpenAppWeChatPending(true);
+			var chain = wxPreparePromise || prepareWeChatAppLaunch(false);
+			chain
+				.then(function () {
+					setOpenAppWeChatPending(false);
+					if (wxTagReady) {
+						tryClickWxLaunchButton();
 					}
-					showWxLaunchTip(msg);
+				})
+				.catch(function (e) {
+					setOpenAppWeChatPending(false);
+					showWeChatLaunchError(e);
 				});
 		}
 
@@ -1498,7 +1556,7 @@
 		 */
 		function tryOpenHBuilderApp() {
 			if (isWeChatInAppBrowser()) {
-				openAppViaWeChat();
+				onWeChatOpenAppClick();
 				return;
 			}
 
@@ -2710,33 +2768,51 @@
 			});
 		}
 
+		function initWeChatAppLaunchEarly() {
+			if (!isWeChatInAppBrowser()) return;
+			prepareWeChatAppLaunch(false).catch(function (e) {
+				console.warn('[微信预加载 getWxConfig]', e);
+				setOpenAppWeChatPending(false);
+			});
+		}
+
 		function boot() {
 			run();
 			bindMarketingMore();
 			bindStaffSection();
-			if (isWeChatInAppBrowser()) {
-				prepareWeChatAppLaunch(false).catch(function (e) {
-					console.warn('[微信预加载 getWxConfig]', e);
-					setOpenAppWeChatPending(false);
-				});
-			}
 			var openBtn = document.getElementById('openApp');
-			if (openBtn) {
-				openBtn.addEventListener('click', function () {
-					if (isWeChatInAppBrowser()) {
-						if (wxLaunchMounted && wxConfigReady && wxTagReady) {
-							return;
-						}
-						if (wxPreparePromise) {
-							wxPreparePromise.catch(function () {});
-							showWxLaunchTip('正在准备打开 App，请稍候再点');
-							return;
-						}
-						openAppViaWeChat();
+			var wxHost = document.getElementById('openAppWxLaunchHost');
+			function handleOpenAppClick(e) {
+				if (isWeChatInAppBrowser()) {
+					if (
+						wxLaunchMounted &&
+						wxConfigReady &&
+						wxTagReady &&
+						e &&
+						e.target &&
+						wxHost &&
+						wxHost.contains(e.target)
+					) {
 						return;
 					}
-					tryOpenHBuilderApp();
-				});
+					onWeChatOpenAppClick();
+					return;
+				}
+				tryOpenHBuilderApp();
+			}
+			if (openBtn) {
+				openBtn.addEventListener('click', handleOpenAppClick);
+			}
+			if (wxHost) {
+				wxHost.addEventListener('click', handleOpenAppClick);
+			}
+		}
+
+		if (isWeChatInAppBrowser()) {
+			if (document.readyState === 'loading') {
+				document.addEventListener('DOMContentLoaded', initWeChatAppLaunchEarly);
+			} else {
+				initWeChatAppLaunchEarly();
 			}
 		}