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

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