整理文档并接入 H5 体验测试链路

miniprogram/pages/experience-webview/experience-webview.js

@@ -0,0 +1,127 @@
+let currentRequest = null
+let currentEventChannel = null
+let pageResolved = false
+
+function appendQueryParam(url, key, value) {
+  const separator = url.indexOf('?') >= 0 ? '&' : '?'
+  return `${url}${separator}${key}=${encodeURIComponent(value)}`
+}
+
+function buildWebViewSrc(request) {
+  let nextUrl = request.url
+  nextUrl = appendQueryParam(nextUrl, 'cmrBridge', request.bridgeVersion)
+  nextUrl = appendQueryParam(nextUrl, 'cmrKind', request.kind)
+  return nextUrl
+}
+
+function emitFallbackAndClose() {
+  if (!currentRequest || !currentEventChannel) {
+    return
+  }
+  if (!pageResolved) {
+    pageResolved = true
+    currentEventChannel.emit('fallback', currentRequest.fallback)
+  }
+  wx.navigateBack({
+    fail() {},
+  })
+}
+
+function emitCloseAndBack(payload) {
+  if (currentEventChannel && !pageResolved) {
+    pageResolved = true
+    currentEventChannel.emit('close', payload || {})
+  }
+  wx.navigateBack({
+    fail() {},
+  })
+}
+
+Page({
+  data: {
+    webViewSrc: '',
+    webViewReady: false,
+    loadErrorText: '',
+  },
+
+  onLoad() {
+    pageResolved = false
+    currentRequest = null
+    currentEventChannel = null
+    this.setData({
+      webViewSrc: '',
+      webViewReady: false,
+      loadErrorText: '',
+    })
+
+    try {
+      currentEventChannel = this.getOpenerEventChannel()
+    } catch (error) {
+      currentEventChannel = null
+    }
+
+    if (!currentEventChannel) {
+      return
+    }
+
+    currentEventChannel.on('init', (request) => {
+      currentRequest = request
+      wx.setNavigationBarTitle({
+        title: request.title || '内容体验',
+        fail() {},
+      })
+      this.setData({
+        webViewSrc: buildWebViewSrc(request),
+        webViewReady: true,
+        loadErrorText: '',
+      })
+    })
+  },
+
+  onUnload() {
+    if (currentEventChannel && !pageResolved) {
+      currentEventChannel.emit('close', {})
+    }
+    pageResolved = false
+    currentRequest = null
+    currentEventChannel = null
+  },
+
+  handleWebViewMessage(event) {
+    const dataList = event.detail && Array.isArray(event.detail.data)
+      ? event.detail.data
+      : []
+    const rawMessage = dataList.length ? dataList[dataList.length - 1] : null
+    if (!rawMessage || typeof rawMessage !== 'object') {
+      return
+    }
+
+    const action = rawMessage.action || rawMessage.type || ''
+    if (!action) {
+      return
+    }
+
+    if (action === 'close') {
+      emitCloseAndBack(rawMessage.payload)
+      return
+    }
+
+    if (action === 'submitResult') {
+      if (currentEventChannel) {
+        currentEventChannel.emit('submitResult', rawMessage.payload || {})
+      }
+      return
+    }
+
+    if (action === 'fallback') {
+      emitFallbackAndClose()
+    }
+  },
+
+  handleWebViewError() {
+    this.setData({
+      loadErrorText: '页面打开失败，已回退原生内容',
+    })
+    emitFallbackAndClose()
+  },
+})

miniprogram/pages/experience-webview/experience-webview.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "内容体验"
+}

miniprogram/pages/experience-webview/experience-webview.ts

