修复小程序内嵌页面标题同步

src/pages.json

@@ -25,7 +25,7 @@
     {
       "path": "pages/explain/list",
       "style": {
-        "navigationBarTitleText": "全部讲解",
+        "navigationBarTitleText": "免费讲解",
         "navigationBarBackgroundColor": "#FFFFFF",
         "navigationStyle": "custom"
       }

src/pages/explain/list.vue

@@ -10,7 +10,6 @@
       <ExplainHallSelect
         :halls="explainHallItems"
         stage="hall"
-        force-internal-header
         :loading="explainLoading"
         :error="explainError"
         @hall-click="handleExplainHallClick"
@@ -40,6 +39,7 @@ import {
   type GuideTopTab
 } from '@/utils/guideTopTabs'
 import { isEmbeddedInWechatMiniProgram } from '@/utils/hostEnvironment'
+import { syncHostNavigationTitle } from '@/utils/hostNavigationTitle'
 import { explainGuideStopListUrl } from '@/utils/explainNavigation'
 
 const explainHallItems = ref<ExplainHallSelectItem[]>([])
@@ -218,6 +218,7 @@ const loadExplainHalls = async () => {
 }
 
 onLoad(() => {
+  syncHostNavigationTitle('免费讲解')
   pushExplainListHistory()
   void loadExplainHalls()
 })

src/pages/index/index.vue

@@ -276,6 +276,7 @@ import {
   type GuideTopTab
 } from '@/utils/guideTopTabs'
 import { isEmbeddedInWechatMiniProgram } from '@/utils/hostEnvironment'
+import { syncHostNavigationTitle } from '@/utils/hostNavigationTitle'
 import {
   guideUseCase
 } from '@/usecases/guideUseCase'
@@ -419,6 +420,14 @@ let pendingPoiDetailUiContext: Readonly<{
 
 // 状态
 const currentTab = ref<GuideTopTab>(initialTopTab())
+const topTabNavigationTitle = (tab: GuideTopTab) => (
+  tab === 'explain' ? '免费讲解' : '地图导览'
+)
+
+watch(currentTab, (tab) => {
+  syncHostNavigationTitle(topTabNavigationTitle(tab))
+}, { immediate: true })
+
 const launchOverlayVisible = ref(shouldShowLaunchOverlay())
 const launchOverlayLeaving = ref(false)
 const launchProgress = ref(8)

src/utils/hostNavigationTitle.ts

@@ -0,0 +1,39 @@
+import { isEmbeddedInWechatMiniProgram } from '@/utils/hostEnvironment'
+
+export const MINI_PROGRAM_NAVIGATION_TITLE_MESSAGE = 'museum-guide:navigation-title'
+
+type MiniProgramBridge = {
+  postMessage?: (options: {
+    data: {
+      type: typeof MINI_PROGRAM_NAVIGATION_TITLE_MESSAGE
+      title: string
+    }
+  }) => void
+}
+
+const getMiniProgramBridge = () => {
+  if (typeof window === 'undefined') return undefined
+
+  return (window as Window & {
+    wx?: {
+      miniProgram?: MiniProgramBridge
+    }
+  }).wx?.miniProgram
+}
+
+export const syncHostNavigationTitle = (title: string) => {
+  if (typeof document !== 'undefined') document.title = title
+
+  if (typeof uni !== 'undefined' && typeof uni.setNavigationBarTitle === 'function') {
+    uni.setNavigationBarTitle({ title })
+  }
+
+  if (!isEmbeddedInWechatMiniProgram()) return
+
+  getMiniProgramBridge()?.postMessage?.({
+    data: {
+      type: MINI_PROGRAM_NAVIGATION_TITLE_MESSAGE,
+      title
+    }
+  })
+}

tests/unit/ExplainListNavigation.spec.ts

@@ -112,7 +112,7 @@ describe('讲解展厅列表返回', () => {
     window.history.replaceState({}, '', window.location.href)
     const wrapper = mountExplainList()
 
-    expect(wrapper.getComponent(ExplainHallSelectStub).props('forceInternalHeader')).toBe(true)
+    expect(wrapper.getComponent(ExplainHallSelectStub).props('forceInternalHeader')).toBe(false)
     await wrapper.get('[data-testid="explain-list-back"]').trigger('click')
 
     expect(uni.navigateBack).not.toHaveBeenCalled()

tests/unit/hostNavigationTitle.spec.ts

@@ -0,0 +1,61 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  MINI_PROGRAM_NAVIGATION_TITLE_MESSAGE,
+  syncHostNavigationTitle
+} from '@/utils/hostNavigationTitle'
+
+const hostEnvironmentMocks = vi.hoisted(() => ({
+  embeddedInWechatMiniProgram: false
+}))
+
+vi.mock('@/utils/hostEnvironment', () => ({
+  isEmbeddedInWechatMiniProgram: () => hostEnvironmentMocks.embeddedInWechatMiniProgram
+}))
+
+afterEach(() => {
+  hostEnvironmentMocks.embeddedInWechatMiniProgram = false
+  vi.unstubAllGlobals()
+})
+
+describe('小程序宿主标题同步', () => {
+  it('嵌入态同步免费讲解标题并通知小程序宿主', () => {
+    const postMessage = vi.fn()
+    const setNavigationBarTitle = vi.fn()
+    hostEnvironmentMocks.embeddedInWechatMiniProgram = true
+    vi.stubGlobal('uni', { setNavigationBarTitle })
+    vi.stubGlobal('window', {
+      ...window,
+      wx: {
+        miniProgram: { postMessage }
+      }
+    })
+
+    syncHostNavigationTitle('免费讲解')
+
+    expect(document.title).toBe('免费讲解')
+    expect(setNavigationBarTitle).toHaveBeenCalledWith({ title: '免费讲解' })
+    expect(postMessage).toHaveBeenCalledWith({
+      data: {
+        type: MINI_PROGRAM_NAVIGATION_TITLE_MESSAGE,
+        title: '免费讲解'
+      }
+    })
+  })
+
+  it('非嵌入态不向小程序桥接发送标题', () => {
+    const postMessage = vi.fn()
+    vi.stubGlobal('window', {
+      ...window,
+      wx: {
+        miniProgram: { postMessage }
+      }
+    })
+
+    syncHostNavigationTitle('免费讲解')
+
+    expect(document.title).toBe('免费讲解')
+    expect(postMessage).not.toHaveBeenCalled()
+  })
+})