# @frigear-nu/mobile 中文文档

规范地址：https://npmcn.com/package/%40frigear-nu/mobile/

版本：0\.6\.0
npm 元数据更新时间：2026-11-12T15:53:45.455Z
中文译文更新时间：2026-11-15T16:43:42.055Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40frigear-nu/mobile
原文对照：https://npmcn.com/package/%40frigear-nu/mobile/?lang=original
项目主页：https://docs.frigear.dev/modules/interface/mobile
源码仓库：https://github.com/Frigear-nu/frigear-nu

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：170 kB，95 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：@nuxt/ui ^4\.12\.0，@capacitor/app \>=8\.0\.0，@capacitor/cli \>=8\.0\.0，@frigear-nu/ui ^0\.2\.6，@capacitor/core \>=8\.0\.0，@capacitor/share \>=8\.0\.0，@frigear-nu/menu ^0\.3\.0，@capacitor/dialog \>=8\.0\.0，@capacitor/haptics \>=8\.0\.0，@capacitor/keyboard \>=8\.0\.0，@capacitor/status-bar \>=8\.0\.0，@capacitor/action-sheet \>=8\.0\.0，@capacitor/splash-screen \>=8\.0\.0，@capgo/capacitor-native-navigation \>=8\.0\.0
- 首次发布：2026-11-03T11:07:08.694Z
- 最新版本发布：2026-11-12T15:53:45.072Z
- 近 30 天下载量：2268（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）

## 中文简介

用于 Nuxt 的 Capacitor app shell : 本地( iOS) 和网页标签栏的标签注册, 页面标题, 安全区域, 杂交, 动作表, 深链接, Android 后键和一个设置 iOS / Android 项目的 CLI 。 与 @frigear-nu/ auth 在 c 中的签名

## 安装

```sh
npm install @frigear-nu/mobile
```

也可以使用：`pnpm add @frigear-nu/mobile`、`yarn add @frigear-nu/mobile`、`bun add @frigear-nu/mobile`

## README

# @frigear-nu/移动

Nuxt的 Capacitor app shell. 中国植物物种信息数据库. 它将 Nuxt app 变成 iOS / Android app , 并有一个配置块:

