跳到主要内容

Apache Cordova

Apache Cordova 是开源移动开发框架,允许使用 HTML5、CSS3 和 JavaScript 等标准 Web 技术进行跨平台开发。应用在针对各平台的封装容器中执行,通过符合标准的 API 绑定访问传感器、数据、网络状态等设备功能。

Cordova 可以将 PlayCanvas 应用封装为原生应用,发布到 iOS App Store 和 Android 的 Google Play,也可生成兼容 macOS 和 Windows 的可执行程序。

安装 Cordova​

首先按照安装说明,在电脑上安装 Cordova。

创建项目​

运行以下命令创建项目:

cordova create hello com.example.hello HelloWorld

hello 是项目目录;com.example.hello 是反向域名形式的应用标识;HelloWorld 是供用户阅读的应用名称,例如生成的应用图标所使用的名称。

因此,对于 Master Archer 这样的游戏,可以使用:

cordova create masterarcher com.playcanvas.masterarcher "Master Archer"

项目创建后,根目录中会包含 config.xml,可用于配置应用特性。例如,可以为整个应用或各平台设置自定义图标。

添加 PlayCanvas 应用​

新 Cordova 项目会在 www 文件夹中生成基础 Web 应用。删除该文件夹内的默认内容,再将 PlayCanvas 应用文件复制到这里。

如果直接使用引擎而不使用编辑器开发,请将应用文件复制到 www,确保 index.html 位于其根目录。

备注

音频资源需要转换为 Base64 才能正确加载和播放,因为 iOS 对 WebView 从本地磁盘加载文件存在限制。

推荐使用 Base64 Guru 等工具,或通过脚本自动处理。

如果应用在 PlayCanvas 编辑器中构建,可以使用官方外部工具构建并准备项目,以尽量兼容 Cordova。它会自动将音频转换为 Base64,使其能在 iOS 上加载。

该工具位于 GitHub。

先按照仓库 README 中的设置步骤操作。

再按照 README 运行 Cordova Publish 脚本命令。

工具会生成适用于 Cordova 的项目 ZIP,将内容解压到 www 根目录。

构建可执行程序​

现在即可面向 Cordova 支持的各平台构建应用。

为 iOS 构建​

iOS 构建仅可在 macOS 电脑上进行,并需要安装 Xcode,可从 Mac App Store 安装。

先为项目添加 Cordova iOS 平台,在项目根目录运行:

cordova platform add ios

确保版本为 6.0.0 或更高,因为此版本起封装容器从 UIWebView 升级为性能更好的 WKWebView,详见 Cordova 博客。

默认运行基于 Cordova 的 PlayCanvas 应用时,可能遇到跨域 HTTP 请求相关错误或异常。请在项目的 config.xml 中添加:

<platform name="ios">
<!-- Add these two lines... -->
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

<!-- ...alongside whatever already exists in this section -->
</platform>

在 iOS 上测试​

可以在模拟器或实体 iOS 设备上测试。Simulator 随 Xcode 安装,在 Mac 上模拟各种 iOS 设备。运行以下命令在模拟器中启动应用:

cordova run ios

构建生成可执行程序后,模拟器会启动并加载,效果如下:

模拟器中的 Master Archer

要在实体设备上运行:

  1. 通过 USB 将 iOS 设备连接到 Mac。

  2. 在 Xcode 中打开 platforms/ios/<my-project-name>.xcworkspace。

  3. 在项目 Target 的 Signing & Capabilities 设置中选择有效 Team,使应用在部署前完成数字签名。

  4. 在 Xcode 的 Scheme 下拉列表中选择 iOS 设备。

    Xcode Scheme 下拉菜单

  5. 单击 Run,构建、部署并在设备上运行应用。

    Xcode Run 按钮

确认应用符合预期后,即可提交到 App Store Connect。