feat: add bridge service for mini program web-view integration

- Implemented a bridge utility for sharing, copying links, and setting the navigation bar title in mini program web-view.
- Added methods for sharing content and copying links to clipboard.
- Included error handling for non-mini program environments.
This commit is contained in:
2026-06-25 10:57:26 +08:00
parent a8409ad76b
commit 9b315fd77d
2 changed files with 676 additions and 574 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,82 @@
/**
* 小程序 WebView 桥接工具
*
* 在 H5(app_03)中调用此工具,可实现分享、复制链接等功能。
* 小程序侧(crmeb web_view)通过 @message 监听处理。
*
* 使用方式:
* import bridge from '../services/bridge'
*
* // 分享给好友
* bridge.share({ title: '标题', href: window.location.href })
*
* // 复制链接
* bridge.copyLink(window.location.href)
*/
declare const wx: any
function getMiniProgram() {
try {
if (typeof wx !== 'undefined' && wx.miniProgram) {
return wx.miniProgram
}
} catch {
// ignore
}
return null
}
const bridge = {
postMessage(data: Record<string, any>) {
const mp = getMiniProgram()
if (mp) {
mp.postMessage({ data })
} else {
console.warn('[bridge] 不在小程序 web-view 环境中')
}
},
/**
* 分享给微信好友 / 朋友圈
*/
share(opts: {
title: string
href?: string
summary?: string
imageUrl?: string
scene?: 'WXSceneSession' | 'WXSceneTimeline'
}) {
this.postMessage({
action: 'share',
title: opts.title || '',
href: opts.href || window.location.href,
summary: opts.summary || '',
imageUrl: opts.imageUrl || '',
scene: opts.scene || 'WXSceneSession',
})
},
/**
* 复制链接到剪贴板
*/
copyLink(link?: string) {
this.postMessage({
action: 'copyLink',
href: link || window.location.href,
})
},
/**
* 设置小程序导航栏标题
*/
setTitle(title: string) {
if (!title) return
this.postMessage({
action: 'setTitle',
title,
})
},
}
export default bridge