@@ -0,0 +1,136 @@
+import { type H5BridgeMessage, type H5ExperienceRequest } from '../../game/experience/h5Experience'
+
+type ExperienceWebViewPageData = {
+  webViewSrc: string
+  webViewReady: boolean
+  loadErrorText: string
+}
+
+let currentRequest: H5ExperienceRequest | null = null
+let currentEventChannel: WechatMiniprogram.EventChannel | null = null
+let pageResolved = false
+
+function appendQueryParam(url: string, key: string, value: string): string {
+  const separator = url.indexOf('?') >= 0 ? '&' : '?'
+  return `${url}${separator}${key}=${encodeURIComponent(value)}`
+}
+
+function buildWebViewSrc(request: H5ExperienceRequest): string {
+  let nextUrl = request.url
+  nextUrl = appendQueryParam(nextUrl, 'cmrBridge', request.bridgeVersion)
+  nextUrl = appendQueryParam(nextUrl, 'cmrKind', request.kind)
+  return nextUrl
+}
+
+function emitFallbackAndClose() {
+  if (!currentRequest || !currentEventChannel) {
+    return
+  }
+  if (!pageResolved) {
+    pageResolved = true
+    currentEventChannel.emit('fallback', currentRequest.fallback)
+  }
+  wx.navigateBack({
+    fail: () => {},
+  })
+}
+
+function emitCloseAndBack(payload?: Record<string, unknown>) {
+  if (currentEventChannel && !pageResolved) {
+    pageResolved = true
+    currentEventChannel.emit('close', payload || {})
+  }
+  wx.navigateBack({
+    fail: () => {},
+  })
+}
+
+Page<ExperienceWebViewPageData, WechatMiniprogram.IAnyObject>({
+  data: {
+    webViewSrc: '',
+    webViewReady: false,
+    loadErrorText: '',
+  },
+
+  onLoad() {
+    pageResolved = false
+    currentRequest = null
+    currentEventChannel = null
+    this.setData({
+      webViewSrc: '',
+      webViewReady: false,
+      loadErrorText: '',
+    })
+
+    try {
+      currentEventChannel = this.getOpenerEventChannel()
+    } catch {
+      currentEventChannel = null
+    }
+
+    if (!currentEventChannel) {
+      return
+    }
+
+    currentEventChannel.on('init', (request: H5ExperienceRequest) => {
+      currentRequest = request
+      wx.setNavigationBarTitle({
+        title: request.title || '内容体验',
+        fail: () => {},
+      })
+      this.setData({
+        webViewSrc: buildWebViewSrc(request),
+        webViewReady: true,
+        loadErrorText: '',
+      })
+    })
+  },
+
+  onUnload() {
+    if (currentEventChannel && !pageResolved) {
+      currentEventChannel.emit('close', {})
+    }
+    pageResolved = false
+    currentRequest = null
+    currentEventChannel = null
+  },
+
+  handleWebViewMessage(event: WechatMiniprogram.CustomEvent) {
+    const dataList = event.detail && Array.isArray(event.detail.data)
+      ? event.detail.data
+      : []
+    const rawMessage = dataList.length ? dataList[dataList.length - 1] : null
+    if (!rawMessage || typeof rawMessage !== 'object') {
+      return
+    }
+
+    const message = rawMessage as H5BridgeMessage
+    const action = message.action || message.type || ''
+    if (!action) {
+      return
+    }
+
+    if (action === 'close') {
+      emitCloseAndBack(message.payload)
+      return
+    }
+
+    if (action === 'submitResult') {
+      if (currentEventChannel) {
+        currentEventChannel.emit('submitResult', message.payload || {})
+      }
+      return
+    }
+
+    if (action === 'fallback') {
+      emitFallbackAndClose()
+    }
+  },
+
+  handleWebViewError() {
+    this.setData({
+      loadErrorText: '页面打开失败，已回退原生内容',
+    })
+    emitFallbackAndClose()
+  },
+})

miniprogram/pages/experience-webview/experience-webview.wxml

@@ -0,0 +1,11 @@
+<view wx:if="{{!webViewReady}}" class="experience-webview__loading">
+  <view class="experience-webview__loading-title">内容页加载中</view>
+  <view wx:if="{{loadErrorText}}" class="experience-webview__loading-error">{{loadErrorText}}</view>
+</view>
+
+<web-view
+  wx:if="{{webViewReady && webViewSrc}}"
+  src="{{webViewSrc}}"
+  bindmessage="handleWebViewMessage"
+  binderror="handleWebViewError"
+></web-view>

miniprogram/pages/experience-webview/experience-webview.wxss

