接入发布分享原生系统分享路径
发布分享弹窗在 native_app 中调用 share.open 保留复制链接与下载卡片回退路径 补充 HostBridge 分享测试和宿主壳能力文档
This commit is contained in:
@@ -20,7 +20,7 @@
|
||||
|
||||
- 背景：后续需要移动端 App 和桌面端 App，但现有主站、固定玩法 runtime、小程序壳和未来 AI H5 sandbox 已经以 H5 为主线；如果移动端重写 React Native UI、桌面端重写 Rust/Tauri UI，会形成玩法、登录、支付、分享和运行态的多套实现。
|
||||
- 决策：移动端原生壳采用 `Expo + React Native`，桌面端壳采用 `Tauri`。两者都只作为 `native_app` 宿主壳和 HostBridge adapter，不重写现有 React H5 主站，不把固定内置玩法迁到 React Native / Rust UI，也不让 AI 生成 H5 游戏直接访问完整 HostBridge。Expo 壳通过 `react-native-webview` 承接 H5 与 native 通信，Tauri 壳通过受控 command 和 capabilities 承接桌面能力；新增能力必须先进入 HostBridge 契约和测试。
|
||||
- 2026-06-17 首轮落地：新增 `packages/shared/src/contracts/hostBridge.ts`、`src/services/host-bridge/nativeAppHostBridge.ts`、`apps/mobile-shell/` 和 `apps/desktop-shell/`。壳只声明并实现真实可用能力；移动壳使用真实品牌图标资产并支持 `genarrative://`、iOS associated domain、Android app link 到同源 H5 路径，`navigation.openNativePage` 只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的原生页面，且通过 `host.events` 注入 `navigation.canGoBack` 返回栈状态事件，`share.setTarget` / `share.open` 解析统一分享目标并调用 React Native 系统分享面板，`file.exportText` 写入 Expo 缓存文本文件后交给系统分享 / 保存面板，成功只返回文件名和字节数，`haptics.impact` 通过 Expo Haptics 承接 H5 运行时点击反馈；`app.openExternalUrl` 在 Expo 与 Tauri 两端都只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议；H5 复制服务在 native_app 中优先通过 `clipboard.writeText` 写入 Expo / Tauri 系统剪贴板，失败后再回退浏览器复制路径；H5 运行时反馈在 native_app 中优先通过 `haptics.impact` 请求真实移动端触觉，宿主不可用或 unsupported 时回退浏览器 `navigator.vibrate`；H5 主站按当前平台阶段同步 `document.title` 并通过 `app.setTitle` 请求宿主窗口标题，Tauri 壳通过主窗口 API 同步非空窗口标题，Expo 移动壳不声明该能力时静默忽略；桌面壳已通过 Tauri clipboard-manager 接入 `clipboard.writeText`，将 `navigation.openNativePage` 实现为 `https://app.genarrative.world` 同源 H5 route 的主窗口受控跳转，并将 `share.setTarget` / `share.open` 实现为复制非空分享文本到系统剪贴板；桌面 `file.exportText` 通过 Tauri dialog 插件打开系统保存对话框并由 Rust 写入文本文件，但不把 dialog / fs 插件 command 直接暴露给 H5，成功只返回文件名和字节数，用户取消返回 `cancelled`；登录、支付、原生系统分享面板等未接入真实 SDK / 插件前必须返回 unsupported 并让 H5 fallback，生产代码禁止 mock 成功。
|
||||
- 2026-06-17 首轮落地：新增 `packages/shared/src/contracts/hostBridge.ts`、`src/services/host-bridge/nativeAppHostBridge.ts`、`apps/mobile-shell/` 和 `apps/desktop-shell/`。壳只声明并实现真实可用能力；移动壳使用真实品牌图标资产并支持 `genarrative://`、iOS associated domain、Android app link 到同源 H5 路径，`navigation.openNativePage` 只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的原生页面，且通过 `host.events` 注入 `navigation.canGoBack` 返回栈状态事件，`share.setTarget` / `share.open` 解析统一分享目标并调用 React Native 系统分享面板，发布分享弹窗在 native_app 中通过 `share.open` 提供“系统分享”动作，失败时保留复制链接回退路径；`file.exportText` 写入 Expo 缓存文本文件后交给系统分享 / 保存面板，成功只返回文件名和字节数，`haptics.impact` 通过 Expo Haptics 承接 H5 运行时点击反馈；`app.openExternalUrl` 在 Expo 与 Tauri 两端都只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议；H5 复制服务在 native_app 中优先通过 `clipboard.writeText` 写入 Expo / Tauri 系统剪贴板，失败后再回退浏览器复制路径；H5 运行时反馈在 native_app 中优先通过 `haptics.impact` 请求真实移动端触觉，宿主不可用或 unsupported 时回退浏览器 `navigator.vibrate`；H5 主站按当前平台阶段同步 `document.title` 并通过 `app.setTitle` 请求宿主窗口标题，Tauri 壳通过主窗口 API 同步非空窗口标题，Expo 移动壳不声明该能力时静默忽略；桌面壳已通过 Tauri clipboard-manager 接入 `clipboard.writeText`，将 `navigation.openNativePage` 实现为 `https://app.genarrative.world` 同源 H5 route 的主窗口受控跳转，并将 `share.setTarget` / `share.open` 实现为复制非空分享文本到系统剪贴板；桌面 `file.exportText` 通过 Tauri dialog 插件打开系统保存对话框并由 Rust 写入文本文件，但不把 dialog / fs 插件 command 直接暴露给 H5，成功只返回文件名和字节数，用户取消返回 `cancelled`；登录、支付、原生系统分享面板等未接入真实 SDK / 插件前必须返回 unsupported 并让 H5 fallback，生产代码禁止 mock 成功。
|
||||
- 影响范围：`src/services/host-bridge/`、未来 `apps/mobile-shell/`、未来 `apps/desktop-shell/`、移动端支付 / 分享 / 深链 / 推送、桌面端系统能力、AI H5 sandbox 的 GameBridge 边界。
|
||||
- 验证方式：普通浏览器、小程序、Expo 壳、Tauri 壳都能返回正确 `getHostRuntime()`；未支持能力能回退 H5；固定玩法在各宿主中读取同一作品数据和运行态 snapshot；AI sandbox 无法直接调用 HostBridge；Tauri release 不允许任意远端页面调用桌面命令。
|
||||
- 关联文档：`docs/【前端架构】ExpoReactNative与Tauri宿主壳方案-2026-06-17.md`、`docs/【前端架构】宿主壳能力统一协议-2026-06-17.md`。
|
||||
|
||||
@@ -241,7 +241,7 @@ GameBridge 禁止：
|
||||
- iOS / Android 深链打开作品详情、创作页和邀请码。
|
||||
- 登录和支付先 fallback 到 H5；只把能力边界跑通。
|
||||
|
||||
当前状态：已新增 `apps/mobile-shell/`，通过 Expo development build 运行，`react-native-webview` 加载 H5 URL 并附加 `native_app` 宿主 query。移动壳使用真实品牌图标资产，已接入 `genarrative://` scheme、iOS associated domain 和 Android app link filter，启动和运行时 deep link 只会映射到同源 H5 路径并继续附加 HostBridge 上下文，外域和危险协议回退到默认主站入口。首轮真实能力包括 `host.getRuntime`、`host.events`、`share.open`、`share.setTarget`、`navigation.openNativePage`、`navigation.canGoBack`、`app.openExternalUrl`、`clipboard.writeText`、`file.exportText`、`haptics.impact` 和 Android 返回键回退；其中 `share.setTarget` / `share.open` 会解析统一分享目标里的 `title`、`message`、`url`、`work`、`path` 或 `targetPath` 并调用 React Native 系统分享面板；`navigation.openNativePage` 在 Expo 壳内只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的登录、支付或其它原生页面，`navigation.canGoBack` 由 WebView 导航状态变化实时注入 H5，`app.openExternalUrl` 只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，`clipboard.writeText` 由 H5 复制服务优先调用并写入系统剪贴板；`file.exportText` 通过 Expo 文件系统写入缓存文本文件，再交给系统分享 / 保存面板，文件名必须清洗，单次文本不超过 5 MiB，成功只返回文件名和字节数；`haptics.impact` 通过 Expo Haptics 承接运行时轻触反馈，H5 在宿主不支持时回退到浏览器 vibration。登录和支付尚未接入渠道 SDK / 原生页面时明确返回 unsupported，让 H5 fallback 承接。
|
||||
当前状态：已新增 `apps/mobile-shell/`，通过 Expo development build 运行，`react-native-webview` 加载 H5 URL 并附加 `native_app` 宿主 query。移动壳使用真实品牌图标资产，已接入 `genarrative://` scheme、iOS associated domain 和 Android app link filter，启动和运行时 deep link 只会映射到同源 H5 路径并继续附加 HostBridge 上下文，外域和危险协议回退到默认主站入口。首轮真实能力包括 `host.getRuntime`、`host.events`、`share.open`、`share.setTarget`、`navigation.openNativePage`、`navigation.canGoBack`、`app.openExternalUrl`、`clipboard.writeText`、`file.exportText`、`haptics.impact` 和 Android 返回键回退；其中 `share.setTarget` / `share.open` 会解析统一分享目标里的 `title`、`message`、`url`、`work`、`path` 或 `targetPath` 并调用 React Native 系统分享面板；发布分享弹窗在 `native_app` 中通过 `share.open` 提供“系统分享”动作，失败时保留复制链接回退路径；`navigation.openNativePage` 在 Expo 壳内只接受同源 H5 route 并切换 WebView URL，不伪造尚未存在的登录、支付或其它原生页面，`navigation.canGoBack` 由 WebView 导航状态变化实时注入 H5，`app.openExternalUrl` 只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，`clipboard.writeText` 由 H5 复制服务优先调用并写入系统剪贴板；`file.exportText` 通过 Expo 文件系统写入缓存文本文件，再交给系统分享 / 保存面板，文件名必须清洗，单次文本不超过 5 MiB，成功只返回文件名和字节数；`haptics.impact` 通过 Expo Haptics 承接运行时轻触反馈，H5 在宿主不支持时回退到浏览器 vibration。登录和支付尚未接入渠道 SDK / 原生页面时明确返回 unsupported，让 H5 fallback 承接。
|
||||
|
||||
### Phase 3：Tauri 桌面壳 MVP
|
||||
|
||||
@@ -252,7 +252,7 @@ GameBridge 禁止：
|
||||
- 实现 runtime、openExternalUrl、clipboard、share fallback、窗口标题同步。
|
||||
- 验证 macOS / Windows / Linux 至少一条本地 smoke。
|
||||
|
||||
当前状态：已新增 `apps/desktop-shell/`，Tauri dev 直接加载本地主站 Vite，release 打包根 `dist` 主站资产。Rust 侧只把 `host_bridge_request` command 授给主窗口，`app.openExternalUrl` 由 Rust 内部通过 opener 插件执行且只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，`navigation.openNativePage` 只接受 `https://app.genarrative.world` 同源 H5 route 并在主窗口内受控跳转，`clipboard.writeText` 由 Rust 内部通过 clipboard-manager 插件写入系统剪贴板并由 H5 复制服务优先调用，`app.setTitle` 通过 Tauri 主窗口 API 同步窗口标题并拒绝空标题 / 控制字符；H5 主站会按当前平台阶段先更新 `document.title`，再通过 `app.setTitle` 把同一标题同步给 Tauri 窗口，Expo 移动壳不声明该能力时静默忽略；不把 opener、clipboard 或 dialog 插件命令直接暴露给前端。当前真实能力为 `host.getRuntime`、`share.setTarget`、`share.open`、`navigation.openNativePage`、`app.openExternalUrl`、`app.setTitle`、`clipboard.writeText` 和 `file.exportText`；其中 `share.open` 会把直接传入的分享 payload 或 `share.setTarget` 缓存的作品目标整理成非空分享文本并写入系统剪贴板，返回 `copied_to_clipboard`；`file.exportText` 通过系统保存对话框让用户选择本地路径，清洗文件名、限制单次文本导出不超过 5 MiB，写入成功后只返回文件名和字节数，不把本机绝对路径暴露给 H5，用户取消时返回 `cancelled`。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 mock 成功。
|
||||
当前状态：已新增 `apps/desktop-shell/`，Tauri dev 直接加载本地主站 Vite，release 打包根 `dist` 主站资产。Rust 侧只把 `host_bridge_request` command 授给主窗口，`app.openExternalUrl` 由 Rust 内部通过 opener 插件执行且只允许 `http:`、`https:`、`mailto:`、`tel:` 外链协议，`navigation.openNativePage` 只接受 `https://app.genarrative.world` 同源 H5 route 并在主窗口内受控跳转，`clipboard.writeText` 由 Rust 内部通过 clipboard-manager 插件写入系统剪贴板并由 H5 复制服务优先调用，`app.setTitle` 通过 Tauri 主窗口 API 同步窗口标题并拒绝空标题 / 控制字符；H5 主站会按当前平台阶段先更新 `document.title`，再通过 `app.setTitle` 把同一标题同步给 Tauri 窗口，Expo 移动壳不声明该能力时静默忽略；不把 opener、clipboard 或 dialog 插件命令直接暴露给前端。当前真实能力为 `host.getRuntime`、`share.setTarget`、`share.open`、`navigation.openNativePage`、`app.openExternalUrl`、`app.setTitle`、`clipboard.writeText` 和 `file.exportText`；其中 `share.open` 会把直接传入的分享 payload 或 `share.setTarget` 缓存的作品目标整理成非空分享文本并写入系统剪贴板，返回 `copied_to_clipboard`，发布分享弹窗在桌面壳中也通过该能力提供“系统分享”动作；`file.exportText` 通过系统保存对话框让用户选择本地路径，清洗文件名、限制单次文本导出不超过 5 MiB，写入成功后只返回文件名和字节数，不把本机绝对路径暴露给 H5，用户取消时返回 `cancelled`。原生系统分享面板、登录和支付未接入真实插件 / 渠道前不声明支持，不返回 mock 成功。
|
||||
|
||||
### Phase 4：宿主能力扩展
|
||||
|
||||
|
||||
@@ -43,6 +43,7 @@ AI H5 sandbox
|
||||
- `requestHostLogin()`：微信小程序跳转原生登录页；浏览器返回 `false`，由 H5 登录弹窗承接。
|
||||
- `requestHostPayment()`：微信小程序支付跳转原生支付页；其它渠道返回 `false`，继续走 H5 / Native 二维码。
|
||||
- `setHostShareTarget()`：把当前公开作品分享目标同步给宿主。
|
||||
- `openHostShare()`：原生 App 宿主的受控分享入口。发布分享弹窗在 `native_app` 中展示“系统分享”，通过 `share.open` 把当前作品标题、作品号和公开 URL 交给宿主；Expo 移动壳打开系统分享面板，Tauri 桌面壳把分享文本写入系统剪贴板，宿主不可用或返回 unsupported 时显示失败并保留复制链接路径。
|
||||
- `openHostShareGrid()`：微信小程序九宫格切图页。
|
||||
- `writeHostClipboardText()`：原生 App 宿主的受控剪贴板入口。H5 复制服务在 `native_app` 中优先通过 `clipboard.writeText` 写入 Expo / Tauri 系统剪贴板；宿主不可用、拒绝或返回 unsupported 时继续回退到浏览器 Clipboard API 和 legacy selection copy。
|
||||
- `requestHostHapticsImpact()`：原生 App 宿主的受控触觉反馈入口。Expo 移动壳通过 `haptics.impact` 调用 Expo Haptics；H5 运行时点击反馈在 `native_app` 中优先请求宿主触觉，宿主不可用、拒绝或返回 unsupported 时继续回退到浏览器 `navigator.vibrate`。
|
||||
|
||||
@@ -35,9 +35,22 @@ const payload: PublishShareModalPayload = {
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
window.history.replaceState(null, '', '/');
|
||||
delete window.ReactNativeWebView;
|
||||
delete window.__TAURI__;
|
||||
window.wx = undefined;
|
||||
});
|
||||
|
||||
function asTauriInvoke(
|
||||
invoke: (command: string, args?: Record<string, unknown>) => Promise<unknown>,
|
||||
) {
|
||||
return async function tauriInvoke<Result = unknown>(
|
||||
command: string,
|
||||
args?: Record<string, unknown>,
|
||||
) {
|
||||
return (await invoke(command, args)) as Result;
|
||||
};
|
||||
}
|
||||
|
||||
describe('PublishShareModal', () => {
|
||||
test('builds the publish share text with title, code and public url', () => {
|
||||
const text = buildPublishShareText(payload);
|
||||
@@ -96,6 +109,7 @@ describe('PublishShareModal', () => {
|
||||
expect(within(dialog).getByText('暖灯猫街')).toBeTruthy();
|
||||
expect(within(dialog).getByRole('button', { name: '复制链接' })).toBeTruthy();
|
||||
expect(within(dialog).getByRole('button', { name: '下载卡片' })).toBeTruthy();
|
||||
expect(within(dialog).queryByRole('button', { name: '系统分享' })).toBeNull();
|
||||
expect(within(dialog).queryByRole('button', { name: '九宫切图' })).toBeNull();
|
||||
|
||||
fireEvent.click(within(dialog).getByRole('button', { name: '复制链接' }));
|
||||
@@ -146,4 +160,50 @@ describe('PublishShareModal', () => {
|
||||
|
||||
expect(screen.getByRole('button', { name: '九宫切图' })).toBeTruthy();
|
||||
});
|
||||
|
||||
test('uses native host share action inside native app runtime', async () => {
|
||||
const invoke = vi.fn(
|
||||
async (_command: string, args?: Record<string, unknown>) => {
|
||||
const request = (args as { request: { id: string } }).request;
|
||||
return {
|
||||
bridge: 'GenarrativeHostBridge',
|
||||
version: 1,
|
||||
id: request.id,
|
||||
ok: true,
|
||||
result: true,
|
||||
};
|
||||
},
|
||||
);
|
||||
window.history.replaceState(
|
||||
null,
|
||||
'',
|
||||
'/?clientRuntime=native_app&hostShell=tauri_desktop',
|
||||
);
|
||||
window.__TAURI__ = {
|
||||
core: {
|
||||
invoke: asTauriInvoke(invoke),
|
||||
},
|
||||
};
|
||||
|
||||
render(<PublishShareModal open payload={payload} onClose={() => {}} />);
|
||||
|
||||
const dialog = screen.getByRole('dialog', { name: '分享给朋友' });
|
||||
fireEvent.click(within(dialog).getByRole('button', { name: '系统分享' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
within(dialog).getByRole('button', { name: '已打开' }),
|
||||
).toBeTruthy();
|
||||
});
|
||||
expect(invoke).toHaveBeenCalledWith('host_bridge_request', {
|
||||
request: expect.objectContaining({
|
||||
method: 'share.open',
|
||||
payload: {
|
||||
title: '暖灯猫街',
|
||||
message: '邀请你来玩《暖灯猫街》\n作品号：PZ-00000001',
|
||||
url: buildPublishShareUrl(payload),
|
||||
},
|
||||
}),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Check, Copy, Download, Grid3X3, Link2 } from 'lucide-react';
|
||||
import { Check, Copy, Download, Grid3X3, Link2, Share2 } from 'lucide-react';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { resolveAssetReadUrl } from '../../services/assetReadUrlService';
|
||||
@@ -6,6 +6,7 @@ import { copyTextToClipboard } from '../../services/clipboard';
|
||||
import {
|
||||
canUseHostShareGrid,
|
||||
getHostRuntime,
|
||||
openHostShare,
|
||||
openHostShareGrid,
|
||||
} from '../../services/host-bridge/hostBridge';
|
||||
import { useAuthUi } from '../auth/AuthUiContext';
|
||||
@@ -14,6 +15,7 @@ import { PlatformUtilityInfoModal } from './PlatformUtilityInfoModal';
|
||||
import { downloadPublishShareCardImage } from './publishShareCardImage';
|
||||
import {
|
||||
buildPublishShareCopyUrl,
|
||||
buildPublishShareUrl,
|
||||
type PublishShareModalPayload,
|
||||
} from './publishShareModalModel';
|
||||
|
||||
@@ -54,15 +56,21 @@ export function PublishShareModal({
|
||||
const [copyState, setCopyState] = useState<ActionState>('idle');
|
||||
const [downloadState, setDownloadState] = useState<ActionState>('idle');
|
||||
const [gridState, setGridState] = useState<ActionState>('idle');
|
||||
const [nativeShareState, setNativeShareState] =
|
||||
useState<ActionState>('idle');
|
||||
const resetTimerRef = useRef<number | null>(null);
|
||||
const hostRuntimeKind = getHostRuntime().kind;
|
||||
const shareCopyUrl = useMemo(
|
||||
() =>
|
||||
payload
|
||||
? buildPublishShareCopyUrl(payload, {
|
||||
miniProgramRuntime:
|
||||
getHostRuntime().kind === 'wechat_mini_program',
|
||||
miniProgramRuntime: hostRuntimeKind === 'wechat_mini_program',
|
||||
})
|
||||
: '',
|
||||
[hostRuntimeKind, payload],
|
||||
);
|
||||
const publicShareUrl = useMemo(
|
||||
() => (payload ? buildPublishShareUrl(payload) : ''),
|
||||
[payload],
|
||||
);
|
||||
const title = normalizePayloadTitle(payload);
|
||||
@@ -70,6 +78,7 @@ export function PublishShareModal({
|
||||
const workTypeLabel = resolvePayloadWorkTypeLabel(payload);
|
||||
const showMiniProgramGridButton =
|
||||
canUseHostShareGrid() && Boolean(coverImageSrc);
|
||||
const showNativeShareButton = hostRuntimeKind === 'native_app';
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
@@ -84,6 +93,7 @@ export function PublishShareModal({
|
||||
setCopyState('idle');
|
||||
setDownloadState('idle');
|
||||
setGridState('idle');
|
||||
setNativeShareState('idle');
|
||||
}, [payload?.publicWorkCode]);
|
||||
|
||||
const scheduleStateReset = () => {
|
||||
@@ -95,6 +105,7 @@ export function PublishShareModal({
|
||||
setCopyState('idle');
|
||||
setDownloadState('idle');
|
||||
setGridState('idle');
|
||||
setNativeShareState('idle');
|
||||
}, 1400);
|
||||
};
|
||||
|
||||
@@ -144,6 +155,27 @@ export function PublishShareModal({
|
||||
});
|
||||
};
|
||||
|
||||
const openNativeShare = () => {
|
||||
if (!payload || !publicShareUrl) {
|
||||
return;
|
||||
}
|
||||
|
||||
setNativeShareState('idle');
|
||||
void openHostShare({
|
||||
title,
|
||||
message: `邀请你来玩《${title}》\n作品号：${payload.publicWorkCode}`,
|
||||
url: publicShareUrl,
|
||||
})
|
||||
.then((opened) => {
|
||||
setNativeShareState(opened ? 'success' : 'failed');
|
||||
scheduleStateReset();
|
||||
})
|
||||
.catch(() => {
|
||||
setNativeShareState('failed');
|
||||
scheduleStateReset();
|
||||
});
|
||||
};
|
||||
|
||||
const openMiniProgramGridDownload = () => {
|
||||
if (!payload || !coverImageSrc) {
|
||||
return;
|
||||
@@ -179,14 +211,39 @@ export function PublishShareModal({
|
||||
footer={
|
||||
<div
|
||||
className={`grid w-full gap-3 ${
|
||||
showMiniProgramGridButton ? 'grid-cols-1 sm:grid-cols-3' : 'grid-cols-2'
|
||||
showMiniProgramGridButton || showNativeShareButton
|
||||
? 'grid-cols-1 sm:grid-cols-3'
|
||||
: 'grid-cols-2'
|
||||
}`}
|
||||
>
|
||||
{showNativeShareButton ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openNativeShare}
|
||||
disabled={!payload || !publicShareUrl}
|
||||
className="platform-button platform-button--primary min-h-11 justify-center gap-2 text-sm disabled:cursor-not-allowed disabled:opacity-55"
|
||||
>
|
||||
{nativeShareState === 'success' ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Share2 className="h-4 w-4" />
|
||||
)}
|
||||
{nativeShareState === 'success'
|
||||
? '已打开'
|
||||
: nativeShareState === 'failed'
|
||||
? '分享失败'
|
||||
: '系统分享'}
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
onClick={copyShareLink}
|
||||
disabled={!shareCopyUrl}
|
||||
className="platform-button platform-button--primary min-h-11 justify-center gap-2 text-sm disabled:cursor-not-allowed disabled:opacity-55"
|
||||
className={`platform-button ${
|
||||
showNativeShareButton
|
||||
? 'platform-button--secondary'
|
||||
: 'platform-button--primary'
|
||||
} min-h-11 justify-center gap-2 text-sm disabled:cursor-not-allowed disabled:opacity-55`}
|
||||
>
|
||||
{copyState === 'success' ? (
|
||||
<Check className="h-4 w-4" />
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
getNativeAppHostRuntime,
|
||||
isWechatMiniProgramWebViewRuntime,
|
||||
navigateHostNativePage,
|
||||
openHostShare,
|
||||
openHostShareGrid,
|
||||
openWechatMiniProgramShareGridPage,
|
||||
postWechatMiniProgramMessage,
|
||||
@@ -319,6 +320,13 @@ describe('hostBridge', () => {
|
||||
await expect(setHostAppTitle({ title: ' 拼图 - 陶泥儿 ' })).resolves.toBe(
|
||||
true,
|
||||
);
|
||||
await expect(
|
||||
openHostShare({
|
||||
title: '暖灯猫街',
|
||||
message: '邀请你来玩',
|
||||
url: 'https://app.genarrative.world/works/detail?work=PZ-1',
|
||||
}),
|
||||
).resolves.toBe(true);
|
||||
|
||||
expect(invoke).toHaveBeenCalledWith('host_bridge_request', {
|
||||
request: expect.objectContaining({
|
||||
@@ -364,6 +372,16 @@ describe('hostBridge', () => {
|
||||
},
|
||||
}),
|
||||
});
|
||||
expect(invoke).toHaveBeenCalledWith('host_bridge_request', {
|
||||
request: expect.objectContaining({
|
||||
method: 'share.open',
|
||||
payload: {
|
||||
title: '暖灯猫街',
|
||||
message: '邀请你来玩',
|
||||
url: 'https://app.genarrative.world/works/detail?work=PZ-1',
|
||||
},
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
test('原生 App 宿主不支持能力时回退到 H5 路径', async () => {
|
||||
@@ -404,6 +422,13 @@ describe('hostBridge', () => {
|
||||
false,
|
||||
);
|
||||
await expect(setHostAppTitle({ title: ' ' })).resolves.toBe(false);
|
||||
await expect(
|
||||
openHostShare({
|
||||
title: '暖灯猫街',
|
||||
message: '邀请你来玩',
|
||||
url: 'https://app.genarrative.world/works/detail?work=PZ-1',
|
||||
}),
|
||||
).resolves.toBe(false);
|
||||
});
|
||||
|
||||
test('普通浏览器不处理宿主文本导出', async () => {
|
||||
|
||||
@@ -4,6 +4,7 @@ import type {
|
||||
HapticsImpactPayload,
|
||||
HostBridgeMethod,
|
||||
HostBridgeRuntimeResult,
|
||||
ShareOpenPayload,
|
||||
} from '../../../packages/shared/src/contracts/hostBridge';
|
||||
import type {
|
||||
WechatMiniProgramPayParams,
|
||||
@@ -72,6 +73,8 @@ export type HostAppTitleRequest = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
export type HostShareOpenRequest = ShareOpenPayload;
|
||||
|
||||
function isUnsupportedHostBridgeError(error: unknown) {
|
||||
return (
|
||||
error instanceof Error &&
|
||||
@@ -446,6 +449,18 @@ export function setHostShareTarget(message: unknown) {
|
||||
return true;
|
||||
}
|
||||
|
||||
export async function openHostShare(params: HostShareOpenRequest) {
|
||||
if (getHostRuntime().kind !== 'native_app') {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
return await requestNativeHostBoolean('share.open', params);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function postWechatMiniProgramMessage(message: unknown) {
|
||||
return setHostShareTarget(message);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user