如何用Niva快速构建第一个跨平台桌面应用？5分钟上手教程

如何用Niva快速构建第一个跨平台桌面应用？5分钟上手教程

【免费下载链接】niva一个基于 Tauri WRY 跨端 Webview 库的超轻量极易用的跨端应用开发框架。项目地址: https://gitcode.com/gh_mirrors/ni/niva

Niva是一个基于Tauri WRY跨端Webview库的超轻量极易用的跨端应用开发框架，让开发者能够快速构建高性能的跨平台桌面应用。本教程将带你在5分钟内完成从环境搭建到应用打包的全过程，即使是新手也能轻松上手！

1. 准备工作：一键安装Niva开发环境 🚀

首先需要克隆Niva项目仓库到本地，打开终端执行以下命令：

git clone https://gitcode.com/gh_mirrors/ni/niva

Niva框架的核心代码位于crates/niva/目录，包含了窗口管理、资源处理等关键功能模块。开发工具则在packages/devtools/目录下，提供直观的可视化操作界面。

2. 新建项目：3步创建你的第一个应用 🌟

步骤1：启动Niva DevTools

进入项目目录后，运行开发工具。打开Niva DevTools后，你会看到简洁的欢迎界面，点击右上角的「新建项目」按钮开始创建应用：

图1：Niva DevTools新建项目入口，红框标注处为"新建项目"按钮

步骤2：填写项目信息

在弹出的项目配置窗口中，输入项目名称（例如"my-first-niva-app"）并选择保存路径。Niva会自动生成基础项目结构，包含index.html和niva.json配置文件。配置文件位于项目根目录，用于定义窗口尺寸、图标等应用属性。

步骤3：查看项目信息

创建完成后，DevTools会显示项目详情页面，包含调试和构建选项。此时你的项目已经准备就绪，可以开始开发了：

图2：Niva项目信息页面，显示项目路径和配置文件位置

3. 开发与调试：实时预览你的应用 ✨

启动调试模式

在项目信息页面点击「调试」按钮，Niva会自动启动本地开发服务器并打开应用窗口。默认情况下，应用会加载index.html文件，你可以在编辑器中修改代码，窗口会实时刷新：

图3：点击"调试"按钮启动实时预览

使用开发者工具

右键点击应用窗口，选择「检查」打开内置开发者工具，像调试网页一样调试你的桌面应用。你可以修改HTML/CSS样式，查看控制台输出，快速定位问题：

图4：Niva应用内置开发者工具，支持元素检查和控制台调试

4. 打包发布：生成跨平台安装包 📦

完成开发后，点击项目信息页面的「构建」按钮，Niva会根据你的操作系统生成对应的安装包。Windows平台会生成.exe文件，macOS生成.dmg，Linux生成.deb或.rpm包：

图5：点击"构建"按钮生成跨平台安装包

构建完成后，安装包会保存在项目的dist目录下。你可以直接将其分发给用户，无需额外配置环境。

5. 扩展学习：探索更多高级功能 📚

Niva提供了丰富的API和示例项目，帮助你构建更复杂的应用：

• 示例项目：packages/examples/目录包含React、Vue等框架的集成示例，可直接作为项目模板
• API文档：packages/website/docs/api/目录提供完整的API参考，涵盖窗口控制、文件操作等功能
• 自定义配置：通过修改niva.json文件，可以设置窗口大小、图标、菜单等应用属性

总结：5分钟开启跨平台开发之旅 🎉

通过本教程，你已经掌握了Niva框架的基本使用流程：从克隆仓库、新建项目，到开发调试和打包发布。Niva的超轻量设计和易用性，让跨平台桌面应用开发变得前所未有的简单。现在就动手创建你的第一个应用吧！

如果你想深入学习，可以查看官方文档或示例项目，探索更多高级功能。祝你开发顺利！

【免费下载链接】niva一个基于 Tauri WRY 跨端 Webview 库的超轻量极易用的跨端应用开发框架。项目地址: https://gitcode.com/gh_mirrors/ni/niva