9 个重大版本更新

0.11.0	2024年3月11日
0.10.0	2023年12月5日
0.8.0	2023年6月27日
0.5.1	2023年3月23日

在 #app 中排名第 1

每月下载量 302 次

MIT 许可证

145KB
2.5K SLoC

capacitor_bindings

电容绑定，帮助您使用 Rust 构建 Android 和 iOS 应用。

这些可以用于使用 trunk 构建框架，例如 yew、sycamore、seed 等。

这个包仍处于早期阶段。使用时请自担风险。当电容器进行重大更改时，此包也将进行重大更改以保持最新。

我已经成功使用它构建了 iOS 和 Android 应用。

在下文“设置”部分中，我解释了如何拥有单个版本的代码，并且可以构建 Web 和移动平台。

此包为一些官方电容插件提供了绑定。我打算最终支持它们全部。如果您需要特定的一个，请提交问题或拉取请求，因为添加支持相对容易。

当前支持如下

插件	支持
应用	✅
应用启动器	❌
操作表	✅
浏览器	✅
相机	✅
剪贴板	✅
Cookie	❌
设备	✅
对话框	✅
文件系统	❌
地理位置	❌
谷歌地图	❌
触觉	✅
HTTP	❌
键盘	❌
本地通知	不完整
运动	❌
网络	✅
首选项	✅
推送通知	❌
屏幕方向	❌
屏幕阅读器	✅
分享	✅
启动画面	✅
状态栏	✅
文本缩放	❌
吐司	✅

一些非官方插件也通过功能标志支持

插件	功能标志
电容器评分应用	`rate_plugin`
电容器游戏连接	`game_plugin`
Admob	`admob_plugin`

一些功能仅在特定平台上可用。如果您正在为该平台构建，请使用 web、android 或 ios 功能来访问它们。

运行示例项目以查看所有可用功能。

如何使用

use capacitor_bindings::toast::*;

async fn greet() {
    Toast::show("Hello World").await;
}

设置

先决条件

您必须完成电容器环境设置，根据需要安装 Node、Xcode 和 Android Studio。

您还必须安装 trunk

cargo install trunk

您必须有一个使用 trunk 构建的 Rust Web 应用。您可以使用此存储库中的示例应用程序进行测试。

将电容器添加到您的应用程序中

安装Capacitor

导航到包含您的index.html文件的目录

安装Capacitor

npm i @capacitor/core
npm i -D @capacitor/cli

使用调查问卷初始化您的应用程序。您将需要回答一些问题并决定应用程序的名称。请确保“Web资产目录”与您的trunk输出文件夹（通常是dist）相同

npx cap init

您可能需要在.gitignore中添加以下内容，因为一些npm文件不需要提交

## Node
node_modules
package-lock.json
package.json

根据需要添加android和ios

npm i @capacitor/android
npx cap add android

npm i @capacitor/ios
npx cap add ios

添加您想要的插件，例如

npm install @capacitor/toast

将此crate添加到您的项目中

cargo add capacitor_bindings --features web,android,ios

在需要的地方添加对插件的调用。如果您有一个yew项目，可以在您的function_component中添加以下内容

    use_effect(||yew::platform::spawn_local(capacitor_bindings::toast::Toast::show("Hello World")));

某些插件有额外的安装步骤（例如将内容添加到android manifest xml中），您需要遵循。请参阅官方插件的列表

现在您应该能够在Android或iOS上运行您的应用程序

trunk build --release
npx cap sync
npx cap run android

您还可以使用npx cap open android在Android Studio中打开项目。

在Web上启用Capacitor

您可能还希望运行应用程序的Web版本以及移动版本，即使只是为了调试。

此设置的步骤稍微复杂一些

首先，您需要生成一个capacitor.js文件。最简单的方法是将bundledWebRuntime设置在您的capacitor.config.json文件中为true。然后，您可以运行npx cap sync，它将在您的dist文件夹中创建capacitor.js。将该文件移动到您的根目录，并将bundledWebRuntime设置回false。或者，只需从本存储库中的示例应用程序中复制文件。

接下来，您需要将您正在使用的所有插件从npm模块转换为普通js文件。有一个名为pika的工具可以帮您完成这项工作。

npm install pika

npx @pika/web --dest plugins

现在，您需要更改您的index.html以包含所有这些文件，以及capacitor pwa元素

将以下内容添加到您的head部分

<script src="capacitor.js" type="text/javascript"></script>
<script
    type="module"
    src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
></script>
<script
    nomodule
    src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"
></script>

<script src="./plugins/@capacitor/toast.js" type="module"></script>

<link data-trunk rel="copy-file" href="capacitor.js" />

<link data-trunk rel="copy-dir" href="plugins" />

将<script src="./plugins/@capacitor/toast.js" type="module"></script>行替换为每个您正在使用的插件一行

如果您现在执行trunk serve，它应在浏览器中运行，并且您将能够访问插件的Web版本。这也不会破坏Android构建，但您将在Android上运行时收到有关这些.js文件不可用的错误消息。

为防止这种情况发生，并且允许您将不同的功能传递给每个版本，您应该复制您的index.html并命名为android.html。从该文件中，您可以删除您刚刚添加到head部分的全部行。

然后，为了在Android上运行，执行以下操作

trunk build --release android.html
npx cap sync
npx cap run android

功能

一些插件函数仅在特定平台上工作。例如，设置状态栏样式在Web上不起作用。

为了为适当的构建启用这些功能，请将以下内容添加到您的cargo.toml中

[features]
web =["capacitor_bindings/web"]
android = ["capacitor_bindings/android"]
ios = ["capacitor_bindings/ios"]

要仅在功能可用时使用功能，您需要在Rust代码中有一个仅在该功能启用时构建的部分。

#[cfg(feature="android")]
{
    StatusBar::set_style(Style::Light).await;
    StatusBar::set_background_color("#FFFFFF").await;
}

您可以通过在 index.html 或 android.html 的链接标签中使用 data-cargo-features 属性来控制 trunk 将构建哪些功能。

<body>
    <link rel="rust" data-trunk href="Cargo.toml" data-bin="myapp" data-cargo-features="android" />
</body>

贡献

欢迎贡献！可以发起一个拉取请求来修复错误，或者创建一个问题来讨论新功能或更改。

有关更多信息，请查看文档中的贡献部分。

许可

本项目自豪地采用MIT许可证(LICENSE 或 http://opensource.org/licenses/MIT)。

capacitor_bindings 可以根据MIT许可证分发。贡献将在同一许可证下接受。

作者

Mark Wainwright

依赖项

~1.7–4MB
~71K SLoC