$q.cordova($q.cordova)

在使用 Cordova 模式开发移动应用时，你可以在 Vue 文件中访问 $q.cordova。这是全局 cordova 对象的别名。

¥While you are developing a Mobile App with Cordova Mode, you can access $q.cordova in your Vue files. This is an alias to the global cordova Object.

Android 技巧(Android Tips)

¥Android Tips

Android 远程调试(Android remote debugging)

¥Android remote debugging

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

¥If you are debugging Android Apps, you can use Google Chrome Remote Debugging through a USB cable attached to your Android phone/tablet. It can be used for emulator too.

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

¥This way you have Chrome Dev Tools directly for your App running on the emulator/phone/table. Inspect elements, check console output, and so on and so forth.

接受许可(Accept Licenses)

¥Accept Licenses

如果你在完成 Android 构建时遇到问题，并且看到类似以下消息：

¥If you are having problems getting Android builds to finish and you see a message like:

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

如果是这种情况，你需要接受所有许可证。幸运的是，有一个工具可以实现这一点：

¥If this is the case you need to accept ALL the licenses. Thankfully there is a tool for this:

• Linux：sdkmanager --licenses

• macOS:~/Library/Android/sdk/tools/bin/sdkmanager --licenses

• Windows：%ANDROID_SDK_ROOT%/tools/bin/sdkmanager --licenses

安装 SDK 后未找到 Android SDK(Android SDK not found after installation of the SDK)

¥Android SDK not found after installation of the SDK

一些较新的基于 Debian 的操作系统（例如 ubuntu、elementary OS）在你安装并（正确）配置环境后，可能会留下 Android SDK not found.。输出可能类似于以下内容：

¥Some newer Debian-based OS (e.g. ubuntu, elementary OS) might leave you with a Android SDK not found. after you installed and (correctly) configured the environment. The output might look similar to this:

$ cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: not installed
Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME (or ANDROID_SDK_ROOT) environment variable.
Gradle: not installed
Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /home/your_user/Android/Sdk/tools/templates/gradle/wrapper
Error: Some of requirements check failed

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

¥This could have two different reasons: Usually the paths aren’t configured correctly. The first step is to verify if your paths are set correctly. This can be done by running the following commands:

$ echo $ANDROID_HOME

# or

$ echo $ANDROID_SDK_ROOT

预期输出应为类似于此 $HOME/Android/Sdk 的路径。运行后：

¥The expected output should be a path similar to this $HOME/Android/Sdk. After this run:

$ ls -la $ANDROID_HOME

# or

$ ls -la $ANDROID_SDK_ROOT

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

¥To ensure the folder contains the SDK. The expected output should contain folders like ‘tools’, ‘sources’, ‘platform-tools’, etc.

$ echo $PATH

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

¥The output should contain each one entry for the Android SDK ‘tools’-folder and ‘platform-tools’-tools. This could look like this:

/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

如果你确保路径设置正确，但 cordova requirements 仍然出现错误，你可以尝试以下修复方法：手动替换 Android Studio ‘tools’ 文件夹

¥If you ensured your paths are set correctly and still get the error on cordova requirements you can try the following fix: Replacing the Android Studio ‘tools’ folder manually

Android Studio(Android Studio)

在 Android Studio 中（如果你在 /src-cordova/platforms/android 上打开它），你将收到一条建议升级 Gradle 版本的消息。请勿升级 GRADLE，因为它会破坏 Cordova 项目。其他任何请求的升级也相同。

¥In Android Studio (if you open it on /src-cordova/platforms/android), you will be greeted with a message recommending to upgrade the Gradle version. DO NOT UPGRADE GRADLE as it will break the Cordova project. Same goes for any other requested upgrades.

如果你遇到任何 IDE 错误，请点击“文件”>“使缓存无效”，然后重新启动。

¥If you encounter any IDE errors then click on File > Invalidate caches and restart.

在 Linux 上设置设备(Setting up device on Linux)

¥Setting up device on Linux

当你尝试直接在 Android 手机/平板电脑上运行你的应用时，你可能会遇到 ?????? no permissions 问题。

¥You may bump into ?????? no permissions problem when trying to run your App directly on an Android phone/tablet.

以下是修复此问题的方法：

¥Here’s how you fix this:

# 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 的内容：

¥The content for 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 应该会发现你的设备。

¥Now running adb devices should discover your device.

构建后调试(Post-build debugging)

¥Post-build debugging

在 quasar dev 和分发完成的应用之间，有一些中间状态可以帮助调试。如果你的应用在 quasar dev 上运行良好，但在 quasar build 之后无法正常运行，你有两个选择：

¥There are intermediate states to help with debugging, between quasar dev and distributing a completed app. If your app works fine on quasar dev but is not running properly after quasar build, you have two options:

• 转到你的 src-cordova 目录和 cordova run [platform] 目录。

  ¥go to your src-cordova directory and cordova run [platform].

  • 你将运行最终版本，但你仍然可以使用 Chrome DevTools 远程调试并通过有线连接（参见上文）来检查内部 Web 内部结构。你不能在运行 .apk 文件时执行此操作。

    ¥You will be running the final build, but you can still use Chrome DevTools Remote Debugging with a wired connection (see above), to inspect the internal web internals. You cannot do this while running the .apk file.

  • 更多详情，请阅读 Cordova 平台指南 和 CLI 参考

    ¥For more detail, read the Cordova platform guide and the CLI reference