@@ -0,0 +1,27 @@
+.page {
+  height: 100%;
+}
+page {
+  background: #f5f7f6;
+}
+
+.experience-webview__loading {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48rpx;
+  color: #1f2f26;
+}
+
+.experience-webview__loading-title {
+  font-size: 32rpx;
+  font-weight: 600;
+}
+
+.experience-webview__loading-error {
+  margin-top: 20rpx;
+  font-size: 26rpx;
+  color: #a0523d;
+}

miniprogram/pages/map/map.ts

@@ -8,6 +8,7 @@ import {
 } from '../../engine/map/mapEngine'
 import { loadRemoteMapConfig } from '../../utils/remoteMapConfig'
 import { type AnimationLevel } from '../../utils/animationLevel'
+import { type H5ExperienceFallbackPayload, type H5ExperienceRequest } from '../../game/experience/h5Experience'
 type CompassTickData = {
   angle: number
   long: boolean
@@ -848,8 +849,8 @@ Page({
       mapEngine = null
     }
 
-    mapEngine = new MapEngine(INTERNAL_BUILD_VERSION, {
-      onData: (patch) => {
+      mapEngine = new MapEngine(INTERNAL_BUILD_VERSION, {
+        onData: (patch) => {
         const nextPatch = patch as Partial<MapPageData>
         const includeDebugFields = this.data.showDebugPanel
         const includeRulerFields = this.data.showCenterScaleRuler
@@ -988,11 +989,14 @@ Page({
           })
         }
 
-        if (this.data.showGameInfoPanel) {
-          this.scheduleGameInfoPanelSnapshotSync()
-        }
-      },
-    })
+          if (this.data.showGameInfoPanel) {
+            this.scheduleGameInfoPanelSnapshotSync()
+          }
+        },
+        onOpenH5Experience: (request) => {
+          this.openH5Experience(request)
+        },
+      })
 
     const storedUserSettings = loadStoredUserSettings()
     if (storedUserSettings.animationLevel) {
@@ -1390,6 +1394,12 @@ Page({
     mapEngine.handleConnectMockHeartRateBridge()
   },
 
+  handleOpenWebViewTest() {
+    wx.navigateTo({
+      url: '/pages/webview-test/webview-test',
+    })
+  },
+
   handleMockBridgeUrlInput(event: WechatMiniprogram.Input) {
     this.setData({
       mockBridgeUrlDraft: event.detail.value,
@@ -1887,6 +1897,42 @@ Page({
     }
   },
 
+  handleOpenPendingContentCard() {
+    if (mapEngine) {
+      mapEngine.openPendingContentCard()
+    }
+  },
+
+  openH5Experience(request: H5ExperienceRequest) {
+    wx.navigateTo({
+      url: '/pages/experience-webview/experience-webview',
+      success: (result) => {
+        const eventChannel = result.eventChannel
+        eventChannel.on('fallback', (payload: H5ExperienceFallbackPayload) => {
+          if (mapEngine) {
+            mapEngine.handleH5ExperienceFallback(payload)
+          }
+        })
+        eventChannel.on('close', () => {
+          if (mapEngine) {
+            mapEngine.handleH5ExperienceClosed()
+          }
+        })
+        eventChannel.on('submitResult', () => {
+          if (mapEngine) {
+            mapEngine.handleH5ExperienceClosed()
+          }
+        })
+        eventChannel.emit('init', request)
+      },
+      fail: () => {
+        if (mapEngine) {
+          mapEngine.handleH5ExperienceFallback(request.fallback)
+        }
+      },
+    })
+  },
+
   handleCloseContentCard() {
     if (mapEngine) {
       mapEngine.closeContentCard()

miniprogram/pages/map/map.wxml

@@ -115,6 +115,10 @@
     <cover-view class="map-punch-button__text">{{punchButtonText}}</cover-view>
   </cover-view>
 
+  <cover-view class="map-content-entry" wx:if="{{!showDebugPanel && !showGameInfoPanel && !showResultScene && !showSystemSettingsPanel && pendingContentEntryVisible}}" bindtap="handleOpenPendingContentCard">
+    <cover-view class="map-content-entry__text">{{pendingContentEntryText}}</cover-view>
+  </cover-view>
+
   <cover-view class="screen-button-layer screen-button-layer--start-left" wx:if="{{!showDebugPanel && !showGameInfoPanel && !showResultScene && !showSystemSettingsPanel && showBottomDebugButton && gameSessionStatus !== 'running'}}" bindtap="handleStartGame">
     <cover-view class="screen-button-layer__text screen-button-layer__text--start">开始</cover-view>
   </cover-view>
@@ -552,6 +556,7 @@
           </view>
           <view class="control-row">
             <view class="control-chip control-chip--primary" bindtap="handleConnectAllMockSources">一键连接模拟源</view>
+            <view class="control-chip control-chip--secondary" bindtap="handleOpenWebViewTest">测试 H5</view>
           </view>
           <view class="debug-group-title">定位</view>
           <view class="info-panel__row">

miniprogram/pages/map/map.wxss

@@ -1155,6 +1155,27 @@
   animation: punch-button-warning 0.56s ease-in-out 1;
 }
 
+.map-content-entry {
+  position: absolute;
+  right: 22rpx;
+  bottom: 352rpx;
+  min-width: 96rpx;
+  height: 52rpx;
+  padding: 0 18rpx;
+  border-radius: 28rpx;
+  background: rgba(33, 47, 58, 0.88);
+  box-shadow: 0 10rpx 24rpx rgba(18, 28, 38, 0.2);
+  z-index: 18;
+}
+
+.map-content-entry__text {
+  font-size: 22rpx;
+  line-height: 52rpx;
+  font-weight: 700;
+  text-align: center;
+  color: rgba(244, 248, 252, 0.94);
+}
+
 
 .race-panel__line {
   position: absolute;

miniprogram/pages/webview-test/webview-test.js

@@ -0,0 +1,24 @@
+const WEB_VIEW_TEST_URL = 'https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html'
+
+Page({
+  data: {
+    webViewSrc: '',
+    webViewReady: false,
+  },
+
+  onLoad() {
+    this.setData({
+      webViewSrc: WEB_VIEW_TEST_URL,
+      webViewReady: true,
+    })
+  },
+
+  handleWebViewError() {
+    wx.showModal({
+      title: 'H5 打开失败',
+      content: WEB_VIEW_TEST_URL,
+      showCancel: false,
+      confirmText: '知道了',
+    })
+  },
+})

miniprogram/pages/webview-test/webview-test.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "WebView 测试"
+}

miniprogram/pages/webview-test/webview-test.ts

@@ -0,0 +1,29 @@
+type WebViewTestPageData = {
+  webViewSrc: string
+  webViewReady: boolean
+}
+
+const WEB_VIEW_TEST_URL = 'https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html'
+
+Page<WebViewTestPageData, WechatMiniprogram.IAnyObject>({
+  data: {
+    webViewSrc: '',
+    webViewReady: false,
+  },
+
+  onLoad() {
+    this.setData({
+      webViewSrc: WEB_VIEW_TEST_URL,
+      webViewReady: true,
+    })
+  },
+
+  handleWebViewError() {
+    wx.showModal({
+      title: 'H5 打开失败',
+      content: WEB_VIEW_TEST_URL,
+      showCancel: false,
+      confirmText: '知道了',
+    })
+  },
+})

miniprogram/pages/webview-test/webview-test.wxml

@@ -0,0 +1,11 @@
+<view class="webview-test-page">
+  <view class="webview-test-page__loading" wx:if="{{!webViewReady}}">
+    <view class="webview-test-page__title">H5 测试页加载中</view>
+    <view class="webview-test-page__desc">{{webViewSrc}}</view>
+  </view>
+  <web-view
+    wx:if="{{webViewReady && webViewSrc}}"
+    src="{{webViewSrc}}"
+    binderror="handleWebViewError"
+  ></web-view>
+</view>

miniprogram/pages/webview-test/webview-test.wxss

@@ -0,0 +1,24 @@
+.webview-test-page {
+  height: 100vh;
+  background: #f5f7f8;
+}
+
+.webview-test-page__loading {
+  min-height: 100vh;
+  padding: 120rpx 48rpx;
+  box-sizing: border-box;
+}
+
+.webview-test-page__title {
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #102a24;
+}
+
+.webview-test-page__desc {
+  margin-top: 28rpx;
+  font-size: 24rpx;
+  line-height: 1.6;
+  color: #5a6e68;
+  word-break: break-all;
+}