Capacitor

复制代码
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) },
      },
    ],
  })
}
相关推荐
IT凝冬2 小时前
liunx 的 centos7 安装ngin
前端
赵锦川2 小时前
大屏比例缩放
前端·javascript·html
于慨2 小时前
tauri
java·服务器·前端
贼爱学习的小黄3 小时前
NC BIP参照开发
java·前端·nc
小江的记录本3 小时前
【MyBatis-Plus】MyBatis-Plus的核心特性、条件构造器、分页插件、乐观锁插件
java·前端·spring boot·后端·sql·tomcat·mybatis
光影少年3 小时前
如何进行前端性能优化?
前端·性能优化
Dxy12393102163 小时前
js如何把字符串转数字
开发语言·前端·javascript
爱写bug的野原新之助3 小时前
爬虫之补环境:加载原型链
前端·javascript·爬虫
陈广亮3 小时前
工具指南7-Unix时间戳转换工具
前端