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

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()
+  },
+})