桌面端开发(Tauri)开启第一篇

简介: 桌面端开发(Tauri)开启第一篇

Tauri:“使用 Web 前端构建更小、更快、更安全的桌面应用程序。”,使用taurl的基础环境包括Rust,Node(可选)和各操作系统中的构建工具,如:build-essential, xcode-select or C++ build tools。


前置安装(Windows)安装:


  1. 系统依赖:visualstudio.microsoft.com/zh-hans/vis…,下载后选择使用C++的桌面开发进行安装。

1.png记得卸载掉2017的版本,如果有安装的话,在安装完成后要记得重启。2.png

  1. Rust:win.rustup.rs/x86_64win.rustup.rs/i686
  2. WebView2:developer.microsoft.com/en-us/micro…

注:安装后按照提示配置环境变量,配置重启终端来检测(rustc -V)环境变量是否配置成功;


创建一个全新的Tauri-App:


     当我们要做一款全新的软件时就可以考虑使用npx create-tauri-app来直接创建,当我们要扩展现有的软件支持桌面端时就可以通过增加@tauri-apps/cli为开发依赖来做,我们先按全新的方式开进行操作。

  1. 执行创建的命令后我们按默认选择,在选择What UI recipe would you like to add?选择了我最熟悉的VueCLI

3.png

  1. 接着就是使用VueCLI创建基础的Vue项目了,选择就按自己最常用的选项即可。

4.png

  1. 初始化完后终端就提示了我们最终的启动命令,初次启动后会拉取一些依赖,需要多等待一会儿。

5.png

  1. 运行npm run tauri:serve启动程序:

6.png注:当我们遇到一些问题的时候我们可以先运行yarn tauri info来查看一下各依赖的版本信息,在去Issuse中搜索查找。


快速构建CLI:


定义终端指令的文件:src-tauri\tauri.conf.json,在tauri节点下新增cli节点。

  1. 按索引来识别参数,执行参考./app tauri.txt dest.txt
{
  "tauri": {
    "cli": {
      "description": "执行打印",
      "longDescription": "执行打印HelloWorld信息",
      "beforeHelp": "准备打印",
      "afterHelp": "打印结束",
      "args": [
        {
          "name": "input",
          "index": 1,
          "takesValue": true
        },
        {
          "name": "output",
          "index": 2,
          "takesValue": true
        }
      ]
    }
  }
}
复制代码
  1. 按名称来识别参数,执行参考./app --type foo bar./app -t foo -t bar./app --type=foo,bar
{
  "tauri": {
    "cli": {
      "description": "执行打印",
      "longDescription": "执行打印HelloWorld信息",
      "beforeHelp": "准备打印",
      "afterHelp": "打印结束",
      "args": [
        {
          "name": "type",
          "short": "t",
          "takesValue": true,
          "multiple": true,
          "possibleValues": ["foo", "bar"]
        }
      ]
    }
  }
}
复制代码
  1. 按标志来识别参数,当参数会多次出现时会用到,执行参考./app -v -v -v./app --verbose --verbose --verbose./app -vvv
{
  "tauri": {
    "cli": {
      "description": "执行打印",
      "longDescription": "执行打印HelloWorld信息",
      "beforeHelp": "准备打印",
      "afterHelp": "打印结束",
      "args": [
        {
          "name": "verbose",
                "short": "v",
                "multipleOccurrences": true
        }
      ]
    }
  }
}
复制代码
  1. 我们还可以通过配置subcommands节点来实现二级命令的配置,实现丰富的CLI功能。
    解析命令:我们通过在Vue的入口(src\main.js)处增加配置来演示,如果提示未安装@tauri-apps/api/xxx,请执行命令安装:npm install @tauri-apps/api
import { getMatches } from '@tauri-apps/api/cli'
getMatches().then((matches) => {
  console.log('[ matches ] >', matches)
})
复制代码

7.png

8.png


总结:


     通过第一个Tauri-App的创建和配置CLI命令和解析,目前看起来安装还是相对复杂,在网上搜索到的一些教程都有说要配置镜像,我是通过开源的编程辅助工具来上网的,初次使用配置CLI还挺简单,网上的对比也集中在包体积的大小和Rust的执行速度上,接着要学Tauri的话还需要学习Rust语法,加油吧XDM!!!



