mixin 配置

onShareAppMessage

全局分享设置，使用 mixin 处理，虽然官方建议使用 composition API 去替代 mixin ，但明显需要更多代码处理，所以继续使用 mixin 。

// main.ts
const share = {
  onShareAppMessage() {
    return {
      title: store.state?.hospitalName || '好大夫便民就医平台',
      imageUrl: store.getters?.apolloConfig?.onShareAppMessageImageUrl || '',
      path: '/pages/index/index'
    }
  }
}

export function createApp() {
  const app = createSSRApp(App)
  app
    .mixin(share)
    .use(store, key, useStore)
    .component('MyNavBar', MyNavBar)
  return {
    app
  }
}

TIP

由于使用次数不高，没有封装为模块，未来可在 src/mixin 中放置模块代码。

自定义分享信息

由于 mixin 属于 vue3 的底层实现，setup 的生命周期会比 mixin 先执行。

需要在 onShareAppMessage 外层包裹一层 onReady 。

// regDocHomePage.vue
onReady(() => {
  onShareAppMessage(() => {
    return { title: `${store.state.hospitalName}-${doctors.value?.doctorName}` }
  })
})

mixin 配置 ​

onShareAppMessage ​

自定义分享信息 ​

mixin 配置

onShareAppMessage

自定义分享信息