@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 在客户端模式中( 当 authentication 已配置; 应用程序选择它的守卫 @frigear-nu/authorization: 无默认保护
• 页:1 frigear-mobile CLI:增加iOS/Android项目,并在其中注册URL计划; doctor 检查他们

其基础是 nuxt-capacitor,写着 capacitor.config.json 从 您的 Nuxt 配置 .

设置

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 列出缺失的.

// 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 } },
})

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

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

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(中文(简体) )

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

标签

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 的标签替换其字段(这样一个主机就可以重新标记一个) :

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。 。 。 .

页 次

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 }) (中文(简体) ).

国 际

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 开发服务器的内容是混合的, 因此更喜欢 现场重装.