Мобильная разработка в Quasar базируется на использовании платформы Apache Cordova или Capacitor. В современных проектах предпочтение чаще отдается Capacitor из-за более современной архитектуры и лучшей интеграции с нативными возможностями устройств.
Перед началом необходимо установить следующие инструменты:
Установка Quasar CLI:
npm install -g @quasar/cliПроверка установки:
quasar -vСоздание проекта:
quasar create my-app
cd my-appQuasar поддерживает два режима:
cordovacapacitorДобавление режима Capacitor:
quasar mode add capacitorПосле выполнения команды структура проекта дополняется папкой:
/src-capacitorИнициализация проекта Capacitor:
quasar build -m capacitor -T androidили для iOS:
quasar build -m capacitor -T iosПосле этого создается нативный проект внутри:
/src-capacitor/android
/src-capacitor/iosДля Android:
quasar dev -m capacitor -T androidДля iOS:
quasar dev -m capacitor -T iosПри первом запуске система предложит открыть проект в Android Studio или Xcode.
Основные директории:
src/ — основной код приложения (Vue + Quasar)src-capacitor/ — нативная частьВнутри src-capacitor:
android/ — Android-проектios/ — iOS-проектcapacitor.config.json — конфигурацияФайл:
src-capacitor/capacitor.config.jsonПример:
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "www",
"bundledWebRuntime": false
}Ключевые параметры:
/dist автоматически копируется)Сборка frontend-части:
quasar build -m capacitor -T androidПосле сборки происходит:
src-capacitor/wwwПри изменениях в коде:
npx cap syncили через Quasar:
quasar build -m capacitor -T androidСинхронизация обновляет:
Capacitor предоставляет доступ к функциям устройства:
Установка плагина:
npm install @capacitor/camera
npx cap syncИспользование в коде:
import { Camera, CameraResultType } from '@capacitor/camera'
const image = await Camera.getPhoto({
quality: 90,
resultType: CameraResultType.Uri
})Для Android:
Файл:
android/app/src/main/AndroidManifest.xmlПример:
<uses-permission android:name="android.permission.CAMERA" />Для iOS:
Файл:
ios/App/App/Info.plistПример:
<key>NSCameraUsageDescription</key>
<string>Приложению нужен доступ к камере</string>Иконки и splash screen:
npm install @capacitor/assets
npx capacitor-assets generateРесурсы размещаются в:
/src-capacitor/resources/chrome://inspectQuasar поддерживает .env файлы:
.env
.env.production
.env.androidИспользование:
process.env.API_URLОграничения WebView:
Оптимизация:
Quasar предоставляет API:
import { Platform } from 'quasar'
if (Platform.is.android) {
// Android-specific logic
}
if (Platform.is.ios) {
// iOS-specific logic
}Пример настройки:
import { StatusBar } from '@capacitor/status-bar'
StatusBar.setBackgroundColor({ color: '#ffffff' })import { App } from '@capacitor/app'
App.addListener('backButton', ({ canGoBack }) => {
if (!canGoBack) {
App.exitApp()
}
})Подходы:
Через Android Studio:
Build → Generate Signed Bundle / APK
Выбор:
Через Xcode:
Популярные возможности:
Пример вибрации:
import { Haptics } from '@capacitor/haptics'
Haptics.impact()Варианты:
Типы тестирования:
Пример инструментов:
Основные шаги:
Ключевые аспекты:
Методы улучшения:
quasar build --modernУстановка:
npm install @capacitor/push-notifications
npx cap syncРегистрация:
import { PushNotifications } from '@capacitor/push-notifications'
PushNotifications.requestPermissions().then(result => {
if (result.receive === 'granted') {
PushNotifications.register()
}
})Инструменты:
npm upd ate
npx cap syncИспользование адаптивности Quasar:
Возможные подходы:
import { App } from '@capacitor/app'
App.addListener('appStateChange', ({ isActive }) => {
if (isActive) {
// приложение активно
} else {
// свернуто
}
})import { Preferences } from '@capacitor/preferences'
await Preferences.se t({
key: 'token',
value: '123'
})
const { value } = await Preferences.get({ key: 'token' })import { Filesystem, Directory } from '@capacitor/filesystem'
await Filesystem.writeFile({
path: 'file.txt',
data: 'Hello',
directory: Directory.Documents
})Android:
iOS:
cap sync)appIdРекомендуемая структура:
boot/ — инициализация плагиновservices/ — работа с APIstores/ — состояние (Pinia)pages/ — экраныПодключение сторонних SDK:
Обновление версии:
versionCode, versionNameCFBundleShortVersionStringУчитываются:
Quasar поддерживает TypeScript:
quasar create my-app --tsПреимущества:
Возможность различать код:
if (process.env.MODE === 'capacitor') {
// мобильная логика
}При необходимости:
quasar upgradeВажно регулярно синхронизировать:
npx cap syncМетоды:
Глобальный обработчик:
app.config.errorHandler = (err) => {
console.error(err)
}Отслеживание состояния:
import { Network } from '@capacitor/network'
Network.addListener('networkStatusChange', status => {
console.log(status.connected)
})