为什么要捐赠
API 浏览器
升级指南
NEW!
quasar.config 文件
转换为 CLI with Webpack
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资源
启动文件
预取功能
API 代理
处理 Webpack
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码检查器
测试与审计
开发移动应用
Ajax 请求
将开发服务器公开访问
Quasar CLI with Webpack - @quasar/app-webpack
Capacitor 故障排除和技巧

$q.capacitor

在使用 Capacitor 模式开发移动应用时,您可以在 Vue 文件中访问 $q.capacitor。这是一个指向全局 Capacitor 对象的别名。

Android 技巧

Android 远程调试

如果您正在调试 Android 应用,可以使用 Google Chrome 远程调试,通过 USB 数据线连接您的 Android 手机/平板电脑。此方法也适用于模拟器。

这样,您就可以直接使用 Chrome DevTools 来调试在模拟器/手机/平板电脑上运行的应用。检查元素、查看控制台输出等等。

接受许可证

如果您在尝试完成 Android 构建时遇到问题,并看到类似以下的错误消息:

> Failed to install the following Android SDK packages as some licenses have not been accepted.

如果是这种情况,您需要接受所有许可证。幸运的是,有一个工具可以帮助您完成此操作。

  • Linux: sdkmanager --licenses
  • macOS: ~/Library/Android/sdk/tools/bin/sdkmanager --licenses
  • Windows: %ANDROID_SDK_ROOT%/tools/bin/sdkmanager --licenses

安装 SDK 后找不到 Android SDK

警告

环境变量 ANDROID_HOME 已被弃用,并被 ANDROID_SDK_ROOT 替换。根据你的 Android Studio 版本,你可能需要其中一个或两个。设置两个都不会有坏处。

一些较新的基于 Debian 的操作系统(例如 ubuntu、elementary OS)可能会在安装并(正确)配置环境后出现 Android SDK 未找到。 的问题。

这可能有两个不同的原因:通常路径配置不正确。第一步是验证你的路径是否设置正确。可以通过运行以下命令来完成。

$ echo $ANDROID_HOME

# or

$ echo $ANDROID_SDK_ROOT

预期的输出应与以下路径类似 $HOME/Android/Sdk。在此之后运行

$ ls -la $ANDROID_HOME

# or

$ ls -la $ANDROID_SDK_ROOT

以确保文件夹包含 SDK。预期的输出应该包含 ‘tools’、‘sources’、‘platform-tools’ 等文件夹。

$ echo $PATH

输出应该包含 Android SDK ‘tools’ 文件夹和 ‘platform-tools’ 文件夹的每个条目。这可能看起来像这样

/home/your_user/bin:/home/your_user/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/your_user/Android/Sdk/tools:/home/your_user/Android/Sdk/platform-tools

如果你确保你的路径设置正确但仍然遇到错误,你可以尝试以下修复方法:手动替换 Android Studio ‘tools’ 文件夹

Android Studio

在 Android Studio 中(如果你在 /src-capacitor/android 上打开它),你会看到一条消息,建议你升级 Gradle 版本。不要升级 Gradle,因为它会导致 Capacitor 项目出现问题。对于任何其他请求的升级也是如此。

Gradle upgrade

如果你遇到任何 IDE 错误,请点击 File > Invalidate caches and restart。

Gradle upgrade

在 Linux 上设置设备

当尝试直接在 Android 手机/平板电脑上运行你的应用程序时,你可能会遇到 ?????? 没有权限 的问题。

以下是解决方法

# create the .rules file and insert the content
# from below this example
sudo vim /etc/udev/rules.d/51-android.rules
sudo chmod 644   /etc/udev/rules.d/51-android.rules
sudo chown root. /etc/udev/rules.d/51-android.rules
sudo service udev restart
sudo killall adb

文件 51-android.rules 的内容

SUBSYSTEM=="usb", ATTRS{idVendor}=="0bb4", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0e79", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0502", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0b05", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="413c", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0489", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="091e", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="18d1", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0bb4", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="12d1", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="24e3", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="2116", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0482", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="17ef", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="1004", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="22b8", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0409", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="2080", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0955", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="2257", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="10a9", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="1d4d", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0471", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="04da", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="05c6", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="1f53", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="04e8", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="04dd", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0fce", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="0930", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="19d2", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="1bbb", MODE="0666"

现在运行 adb devices 应该可以发现你的设备。

iOS 提示

iOS 远程调试

如果你正在调试 iOS 应用程序,可以使用 Safari 开发者工具通过连接到 iOS 手机/平板电脑的 USB 线缆进行远程调试。它也可以用于模拟器。

这样,你就可以直接在你的应用程序在模拟器/手机/平板电脑上运行时使用 Safari 开发者工具。检查元素、查看控制台输出等等。

首先在 Safari 设置中启用“开发者”菜单选项。然后,如果你导航到“开发者”菜单选项,你会看到你的模拟器或连接的设备列在顶部附近。从这里你可以打开开发者工具。

状态栏和刘海安全区域

由于手机有状态栏和/或刘海,因此在使用 Capacitor 构建时,你的应用程序的样式可能需要进行一些调整。为了防止应用程序的一部分在状态栏后面,可以使用一个全局 CSS 变量来创建“安全区域”。然后可以在应用程序的顶部和底部填充或边距中应用此变量。

Quasar 默认情况下在 QHeader/QFooter 和 Notify 中支持这些 CSS 安全区域。但是,重要的是始终在多个型号上检查你的 Capacitor 构建,以查看你的应用程序的所有情况是否都正确处理了安全区域。

如果你需要手动调整 CSS,可以使用

// for your app's header
padding-top: constant(safe-area-inset-top) // for iOS 11.0
padding-top: env(safe-area-inset-top) // for iOS 11.2 +
// for your app's footer
padding-bottom: constant(safe-area-inset-bottom)
padding-bottom: env(safe-area-inset-bottom)

当然,你也可以使用上面的示例,使用 margin 代替 padding,具体取决于你的应用程序。