Capacitor

于慨2026-03-21 15:58

复制代码
pnpm add @capacitor/core

pnpm add -D @capacitor/cli

npx @capacitor/cli init BitLora com.bitlora.app --web-dir ./dist
生成配置文件

最后一步输入yes/no都无所谓
复制代码
npx cap add android

npx cap add ios
复制代码
pnpm add @capacitor/android
它提供了一个名为 Bridge 的核心类，负责把您的 Vue 代码放在 Android 的 WebView 控件里全屏显示，并处理安卓底层的生命周期（比如按返回键、应用退到后台等）。
复制代码
pnpm add @capacitor/ios
它提供了一个基于苹果 WKWebView 的桥接器，让您的网页能在 iPhone 上极其流畅地运行，并且能和苹果底层的系统服务打交道。
复制代码
import { Capacitor } from '@capacitor/core'
console.log('Capacitor', Capacitor)
const platform = Capacitor.getPlatform()
console.log('platform', platform)
复制代码
import { LocalNotifications } from '@capacitor/local-notifications'  
async function testLocalNotification() {
  // H5 运行时避免报错（非原生环境不做通知）
  if (!Capacitor.isNativePlatform()) return
  // 申请权限（Android 13+ 一般需要）
  const perm = await LocalNotifications.requestPermissions()
  // perm.display 常见是 'granted' / 'denied'（不同系统表现略有差异）
  if (perm?.display === 'denied') return
  // 1）一次性通知：5 秒后弹
  await LocalNotifications.schedule({
    notifications: [
      {
        id: 1,
        title: '提醒',
        body: '到点啦',
        schedule: { at: new Date(Date.now() + 5000) },
      },
    ],
  })
}