@xiao-ying/miniapp-ui-browser

浏览器运行时对 xy.showToast、xy.showModal、日期时间选择、裁剪图片与二维码扫码等能力的 UI 覆盖。本包仅在浏览器运行时生效，不会注入 CSS。

使用

import '@xiao-ying/miniapp-sdk'
import '@xiao-ying/miniapp-sdk-browser'
import { installBrowserUI } from '@xiao-ying/miniapp-ui-browser'

installBrowserUI()

installBrowserUI() 会在浏览器 runtime 下替换 xy.showToast / xy.showModal / xy.pickDate / xy.pickTime / xy.cropImage / xy.scanCode / xy.signIn 的实现， 并在 uninstallBrowserUI() 时恢复原实现。

默认行为（仅浏览器运行时 + 生产构建生效）：

• 页面加载后自动触发一次 xiaoying://miniapp/<id>/open deep link
• 在页面右下角显示悬浮按钮，点击后若 1.5s 内未唤起 App，则跳转 https://m.xiaoying.life 引导下载
• 在微信内置浏览器里优先使用 wx-open-launch-app；若部分 Android 机型 2s 内仍未 ready，则提示通过右上角菜单“在浏览器中打开”
• 浏览器运行时调用 xy.signIn 会尝试唤起 App（等同点击“在APP中查看”按钮），并返回 unsupported
• 首次调用 xy.cropImage / xy.scanCode 时才会动态加载裁剪与扫码实现，避免进入首屏包
• 浏览器 UI 覆盖会处理 xy.scanCode({ imageUrl })，支持 data: / blob: / http(s): 图片二维码识别；未安装本包时 sdk-browser 只返回 unsupported
• 可选开启 appGate，在生产环境显示全屏遮罩，强制引导用户前往 App

Tailwind v4 配置

本包使用 @xiao-ying/miniapp-ui 的设计 tokens，需要启用 miniapp-ui 的 Tailwind 插件。 Toast 已迁移到 @xiao-ying/miniapp-ui 的 OverlayProvider，动效由组件内联处理；ui-browser 的 Tailwind 插件仅为兼容旧配置保留，不再注入样式。

请在 Tailwind v4 中添加 @source 扫描路径，确保构建能收集到类名：

@plugin "@xiao-ying/miniapp-ui/tailwind-plugin";
@source "../node_modules/@xiao-ying/miniapp-ui-browser/dist/**/*.{js,jsx}";
@source "../node_modules/@xiao-ying/miniapp-ui/dist/**/*.{js,jsx}";

卸载

import { uninstallBrowserUI } from '@xiao-ying/miniapp-ui-browser'

uninstallBrowserUI()

配置项

installBrowserUI({
  toast: {
    maxVisible: 5,
    durationMs: { short: 2000, medium: 3500, long: 5000 },
    placement: 'top',
    containerClassName: '...',
    className: '...'
  },
  modal: {
    queue: true,
    overlayClassName: '...',
    className: '...'
  },
  deepLink: {
    enabled: true,
    label: '在APP中查看'
  },
  appGate: {
    enabled: false,
    title: '请在App中查看',
    content: '该功能仅支持在小应App中使用，请打开小应App继续。',
    buttonLabel: '在APP中查看'
  }
})