• 打开 Android Studio 并观察 Logcat

  ¥open Android Studio and watch the Logcat

  • 在这里，你可以查看与应用及其与底层 Android 操作系统交互相关的所有内容。在 Android Studio 中打开你的 Cordova 项目后，从顶部菜单转到 Run…Debug。Android Studio 将要求你确认设备或模拟器，然后部署应用。在底部窗口中，选择 Logcat。你可能需要使用过滤器来减少消息量。你应该看到 [your app id].MainActivity.onCreate() 表示应用启动，然后是与应用功能相关的各种消息。

    ¥Here you can watch everything related to the app and its interaction with the underlying Android OS. After opening your Cordova project in Android Studio, go to Run…Debug from the top menu. Android Studio will ask you to confirm the device or emulator, then will deploy the app. In the bottom window, choose Logcat You may want to use the filters to reduce the volume of messages. You should see [your app id].MainActivity.onCreate() signifying the app launch, then various messages related to your app functionality.

  • 注意：这仅适用于经验丰富的 Android 开发者。如果你的应用运行不正常，则 quasar dev 或 cordova run 更有可能暴露问题。

    ¥Note: this should be for experienced Android developers only. If your app is not functioning properly, it is much more likely that quasar dev or cordova run can reveal the issue.

iOS 技巧(iOS Tips)

¥iOS Tips

未找到设备类型(Device type not found)

¥Device type not found

如果你在运行 $ quasar dev -m cordova -T ios 时遇到此错误：

¥If you get this error while running $ quasar dev -m cordova -T ios:

No target specified for emulator. Deploying to undefined simulator
Device type "com.apple.CoreSimulator.SimDeviceType.undefined" could not be found.

这意味着你需要指定一个模拟器。根据你的 Cordova CLI 版本，以下是一些示例：

¥Then it means you need to specify an emulator. Depending on your Cordova CLI version, here are some examples:

$ quasar dev -m cordova -T ios -e iPhone-X,12.2
# or with older versions of Cordova CLI installed on your machine:
$ quasar dev -m cordova -T ios -e iPhone-X,com.apple.CoreSimulator.SimRuntime.iOS-12-2

启用现代构建(Enabling modern build)

¥Enabling modern build

默认情况下，由于 Cordova 问题，Xcode 的 iOS 现代构建版本已禁用。但是，如果你知道自己在做什么并且想要启用它，请从 /quasar.config 文件执行此操作：

¥By default, Xcode modern build for iOS is disabled due to Cordova issues. However, if you know what you are doing and you want to enable it, do so from the /quasar.config file:

cordova: {
  noIosLegacyBuildFlag: true
}

如果你想在 “build.json” 中指定构建类型，以上内容也适用。

¥The above applies also if you want to specify the build type in your “build.json”.

iOS 远程调试(iOS remote debugging)

¥iOS remote debugging

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

¥If you are debugging iOS Apps, you can use the Safari developer tools to remotely debug through a USB cable attached to your iOS phone/tablet. It can be used for emulator too.

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

¥This way you have Safari developer tools directly for your App running on the emulator/phone/table. Inspect elements, check console output, and so on and so forth.

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

¥First enable the “developer” menu option in the Settings of Safari. Then if you navigate to the “developer” menu option you will see your emulator or connected device listed near the top. From here you can open the developer tools.

状态栏和凹槽安全区(Status bar and notch safe-areas)

¥Status bar and notch safe-areas

由于手机具有状态栏和/或刘海，因此在 Cordova 上构建时，你的应用的样式可能需要进行一些调整。为了防止应用的某些部分隐藏在状态栏后面，可以使用一个全局 CSS 变量来创建 “safe-area”。此变量可以应用于应用的顶部和底部填充或边距。

¥Since mobile phones have a status bar and/or notches, your app’s styling might need some tweaking when building on Cordova. In order to prevent parts of your app from going behind the status bar, there is a global CSS variable that can be used for creating a “safe-area”. This variable can then be applied in your app’s top and bottom padding or margin.

Quasar 在 QHeader/QFooter 和 Notify 中默认支持这些 CSS 安全区域。但是，务必在多个模型上检查 Cordova 构建，以确保应用的所有用例是否都正确处理了安全区域。

¥Quasar has support for these CSS safe-areas by default in QHeader/QFooter and Notify. However it’s important to always check your Cordova build on several models to see if all cases of your app are dealing with the safe areas correctly.

如果你需要手动调整 CSS，可以使用以下方法：

¥In cases you need to manually tweak your CSS you can do so with:

/* 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。

¥Of course you can also use the above example with margin instead of padding depending on your app.

为了确保这些值仅在通过 Cordova 构建在移动设备上打开时添加，你可以检查 CSS 类 .cordova，该类由 Quasar 自动添加到 body 中。示例：

¥In order to make sure these are only added when opened on mobile via the Cordova build, you can check for the CSS class .cordova which is automatically added to the body by Quasar. Example:

body.cordova .my-selector {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

禁用 iOS 橡皮筋效果(Disabling iOS rubber band effect)

¥Disabling iOS rubber band effect

使用 Cordova 构建 iOS 应用时，如果你想要 禁用橡皮筋效果，请将以下内容添加到你的 /src-cordova/config.xml 中：

¥When building an iOS app with Cordova and you want to disable the rubber band effect, add this to your /src-cordova/config.xml:

<preference name="DisallowOverscroll" value="true" />