网站建设策划书范文,公司网站生成二维码,溧阳企业网站建设价格,建筑网片自动清洗机文章目录 前言1. rust中调用前端2. 如何向前端发送事件3. 前端监听事件4. 执行js代码 前言
近期Tauri 2.0 rc版本发布#xff0c;2.0版本迎来第一个稳定版本#xff0c;同时官方文档也进行了更新。Tauri是一个使用Rust构建的框架#xff0c;可以让你使用前端技术来构建桌面… 文章目录 前言1. rust中调用前端2. 如何向前端发送事件3. 前端监听事件4. 执行js代码 前言
近期Tauri 2.0 rc版本发布2.0版本迎来第一个稳定版本同时官方文档也进行了更新。Tauri是一个使用Rust构建的框架可以让你使用前端技术来构建桌面应用程序。
在先前的开发工作中由于Tauri本身有整合浏览器的能力有相当多的部分是在前端能力的基础上实现的比如说web serial api,又或者web camera api,这些api在前端中调用是相当容易的但是容易使用并不代表它就一定是可靠的比如web serial api的断帧问题就无解即使你写循环去补也会出现错帧的情况对于小数据来说已经完全够用了30个字节以下对于数据量稍微多一点就要分帧处理且很混乱。所以对于这种东西最好也就是使用rust来实现了。当然tauri也并不是一直都好的tauri官方做出一堆插件这些插件很容易就可以使用相当于用户只需要关心前端开发但是这些插件有些使用的谷歌服务谷歌服务在国内无法访问所以体验也不好。这也不好那也不好究竟怎么才能行呢期待tauri以后能解决这些问题起码就目前而言调用rust能力是个比较靠谱一点的方案可惜东西需要自己写。
吐槽完毕开始进入正题。
在使用tauri进行开发时前后端通信是相当重要的可以说是贯穿应用开发的整个流程所以在此之前你需要了解tauri前后端是如何通信的。官方在更新了v2的文档后提供了如下图片很清晰轻松就能看懂。 从图上可以看出tauri的事件是可以双向传递的这就对前后端通信很有帮助一旦你理解了这个图tauri开发你就懂了一大半了。
1. rust中调用前端
根据前面图中的描述我们可以知道要想在rust中调用前端的方法要在rust中向前端发送一个事件前端监听这个事件当前端监听到这个事件后前端就可以进行相应的处理这样就实现了rust调用前端的功能。
要实现这些功能那么就需要解决以下问题
如何向前端发送事件前端如何监听事件
我们来挨个解决这些问题。
2. 如何向前端发送事件
向前端发送事件的能力是由AppHandle来提供的AppHandle是tauri的核心它提供了很多能力包括前后端通信窗口管理应用生命周期管理等等。所以要向前端发送事件就需要先获取到AppHandle。
获取AppHandle的方式很简单不需要我们手动来加很多东西只要在command中添加参数在程序执行的时候会自动注入AppHandle然后我们就可以直接使用AppHandle了。
在获取到AppHandle后可以调用emit方法来触发前端事件emit方法接受两个参数第一个参数是事件名第二个参数是事件数据事件数据可以是任意类型tauri会自动将数据转换为前端可以识别的数据类型。
以下是示例代码
#[tauri::command]
fn send_event(app_handle: tauri::AppHandle, message: String) {app_handle.emit(rust_event, message).unwrap();
}事件负载数据最好使用struct,因为官方就是这么做的struct支持序列化且代码美观易读懂。 #[derive(Clone, Serialize)]
#[serde(rename_all camelCase)]
struct DownloadStarteda {url: a str,download_id: usize,content_length: usize,
}在这里有一点是要注意的也是可能你很需要的就是触发事件分为
触发全局事件触发指定Webview的事件
上述给的例子就是触发全局事件你只要在webview中监听这个事件就可以触发这个事件如果你想要指定那么要使用emit_to方法这个方法接受三个参数第一个参数是事件名第二个参数是webview的id第三个参数是事件数据webview的id可以通过tauri::Window来获取tauri::Window可以通过tauri::WindowBuilder来创建tauri::WindowBuilder可以通过tauri::Builder来创建tauri::Builder可以通过tauri::Builder::default()来创建。
以下是示例代码
use tauri::{AppHandle, Emitter};#[tauri::command]
fn login(app: AppHandle, user: String, password: String) {let authenticated user tauri-apps password tauri;let result if authenticated { loggedIn } else { invalidCredentials };app.emit_to(login, login-result, result).unwrap();
}use tauri::{Emitter, EventTarget};#[tauri::command]
fn download(app: tauri::AppHandle) {for i in 1..100 {std::thread::sleep(std::time::Duration::from_millis(150));// emit a download progress event to all listenersapp.emit_to(EventTarget::any(), download-progress, i);// emit an event to listeners that used App::listen or AppHandle::listenapp.emit_to(EventTarget::app(), download-progress, i);// emit an event to any webview/window/webviewWindow matching the given labelapp.emit_to(updater, download-progress, i); // similar to using EventTarget::labeledapp.emit_to(EventTarget::labeled(updater), download-progress, i);// emit an event to listeners that used WebviewWindow::listenapp.emit_to(EventTarget::webview_window(updater), download-progress, i);}
}或者使用 emit_filter来指定
use tauri::{Emitter, EventTarget};#[tauri::command]
fn download(app: tauri::AppHandle) {for i in 1..100 {std::thread::sleep(std::time::Duration::from_millis(150));// emit a download progress event to the updater windowapp.emit_filter(download-progress, i, |t| match t {EventTarget::WebviewWindow { label } label main,_ false,});}
}指定窗口label需要创建多个窗口这个目前还未涉及到后面更新文章添加相关管内容多窗口管理。 3. 前端监听事件
在tauri中前端监听事件是非常容易的tauri导出了一个listen对象可以监听事件在使用的时候绑定你所需要的方法就好了。
以下是示例代码监听全局事件
import { listen } from tauri-apps/api/event;type DownloadStarted {url: string;downloadId: number;contentLength: number;
};listenDownloadStarted(download-started, (event) {console.log(downloading ${event.payload.contentLength} bytes from ${event.payload.url});
});监听指定webview的事件
import { getCurrentWebviewWindow } from tauri-apps/api/webviewWindow;const appWebview getCurrentWebviewWindow();
appWebview.listenstring(logged-in, (event) {localStorage.setItem(session-token, event.payload);
});监听事件这个对象会在应用的整个生命周期监听事件如果需要不监听了那么你可以接受监听事件的返回值执行
import { listen } from tauri-apps/api/event;const unlisten await listen(download-started, (event) {});
unlisten();如果监听的事件只需要执行一次那么只需要调用once方法即可
import { once } from tauri-apps/api/event;
import { getCurrentWebviewWindow } from tauri-apps/api/webviewWindow;once(ready, (event) {});const appWebview getCurrentWebviewWindow();
appWebview.once(ready, () {});后续还有通道channel支持大数据传输这个目前还未涉及到也没有找到应用场景如果遇到了我会写一下这里的坑。 4. 执行js代码
既然是webview,肯定少不了执行js代码的部分很期待能控制网络请求那可就太爽了通过这个一些网页自动化插件什么的很轻松就能实现了我觉得后面可以做个玩玩。
以下是示例代码
use tauri::Manager;tauri::Builder::default().setup(|app| {let webview app.get_webview_window(main).unwrap();webview.eval(console.log(hello from Rust))?;Ok(())})前端调用rust可以使用command,也可以使用event,这个内容放到下期。(你英文好的话也可以直接看官方文档。)