相关文章
|
7月前
|
小程序 前端开发 数据可视化
微信小程序云开发入门教程-全局文件介绍
微信小程序云开发入门教程-全局文件介绍
|
1月前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
3月前
|
IDE 程序员 开发工具
为 “醋” 包 “饺子”:图形化编程桌面的诞生之旅
本文介绍了一家专注无人仓业务软件的公司,为解决低代码、零代码平台后端代码难读的问题,历经三年自主研发图形化编程桌面的过程。通过精心设计“饺子馅”并采用树形结构替代传统流程图,最终推出的产品在多个项目中取得了良好效果,并于今年9月上线官网,期待用户反馈。
为 “醋” 包 “饺子”:图形化编程桌面的诞生之旅
|
4月前
|
开发工具 Android开发 iOS开发
从零开始学 Xamarin 开发,新手教程全攻略,安装环境、创建项目、设计界面,轻松开启开发之旅!
【8月更文挑战第31天】Xamarin是一种高效的跨平台移动应用开发工具,迎合了日益增长的移动应用需求。本文为Xamarin新手提供了一套详尽的入门指南,涵盖开发环境搭建、项目创建与配置、用户界面设计及功能实现等关键步骤。通过具体示例,帮助初学者快速上手Xamarin开发,开启移动应用创作之旅。
68 0
|
4月前
|
开发框架 前端开发 C#
从零开始学 Blazor 创建 Web 应用,入门指南超详细!带你轻松开启精彩的开发之旅!
【8月更文挑战第31天】在互联网时代,Web应用开发愈发重要,Blazor作为新兴框架,允许使用C#和.NET技术构建交互式Web应用,提高开发效率与代码可维护性。本文将从零开始引导读者了解Blazor的基本概念,安装设置步骤,项目创建及运行方法。通过简单的示例介绍Blazor的基本结构,包括Pages、Shared等文件夹用途,以及Program.cs文件的功能。同时,还将演示如何创建Razor页面和组件,实现数据绑定与事件处理,帮助读者快速入门Blazor开发。
255 0
|
4月前
|
数据库 Windows
超详细步骤解析:从零开始,手把手教你使用 Visual Studio 打造你的第一个 Windows Forms 应用程序,菜鸟也能轻松上手的编程入门指南来了!
【8月更文挑战第31天】创建你的第一个Windows Forms (WinForms) 应用程序是一个激动人心的过程,尤其适合编程新手。本指南将带你逐步完成一个简单WinForms 应用的开发。首先,在Visual Studio 中创建一个“Windows Forms App (.NET)”项目,命名为“我的第一个WinForms 应用”。接着,在空白窗体中添加一个按钮和一个标签控件,并设置按钮文本为“点击我”。然后,为按钮添加点击事件处理程序`button1_Click`,实现点击按钮后更新标签文本为“你好,你刚刚点击了按钮!”。
324 0
|
6月前
|
前端开发 开发工具 git
[巨详细]使用HBuilder-X启动uniapp项目教程
【6月更文挑战第6天】使用HBuilder-X启动uniapp项目教程 先用HBuilder-X打开本地的uniapp项目
782 0
|
7月前
|
安全 JavaScript 搜索推荐
【实测】记一次用windows11家庭中文版部署django+vue项目的踩坑之旅
【实测】记一次用windows11家庭中文版部署django+vue项目的踩坑之旅
|
存储 人工智能 开发工具
绝了,一句话写完一个功能,用Bito初体验。
绝了,一句话写完一个功能,用Bito初体验。
345 0
|
JSON 缓存 NoSQL
重新更新VScode配置(C/C++)——负责任、手把手教学,亲测有效
对于C/C++的编程环境来说,目前我们所接触到的、所用到的,除了vim以外,大众用的、尤其是学生群体用的主要是有三种。
1372 1
重新更新VScode配置(C/C++)——负责任、手把手教学,亲测有效