-   **一个标签注册** (单位:千美元)`mobile.tabs` + 键 `extendMobileTabs()` 从其他模块中输入本地 iOS 标签栏 (单位:千美元)`@capgo/capacitor-native-navigation`),网页标签栏和页面标题
-   iOS 上的本地导航栏和标签栏,浏览器和Android上的网页标题和标签栏,相同 `--mobile-inset-*` 两者的 CSS 变量
-   页面标题来自 `definePageMeta({ mobile: { title } })`,其他选项卡,其他应用程序名称
-   每个页面的导航器动作( 设置齿轮, 保存按钮) : iOS 上的本地导航器按钮, 其他地方的页眉按钮
-   安全区域,iOS类型尺度, `:active` 状态在 iOS 上, 不显示水龙头亮度, 切换概率, 键盘附属栏 和遵循颜色模式的状态栏
-   选入的溅射屏幕( e)`splashScreen: true`),取自本土发射画面(出自:`@capacitor/splash-screen`改为: 第一页: `MobileSplashScreen`,替换为应用程序的 `components/Mobile/SplashScreen.vue`,与 `useMobileSplash()`
-   `useNative()`: 偶然性、 动作表、 确认和与网络回落共享
-   深链接( 海关计划, 通用链接) 路由到应用程序, Android 后键
-   登录通过 [`@frigear-nu/auth`](https://npmcn.com/package/%40frigear-nu/auth) 在客户端模式中( 当 `authentication` 已配置; 应用程序选择它的守卫 [`@frigear-nu/authorization`](https://npmcn.com/package/%40frigear-nu/authorization): 无默认保护
-   页:1 `frigear-mobile` CLI:增加iOS/Android项目,并在其中注册URL计划; `doctor` 检查他们

其基础是 [`nuxt-capacitor`](https://github.com/hareland/nuxt-capacitor),写着 `capacitor.config.json` 从 您的 Nuxt 配置 .

## 设置

```bash
pnpm add @frigear-nu/mobile @nuxt/ui @capacitor/core @capacitor/app @capacitor/ios
pnpm add -D @capacitor/cli
# optional, for the features that use them:
pnpm add @capgo/capacitor-native-navigation @capacitor/haptics @capacitor/action-sheet @capacitor/dialog \
  @capacitor/share @capacitor/status-bar @capacitor/keyboard @capacitor/splash-screen
# with sign-in:
pnpm add @capacitor/browser @aparajita/capacitor-secure-storage
```

电容只链接本地的插件代码 **应用程序的依赖性**中安装插件 不仅在它依赖的软件包里. `frigear-mobile doctor` 列出缺失的.

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui', '@frigear-nu/mobile'],
  css: ['~/assets/css/main.css'],
  mobile: {
    appId: 'nu.frigear.bills', // capacitor appId, and (lowercase) the OAuth redirect scheme
    appName: 'Bills',
    tabs: [
      { id: 'home', to: '/', label: 'Upcoming', icon: 'i-lucide-calendar-clock', sfSymbol: 'calendar.badge.clock' },
      { id: 'bills', to: '/bills', label: 'Bills', icon: 'i-lucide-receipt-text', sfSymbol: 'list.bullet.rectangle' },
      { id: 'account', to: '/account', label: 'Account', icon: 'i-lucide-circle-user-round', sfSymbol: 'person.crop.circle', requiresAuth: true },
    ],
  },
  // Optional: sign in. Mobile installs @frigear-nu/auth and fills in `client.native.scheme` (from appId); the mode is
  // the app's to set.
  authentication: {
    mode: 'client',
    client: { issuer: 'https://frigear.nu', clientId: 'bills', scopes: ['openid', 'profile', 'offline_access'] },
  },
  // Guards are the app's: add `@frigear-nu/authorization` to `modules`, then for example signed in everywhere
  // (the login and callback pages stay open):
  routeRules: { '/**': { authenticated: true } },
})
```

```vue
<!-- app.vue -->
<template>
  <UApp :toaster="useMobileToaster()">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>
```

然后构建和打开应用程序:

```bash
nuxt generate                     # the static SPA in .output/public
npx frigear-mobile native         # npx cap add ios / android + URL schemes in Info.plist / AndroidManifest.xml
npx cap sync && npx cap run ios
```

建议的脚本: `"ios:run": "frigear-mobile native --if-missing && nuxt generate && cap sync ios && cap run ios"`。 。 。 .

## 选项( E)`mobile`(中文(简体) )

| 选项 | 默认 |  |
| --- | --- | --- |
| `appId` | `capacitor.config.appId` | 反向DNA标识; `capacitor.config.appId`,以及 OAuth 重定向方案(小于, `_` 作为 `-`(中文(简体) ) |
| `appName` | `capacitor.config.appName`,则 `appId` | `capacitor.config.appName` 和倒置标题 |
| `tabs` | `[]` | 见 [标签](https://npmcn.com/package/%40frigear-nu/mobile/#readme-tabs) |
| `auth` | 何时 `@frigear-nu/auth` 在客户端模式下运行 | 选项卡 `requiresAuth` 仅签名的显示 |
| `spa` | `true` | `ssr: false`: 电容为静态建筑服务 |
| `layout` | `'mobile'` | 外壳布局名称( 也) `default` 当应用程序没有的时候; `false` 没有。 此名称的应用程序布局获胜 |
| `nativeChrome` | `'ios'` | 本地导航栏和标签栏 `ios`打开 `all` 平台,或 `false`; 需求 `@capgo/capacitor-native-navigation` |
| `native.statusBar` | `true` | 状态栏文本遵循颜色模式 |
| `native.keyboardAccessoryBar` | `true` | iOS:键盘上方的 Done 栏 |
| `native.switchHaptics` | `true` | 当 a `role="switch"` 被窃听 |
| `native.backButton` | `true` | Android 后键: 关闭覆盖 +后 +后 + 第一个标签 + 最小化 |
| `appearance.iosTypeScale` | `true` | iOS 文本大小( 17pt body) |
| `appearance.tapHighlight` | `true` | 无灰色自带闪光 |
| `appearance.toasterOffset` | `true` | `useMobileToaster()` 在顶端,在导航台下方放起土司 |
| `splashScreen` | `false` | 喷出屏幕 : `true`,组件名称,或 `{ component, logo, background, minDuration, maxDuration, native }` |
| `deepLinks.schemes` | `[appId]` | 输入应用程序的自定义方案; `false` 无 |
| `deepLinks.hosts` | `[]` | `https` 通用链接/应用程序链接的主机 |
| `dev.lanHost` | `true` | 页:1 `MOBILE_LAN` 建筑,见 [设备开发](https://npmcn.com/package/%40frigear-nu/mobile/#readme-device-development) |
| `ios.allowLocalNetworking` | `true` | `NSAllowsLocalNetworking` 在 Info.plist 中 (Plain http to the LAN) 页面存档备份,存于互联网档案馆 |
| `doctor` | `true` | dev / 构建启动时警告 |

`mobile` 设置这些 `nuxt-capacitor` 默认( 您的胜负) : `capacitor.autoSync: false`, (中文(简体) ), `capacitor.config.appId` 编号 : `appName`键盘插件 `resize: 'native'` 和,与喷出屏幕的 `native` 上, SplashScreen 插件的 `launchAutoHide: false`。 。 。 .

## 标签

```ts
interface MobileTabDefinition {
  id: string            // native tab id
  to: string            // the tab's page
  label: string
  labelKey?: string     // i18n key
  title?: string        // navbar title, default: label
  titleKey?: string
  icon: string          // Nuxt UI icon of the web tab bar
  activeIcon?: string
  sfSymbol?: string     // native iOS tab
  sfSymbolActive?: string
  androidIcon?: string  // drawable, with nativeChrome: 'all'
  requiresAuth?: boolean // default: false (hidden while signed out when true)
  match?: string | string[] // default: to and to/** ('/' only itself)
  largeTitle?: boolean  // default true
  order?: number        // lower first; without it, registration order after the ordered ones
}
```

一个模块添加其标签来自 `setup()`;带有已存在的 id 的标签替换其字段(这样一个主机就可以重新标记一个) :

```ts
import { extendMobileTabs } from '@frigear-nu/mobile/utils'

extendMobileTabs(nuxt, { id: 'events', to: '/events', label: 'Events', icon: 'i-lucide-calendar', sfSymbol: 'calendar' })
```

与 `@frigear-nu/menu`,项目 `mobile.tabs` 菜单也添加(例如 `sfSymbol` 内 `meta`) (中文(简体) ).

在无效标签上构建失败( 重复或错误的 IDs, no) `to`,没有图标)并警告超过5个标签,a `to` 这不是一个页面, 加上原生铬, 标签没有 `sfSymbol`。 。 。 .

## 页 次

```ts
definePageMeta({
  mobile: {
    title: 'Bill',      // or titleKey
    largeTitle: false,
    tabBar: false,      // hide the tab bar here (true: show it on a page outside the tabs)
    navbar: false,      // no navbar / header
    tab: 'bills',       // select this tab
    back: true,         // back button (default: below a tab's root page)
    actions: [          // navbar buttons on this page (placement: 'right' by default, or 'left')
      { id: 'settings', label: 'Settings', icon: 'i-lucide-settings', sfSymbol: 'gearshape', to: '/settings' },
    ],
  },
})
```

更改或调入页面的行动: `useMobileNavbarActions(() => [{ id, label, icon, sfSymbol, disabled, onSelect }])` 内 `<script setup>` (在设置中添加,在卸载上取出,同时在保存的页面中取出) 页:1.

## 运行时间

-   `useCapacitor()`数字 : `platform` (单位:千美元)`ios` | `android` | `web`,同步地, `isNative`, (中文(简体) ), `isIos`, (中文(简体) ), `isAndroid`, (中文(简体) ), `has(plugin)`, (中文(简体) ), `load(plugin)`。 。 。 .
-   `useMobileTabs()`数字 : `tabs`, (中文(简体) ), `label(tab)`, (中文(简体) ), `title(tab)`。 。 。 .
-   `useMobileChrome()`数字 : `state` (模式、可见标签、活动标签、标签栏、页眉), `native`, (中文(简体) ), `suppress()` (隐藏标签) 栏,用于覆盖您自己的;调用返回的函数以释放。 Nuxt UI 对话框、 幻灯片和抽屉隐藏 这是他们自己的.
-   `useMobileNavbarActions(actions)`: 调用页面的导航按钮, 从一个 ref 或 getter.
-   `useNative()`数字 : `haptic('light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error' | 'selection')`, (中文(简体) ), `actionSheet({ actions })` (单位:千美元)`null` 在浏览器中:然后显示菜单), `confirm({ title, description, destructive })` (内部警报/行动表; `useConfirmDialog` 联 合 国 `@frigear-nu/ui` 或浏览器中的小型模式, `share({ title, text, url })`。 。 。 .
-   `useMobileToaster()`: 道具 `<UApp :toaster>`。 。 。 .
-   组件 : `MobileHeader` (分数) `leading`, (中文(简体) ), `trailing`, (中文(简体) ), `MobileTabBar`, (中文(简体) ), `MobileFab` (单位:千美元)`label`, (中文(简体) ), `icon`, (中文(简体) ), `to`, (中文(简体) ), `items`:一个设备上的动作表,一个浏览器的下放.
-   版式 `mobile`:页眉,页,分页栏. 用你自己来克服它 `layouts/mobile.vue`。 。 。 .
-   CSS 变量 : `--mobile-inset-top`, (中文(简体) ), `--mobile-inset-bottom`, (中文(简体) ), `--mobile-tabbar-height`· ; `<html>` 获得 `mobile-platform-<platform>`, (中文(简体) ), `mobile-chrome-native|web` 财务报告和审定财务报表 `mobile-has-tabbar`。 。 。 .
-   钩子: `mobile:deep-link` (单位:千美元)`{ url, path, preventDefault }`OAuth召喚者, `mobile:back-button` (单位:千美元)`{ canGoBack, preventDefault }`) (中文(简体) ).

## 国 际

```bash
frigear-mobile native [--platform ios|android] [--if-missing]   # cap add + URL schemes, idempotent
frigear-mobile doctor [--strict]                                # plugins and native projects
```

`native` 读取该应用程序的解析设置 `.nuxt/mobile/native.json` (运行中) `nuxt prepare` 增加: 拥有 `@capacitor/ios` 编号 : `@capacitor/android` 已安装, 还没有文件夹, 还有补丁 `ios/App/App/Info.plist` (单位:千美元)`CFBundleURLTypes` 与OAuth重定向计划和深层联系计划, `NSAllowsLocalNetworking`和 `android/app/src/main/AndroidManifest.xml` (VIEW 意向过滤器,已核实的应用链接). 运行它再次改变什么. `--if-missing` 当每个平台文件夹都存在时,立即返回.

## 设备开发

-   **实时重装** (单位:千美元)`nuxt dev --host 0.0.0.0`, (中文(简体) ), `cap run ios --live-reload`: nuxt 电容将应用程序指向dev 服务器和 `@frigear-nu/auth` (客户模式)重写 a `localhost` 发行商 / API 基础到该主机.
-   **这台机器上的服务器的电话**数字 : `MOBILE_LAN=1 nuxt generate` 重写 `localhost` 给这个 机器的局域网地址(`MOBILE_LAN=192.168.1.20` 选择它。 它从来没有适用于 `nuxt dev`失败 `MOBILE_RELEASE=1`因此,一个局域网地址 从来没有船.

## 机器人

网页标签栏和页眉默认在Android上使用(`nativeChrome: 'all'` 对当地人来说 `androidIcon` (可提取款项)。 后键关闭打开的覆盖, 返回到第一个标签, 然后最小化 android的WebView来源为 `https://localhost`: plain- http 开发服务器的内容是混合的, 因此更喜欢 现场重装.

## 常见问题

### @frigear-nu/mobile 是什么？

用于 Nuxt 的 Capacitor app shell : 本地\( iOS\) 和网页标签栏的标签注册, 页面标题, 安全区域, 杂交, 动作表, 深链接, Android 后键和一个设置 iOS / Android 项目的 CLI 。 与 @frigear-nu/ auth 在 c 中的签名

### 如何安装 @frigear-nu/mobile？

在项目目录运行 npm install @frigear-nu/mobile，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@nuxt/ui（^4\.12\.0）、@capacitor/app（\>=8\.0\.0）、@capacitor/cli（\>=8\.0\.0）、@capacitor/core（\>=8\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 frigear-mobile，可以用 npx frigear-mobile 直接运行。

### @frigear-nu/mobile 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @frigear-nu/mobile 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @frigear-nu/mobile 可以商用吗？

@frigear-nu/mobile 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @frigear-nu/mobile 的下载量有多少？

根据 npm 官方下载统计，@frigear-nu/mobile 在 2026/10/16 – 2026/11/14 这 30 天内被下载 2,268 次，日均约 76 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @frigear-nu/mobile 还在维护吗？

最新版本 0\.6\.0 发布于 2026/11/12（3 天前）；至今共发布 12 个版本，其中过去 12 个月发布了 12 个；首次发布于 2026/11/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。