在线建设网站 源代码,游戏网游戏平台,wordpress related posts 汉化,网站模板制作与安装教程视频文章目录 前言一、搭建 Tauri 2.0 开发环境二、创建 Tauri 2.0 项目1.创建项目2.安装依赖4. 编译运行 三、设置开发环境四、项目结构 前言
Tauri在Rust圈内成名已久#xff0c;凭借Rust的可靠性#xff0c;使用系统原生的Webview构建更小的App 以及开发人员可以灵活的使用各… 文章目录 前言一、搭建 Tauri 2.0 开发环境二、创建 Tauri 2.0 项目1.创建项目2.安装依赖4. 编译运行 三、设置开发环境四、项目结构 前言
Tauri在Rust圈内成名已久凭借Rust的可靠性使用系统原生的Webview构建更小的App 以及开发人员可以灵活的使用各种前端框架而一战成名。
然而这款年轻的框架却有着大量的问题待解决在这种情况下他竟然还出了2.0想要支持安卓和苹果端在我看来步子还是跨的挺大的有一个相当棘手的问题就是文档资料严重跟不上大量内容需要用户主动去探索并且出了问题也只能是自己解决。
不论如何既然选择了Tauri那就要解决这些麻烦。 本节内容应该是本系列文章内容的第一篇介绍如何搭建Tauri 2.0的开发环境以及创建Tauri 2.0 的项目。
Tauri 2.0目前还处于Alpha测试阶段目前有很多东西尚未完善功能极少但可以确定的是2.0版本是支持跨端应用开发的由于对Tauri期待比较高已经迫不及待想要上手体验了我其中踩到的坑以及解决思路会写到这供大家参考。
对于 Tauri 2.0 如何创建项目是一个很困难的问题官方没有提供任何文档默认创建的项目就是1.X的版本如果你想体验Tauri的最新特性那么就需要自己探索了一些Issue中提到过如何创建2.0项目但是别那么多的Issue淹没了因此这里要确定创建2.0项目的方法。希望正式发布的时候会方便点 Tauri 2.0 目前有个相当离谱的坑就是依赖问题pnpm能解决js或ts的依赖问题但是cargo只能让依赖保持最新并且还有缓存寻找问题的原因变得极为困难这就导致会出现一些莫名其妙的问题因为Tauri版本与插件版本会出现不兼容问题。 本系列文章是非线性一些要紧的内容会先发在前面一些优先级比较低的内容会发在后面最终会写一个目录帖告诉大家阅读顺序。重要程序与优先级取决于我是否有空以及是否有这样的例子。 一、搭建 Tauri 2.0 开发环境 本教程默认你已经安装基本开发环境如果你没有安装请查看往期教程。 我当前的环境如下
软件版本Nodejsv18.16.0pnpm任意rust1.70
由于Rust和Nodejs先前已有安装教程这里就不多写了本次只介绍安装PnpmPnpm是一个更加好用的包管理工具具体哪里好建议百度一下你就知道。安装较为简单
npm install pnpm -g安装没有报错就说明安装成功。
二、创建 Tauri 2.0 项目
1.创建项目
Tauri 2.0 使用pnpm创建项目的命令如下
pnpm create tauri-app --alpha官方也提供了其他方式创建项目如果你有兴趣可以去官网看看 ✈飞机票 执行那条命令以下是输入的选项 项目名Tauri-Angular前端语言Typescript / JavaScript包管理器pnpmUI模板Angular是否初始化移动端 y
以上是我翻译和操作的结果你可以适当选择或者直接使用和我一样的具体效果如下图。
2.安装依赖
按照提示应该是依次执行 cd tauri-angularpnpm install4. 编译运行
接下来直接编译运行初始项目看看效果
pnpm tauri dev命令运行后有一个较长的编译过程 编译完成后效果如下 三、设置开发环境
无论是Tauri还是Rust官方都建议使用VSCode来进行开发同时对其支持也是相当完善因此使用VSCode做开发。安装好VSCode后只需要安装以下安装插件 只要安装这三款插件即可
四、项目结构
当前项目文件结构如下 在当前目录中需要关心的基本上只有
srcAngular前端源文件夹src-tauriRust后端源文件夹
至于其他的都是程序自动维护的最好不要手动更改。 这个部分取决于你使用的是哪种前端但本质上还是前端那些东西就不再赘述了。
但有一点是值得注意的 此按钮功能的实现是前后端互动实现的因此查其代码 此时查看后端文件 在代码框中有以下两个函数
#[tauri::command]
fn greet(name: str) - String {format!(Hello, {}! Youve been greeted from Rust!, name)
}#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default().plugin(tauri_plugin_shell::init()).invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect(error while running tauri application);
}
其中greet就是前端所调用的那个函数而run是程序的入口有以下需要注意的
.plugin(tauri_plugin_shell::init())注册了shell插件必选。.invoke_handler(tauri::generate_handler![greet])注册了函数使得前端可以调用。
也就是说rust后端定义了command必须经过注册前端才可以使用代码编写顺序参考以上。 原定计划本节有安装环境配置由于环境存在问题在后续会给出。
