使用Tauri开发桌面应用

本文是对视频 Tauri入门教程[1]的学习与记录

Tauri官网[2]


对 node版本有要求

alt

创建项目及目录介绍:

alt

项目的目录结构如下

alt

可以安装推荐的插件

alt

执行npm run tauri build出错,根据 https://github.com/tauri-apps/tauri/issues/7430

执行 yarn add -D @tauri-apps/cli && yarn install

也有其他办法, 可参考[3]

然后再执行npm run tauri build就可以了~

alt

跟后端无关的调试, 可以直接 npm run dev


页面调用Rust方法


前端使用invoke,调用Rust

这样算前后端不分离的,不需要Rust提供接口,Vue去调.

直接就能直接Rust的方法

以浮点型计算为例,如果前端计算,精度相差非常大(JS的问题),一般交给后端做 (这里其实描述有误)

Greet.Vue修改为:

<script setup lang="ts">
import { onMounted } from "vue";

//const count = ref(0)
onMounted(() => {
  const a = 0.07;
  const b = 100;
  console.log(a * b);

})
</script>

<template></template>

<style scoped></style> 
alt

把a,b这两个参数传给rust, 然后返回一个计算好的方法.

相关文档: https://tauri.app/v1/guides/features/command


可用的Greet.Vue:

<script setup lang="ts">
import { onMounted } from "vue";

// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri';

defineProps<{ meg: string }>();



//const count = ref(0)
onMounted(() => {
  //  console.log(a * b);
})



const myCustomCommand = () => {
  const a = 0.07;
  const b = 100;
  // Invoke the command
  invoke("my_custom_command", { a, b }).then((message) => console.log(message)); // .then((message 接收结果
};

</script>




<template>
  <button @click="myCustomCommand">点此按钮触发Rust方法</button>
</template>

<style scoped></style>

main.rs:

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
// #[tauri::command]
// fn greet(name: &str) -> String {
//     format!("Hello, {}! You've been greeted from Rust!", name)
// }

#[tauri::command]
fn my_custom_command(a: f32, b: f32) ->f32 {
    println!("开始计算");
    let c = a*b;
    println!("值为:{}",c);
    c
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![my_custom_command])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

alt

可能会有同步和异步的情况,所以为了更易读,可以这样改写前端代码:

const myCustomCommand = async () => {
  const a = 0.07;
  const b = 100;
  // Invoke the command
  let c = await invoke("my_custom_command", { a, b });
  console.log(c);
};

效果一致


事件系统


https://tauri.app/v1/guides/features/events

可以把事件 理解成一个通道,可以前端给后端发消息,也可以后端给前端发消息.

invoke只能前端主动调用后端,类似http. 事件系统类似websocket,后端也可以主动给前端发消息,双向的

没这个特性的话,有的场景下就只能前端不停轮询,不够优雅

https://tauri.app/v1/api/js/event


可用的代码:

Greet.vue:

<script setup lang="ts">
import { onMounted } from "vue";

// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri';

import {  listen } from '@tauri-apps/api/event'

defineProps<{ meg: string }>();



//const count = ref(0)
onMounted(() => {
  //  console.log(a * b);
})



const myCustomCommand = async () => {
  const a = 0.07;
  const b = 100;
  // Invoke the command
  let c = await invoke("my_custom_command", { a, b });
  console.log(c);
};

const initProcess = async () => {

  await invoke("init_process"); // 注意方式,下划线

  await listen<string>("event-name", (event) => {
    console.log(event);
  });

};

</script>



<template>
  <button @click="myCustomCommand">点此按钮触发Rust方法</button>
  <button @click="initProcess">启动事件,后端主动请求前端</button>
</template>

<style scoped></style>

main.rs:

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
// #[tauri::command]
// fn greet(name: &str) -> String {
//     format!("Hello, {}! You've been greeted from Rust!", name)
// }

#[tauri::command]
fn my_custom_command(a: f32, b: f32) ->f32 {
    println!("开始计算");
    let c = a*b;
    println!("值为:{}",c);
    c
}



use tauri::{Manager, Window};

// the payload type must implement `Serialize` and `Clone`.
#[derive(Clone, serde::Serialize)]
struct Payload {
  message: String,
}

// init a background process on the command, and emit periodic events only to the window that used the command
#[tauri::command]
fn init_process(window: Window) {
  
  println!("到了事件处理方法里面");
  std::thread::spawn(move || {
    loop {
      window.emit("event-name", Payload { message: "Tauri is awesome!".into() }).unwrap();
    }
  });
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![my_custom_command, init_process]) // 要记得把init_process加进来,不然会报错 `Unhandled Promise Rejection: command init_process not found`
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
alt

会不停请求,加一个sleep 500毫秒

在rust代码中修改init_process:

use std::{thread,time};

// init a background process on the command, and emit periodic events only to the window that used the command
#[tauri::command]
fn init_process(window: Window) {

  println!("到了事件处理方法里面");
  std::thread::spawn(move || 
    loop {
      window.emit("event-name", Payload { message: "Tauri is awesome!".into() }).unwrap();
      thread::sleep(time::Duration::from_millis(500));
    }
  );
}

http接口请求


如果只是单机软件,压根不需要该功能~

https://tauri.app/v1/api/js/http

实测好用的四个有免费API接口的网站[4]

这个还可以 https://api.qqsuu.cn/

找一个免费公开的天气接口[5]作为试验

申请apikey

天气接口要花钱,换一个,用 网站TDK描述查询 查询网站标题关键词描述等等

alt

例如 https://api.qqsuu.cn/api/dm-info?url=https://dashen.tech&apiKey=xxxxxxxx

alt 
{
    "code": 200,
    "msg": "查询成功",
    "url": "dashen.tech",
    "title": "清澄秋爽|苹果树下的思索者书写是对思维的缓存",
    "description": "崔某人的碎碎念,通才基础上的专才",
    "keywords": "mysql,golang,算法"
}

修改tauri.conf.json 文件allowlist为:

   "allowlist": {
      "all": true,
      "http": {
        "scope": ["https://api.qqsuu.cn/*"]
      },
      "shell": {
        "all": false,
        "open": true
      }
    },

否则会报错

alt

这样就可以调用 https://api.qqsuu.cn/*下面所有的接口了~

参考文档上的这段:

import { fetch } from '@tauri-apps/api/http';
const response = await fetch('http://localhost:3003/users/2', {
  method: 'GET',
  timeout: 30,
});

Greet.vue相应修改为:

<script setup lang="ts">
import { onMounted } from "vue";
// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri';
import {  listen } from '@tauri-apps/api/event'

import { fetch } from '@tauri-apps/api/http';


defineProps<{ meg: string }>();



//const count = ref(0)
onMounted(() => {
  //  console.log(a * b);
})



const myCustomCommand = async () => {
  const a = 0.07;
  const b = 100;
  // Invoke the command
  let c = await invoke("my_custom_command", { a, b });
  console.log(c);
};

const initProcess = async () => {

  await invoke("init_process"); // 注意方式,下划线

  await listen<string>("event-name", (event) => {
    console.log(event);
  });

};


const response = async ()=> {
 let data =  await fetch('https://api.qqsuu.cn/api/dm-info?url=https://dashen.tech&apiKey=xxxxxxx', {
  method: 'GET',
  timeout: 30,
});
console.log(data);
}



</script>



<template>
  <button @click="myCustomCommand">点此按钮触发Rust方法</button>
  <button @click="initProcess">启动事件,后端主动请求前端</button>
  <button @click="response">获取网站信息</button>
</template>

<style scoped></style>

alt

文件系统 && 将本地文件转为url


对文件的读写删改等

文档: https://tauri.app/v1/api/js/fs


tauri.conf.json默认开启文件系统相关的权限,无需修改了

但需要在allowlist新增:

     "fs": {
       "scope": ["$APPDATA/databases/*"]
     }

其中 $APPCONFIG, $APPDATA, $APPLOCALDATA, $APPCACHE, $APPLOG, $AUDIO, $CACHE, $CONFIG, $DATA, $LOCALDATA, $DESKTOP, $DOCUMENT, $DOWNLOAD, $EXE, $FONT, $HOME, $PICTURE, $PUBLIC, $RUNTIME, $TEMPLATE, $VIDEO, $RESOURCE, $APP, $LOG, $TEMP. 这些变量,都指的是哪个路径,详见文档


在Tauri中，一些特殊的变量具有特殊的含义，代表了系统的某些目录或者文件夹。具体来说：

  • $APPCONFIG: 应用程序的配置文件。
  • $APPDATA: 应用程序的数据文件。
  • $APPLOCALDATA: 应用程序的本地数据文件。
  • $APPCACHE: 应用程序的缓存文件。
  • $APPLOG: 应用程序的日志文件。
  • $AUDIO: 系统音频文件。
  • $CACHE: 系统缓存文件。
  • $CONFIG: 系统配置文件。
  • $DATA: 系统数据文件。
  • $LOCALDATA: 系统本地数据文件。
  • $DESKTOP: 系统桌面文件。
  • $DOCUMENT: 用户文档文件。
  • $DOWNLOAD: 下载文件夹。
  • $EXE: 可执行文件。
  • $FONT: 系统字体文件。
  • $HOME: 用户主目录。
  • $PICTURE: 图片文件夹。
  • $PUBLIC: 公共文件夹。
  • $RUNTIME: 运行时文件夹。
  • $TEMPLATE: 模板文件夹。
  • $VIDEO: 视频文件。
  • $RESOURCE: 资源文件夹。
  • $APP: 应用程序文件夹。
  • $LOG: 日志文件夹。
  • $TEMP: 临时文件夹。

(前端提供的api, 不能使用绝对路径.如果需要使用Rust)


下面是一个用前端接口读取文件的示例:

此处修改为

   "fs": {
        "scope": ["$RESOURCE/*"]
      },

在src-tauri目录下新建一个img文件夹,拷贝几张图片过去

Unhandled Promise Rejection: path: /Users/fliter/tauri-app/src-tauri/target/debug/avatar.png: No such file or directory (os error 2)

如果这个目录下有一张叫avatar.png的图片,那可以以字节数组的形式读取出来.


这种方式还是比较麻烦,还支持 将本地文件转为url

https://tauri.app/v1/api/js/tauri

将tauri.conf.json文件中的security改为

"csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"

同时需要在allowlist下新增

   "protocol": {
        "asset": true,
        "assetScope": ["$RESOURCE/*"]
      },

Greet.vue:

<script setup lang="ts">
import { ref, onMounted } from "vue";
// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri';
import {  listen } from '@tauri-apps/api/event'

import { fetch } from '@tauri-apps/api/http';

import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

import { appDataDir, desktopDir,join } from '@tauri-apps/api/path';
import { convertFileSrc } from '@tauri-apps/api/tauri';


defineProps<{ meg: string }>();



const imgSrc = ref();

//const count = ref(0)
onMounted(() => {
  //  console.log(a * b);
})



const myCustomCommand = async () => {
  const a = 0.07;
  const b = 100;
  // Invoke the command
  let c = await invoke("my_custom_command", { a, b });
  console.log(c);
};

const initProcess = async () => {

  await invoke("init_process"); // 注意方式,下划线

  await listen<string>("event-name", (event) => {
    console.log(event);
  });

};


const response = async ()=> {
 let data =  await fetch('https://api.qqsuu.cn/api/dm-info?url=https://dashen.tech&apiKey=xxxxxxx', {
  method: 'GET',
  timeout: 30,
});
console.log(data);
}


const readImg = async () => {

// Read the image file in the `$RESOURCEDIR/avatar.png` path
const contents = await readBinaryFile('avatar.png', { 
  dir: BaseDirectory.Resource });

  console.log(contents);
}


const readImgTwo = async () => {


//const appDataDirPath = await appDataDir();
const desktopDirPath = await desktopDir(); // 需要在上面的import中导入

//console.log(appDataDirPath)
console.log(desktopDirPath);
const filePath = await join(desktopDirPath, 'c.png');
const assetUrl = convertFileSrc(filePath);

imgSrc.value = assetUrl;


}


</script>



<template>
  <button @click="myCustomCommand">点此按钮触发Rust方法</button>
  <button @click="initProcess">启动事件,后端主动请求前端</button>
  <button @click="response">获取网站信息</button>
  <button @click="readImg">读取图片</button>
  <button @click="readImgTwo">读取图片2</button>

  <img :src="imgSrc" alt="">
</template>

<style scoped></style>
alt

这是因为allowlist里面写的是$RESOURCE/,但代码里用的是desktopDir,所以需要将assetScope设置为"$DESKTOP/*" (或增加"$DESKTOP/*"),即

"assetScope": ["$RESOURCE/*","$DESKTOP/*"]
alt

dialog对话框


https://tauri.app/v1/api/js/dialog

需要启用部分api

但因为allowlist写了"all": true,,所以~


以这个example为例

import { ask } from '@tauri-apps/api/dialog';
const yes = await ask('Are you sure?', 'Tauri');
const yes2 = await ask('This action cannot be reverted. Are you sure?', { title: 'Tauri', type: 'warning' });

alt

Greet.vue:

<script setup lang="ts">
import { ref, onMounted } from "vue";
// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri';
import { listen } from '@tauri-apps/api/event'

import { fetch } from '@tauri-apps/api/http';

import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

import { desktopDir, join } from '@tauri-apps/api/path';
import { convertFileSrc } from '@tauri-apps/api/tauri';
import { ask } from '@tauri-apps/api/dialog';


defineProps<{ meg: string }>();



const imgSrc = ref();

//const count = ref(0)
onMounted(() => {
  //  console.log(a * b);
})



const myCustomCommand = async () => {
  const a = 0.07;
  const b = 100;
  // Invoke the command
  let c = await invoke("my_custom_command", { a, b });
  console.log(c);
};

const initProcess = async () => {

  await invoke("init_process"); // 注意方式,下划线

  await listen<string>("event-name", (event) => {
    console.log(event);
  });

};


const response = async () => {
  let data = await fetch('https://api.qqsuu.cn/api/dm-info?url=https://dashen.tech&apiKey=xxxxxxxx', {
    method: 'GET',
    timeout: 30,
  });
  console.log(data);
}


const readImg = async () => {

  // Read the image file in the `$RESOURCEDIR/avatar.png` path
  const contents = await readBinaryFile('avatar.png', {
    dir: BaseDirectory.Resource
  });

  console.log(contents);
}


const readImgTwo = async () => {


  //const appDataDirPath = await appDataDir();
  const desktopDirPath = await desktopDir(); // 需要在上面的import中导入

  //console.log(appDataDirPath)
  console.log(desktopDirPath);
  const filePath = await join(desktopDirPath, 'c.png');
  const assetUrl = convertFileSrc(filePath);

  imgSrc.value = assetUrl;

}

const dialogOne = async () => {
  const yes = await ask('Are you sure?', 'Tauri');
  console.log(yes);

}


const dialogTwo = async () => {
  const yes2 = await ask('This action cannot be reverted. Are you sure?', { title: 'Tauri', type: 'warning' });


  console.log(yes2);

}


</script>

<template>
  <button @click="myCustomCommand">点此按钮触发Rust方法</button>
  <button @click="initProcess">启动事件,后端主动请求前端</button>
  <button @click="response">获取网站信息</button>
  <button @click="readImg">读取图片</button>
  <button @click="readImgTwo">读取图片2</button>
  <button @click="dialogOne">弹框1</button>
  <button @click="dialogTwo">弹框2</button>

  <img :src="imgSrc" alt="">
</template>

<style scoped></style>

再以选择文件夹为例:

import { open } from '@tauri-apps/api/dialog';
import { appDir } from '@tauri-apps/api/path';
// Open a selection dialog for directories
const selected = await open({
  directory: true,
  multiple: true,
  defaultPath: await appDir(),
});
if (Array.isArray(selected)) {
  // user selected multiple directories
} else if (selected === null) {
  // user cancelled the selection
} else {
  // user selected a single directory
}
alt

Greet.vue:

<script setup lang="ts">
import { ref, onMounted } from "vue";
// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri';
import { listen } from '@tauri-apps/api/event'

import { fetch } from '@tauri-apps/api/http';

import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

import { desktopDir, join } from '@tauri-apps/api/path';
import { convertFileSrc } from '@tauri-apps/api/tauri';
import { ask } from '@tauri-apps/api/dialog';
import { open } from '@tauri-apps/api/dialog';
import { appDir } from '@tauri-apps/api/path';


defineProps<{ meg: string }>();



const imgSrc = ref();

//const count = ref(0)
onMounted(() => {
  //  console.log(a * b);
})



const myCustomCommand = async () => {
  const a = 0.07;
  const b = 100;
  // Invoke the command
  let c = await invoke("my_custom_command", { a, b });
  console.log(c);
};

const initProcess = async () => {

  await invoke("init_process"); // 注意方式,下划线

  await listen<string>("event-name", (event) => {
    console.log(event);
  });

};


const response = async () => {
  let data = await fetch('https://api.qqsuu.cn/api/dm-info?url=https://dashen.tech&apiKey=xxxxxxx', {
    method: 'GET',
    timeout: 30,
  });
  console.log(data);
}


const readImg = async () => {

  // Read the image file in the `$RESOURCEDIR/avatar.png` path
  const contents = await readBinaryFile('avatar.png', {
    dir: BaseDirectory.Resource
  });

  console.log(contents);
}


const readImgTwo = async () => {


  //const appDataDirPath = await appDataDir();
  const desktopDirPath = await desktopDir(); // 需要在上面的import中导入

  //console.log(appDataDirPath)
  console.log(desktopDirPath);
  const filePath = await join(desktopDirPath, 'c.png');
  const assetUrl = convertFileSrc(filePath);

  imgSrc.value = assetUrl;

}

const dialogOne = async () => {
  const yes = await ask('Are you sure?', 'Tauri');
  console.log(yes);

}


const dialogTwo = async () => {
  const yes2 = await ask('This action cannot be reverted. Are you sure?', { title: 'Tauri', type: 'warning' });


  console.log(yes2);

}



const selectDir = async () => {
  // Open a selection dialog for directories
const selected = await open({
  directory: true,
  multiple: true,
  defaultPath: await appDir(),
});
if (Array.isArray(selected)) {
  // user selected multiple directories
} else if (selected === null) {
  // user cancelled the selection
} else {
  // user selected a single directory
}

console.log(selected);
}


</script>



<template>
  <button @click="myCustomCommand">点此按钮触发Rust方法</button>
  <button @click="initProcess">启动事件,后端主动请求前端</button>
  <button @click="response">获取网站信息</button>
  <button @click="readImg">读取图片</button>
  <button @click="readImgTwo">读取图片2</button>
  <button @click="dialogOne">弹框1</button>
  <button @click="dialogTwo">弹框2</button>
  <button @click="selectDir">选择文件</button>

  <img :src="imgSrc" alt="">
</template>

<style scoped></style>

自定义窗口及配置


https://tauri.app/v1/guides/features/window-customization

复制css代码到<style>标签之间

.titlebar {
  height: 30px;
  background: #329ea3;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
.titlebar-button:hover {
  background: #5bbec3;
}

复制html代码到 标签之间 

<div data-tauri-drag-region class="titlebar">
  <div class="titlebar-button" id="titlebar-minimize">
    <img
      src="https://api.iconify.design/mdi:window-minimize.svg"
      alt="minimize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-maximize">
    <img
      src="https://api.iconify.design/mdi:window-maximize.svg"
      alt="maximize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-close">
    <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
  </div>
</div>

js段引入 import { appWindow } from '@tauri-apps/api/window'

修改html部分的代码,增加一个 @click="minimize()",使其能够对得上


Greet.vue 完整代码:

<script setup lang="ts">
import { ref, onMounted } from "vue";
// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri';
import { listen } from '@tauri-apps/api/event'

import { fetch } from '@tauri-apps/api/http';

import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

import { desktopDir, join } from '@tauri-apps/api/path';
import { convertFileSrc } from '@tauri-apps/api/tauri';
import { ask } from '@tauri-apps/api/dialog';
import { open } from '@tauri-apps/api/dialog';
import { appDir } from '@tauri-apps/api/path';
import { appWindow } from '@tauri-apps/api/window'


defineProps<{ meg: string }>();



const imgSrc = ref();

//const count = ref(0)
onMounted(() => {
  //  console.log(a * b);
})



const myCustomCommand = async () => {
  const a = 0.07;
  const b = 100;
  // Invoke the command
  let c = await invoke("my_custom_command", { a, b });
  console.log(c);
};

const initProcess = async () => {

  await invoke("init_process"); // 注意方式,下划线

  await listen<string>("event-name", (event) => {
    console.log(event);
  });

};


const response = async () => {
  let data = await fetch('https://api.qqsuu.cn/api/dm-info?url=https://dashen.tech&apiKey=xxxxxxx', {
    method: 'GET',
    timeout: 30,
  });
  console.log(data);
}


const readImg = async () => {

  // Read the image file in the `$RESOURCEDIR/avatar.png` path
  const contents = await readBinaryFile('avatar.png', {
    dir: BaseDirectory.Resource
  });

  console.log(contents);
}


const readImgTwo = async () => {


  //const appDataDirPath = await appDataDir();
  const desktopDirPath = await desktopDir(); // 需要在上面的import中导入

  //console.log(appDataDirPath)
  console.log(desktopDirPath);
  const filePath = await join(desktopDirPath, 'c.png');
  const assetUrl = convertFileSrc(filePath);

  imgSrc.value = assetUrl;

}

const dialogOne = async () => {
  const yes = await ask('Are you sure?', 'Tauri');
  console.log(yes);

}


const dialogTwo = async () => {
  const yes2 = await ask('This action cannot be reverted. Are you sure?', { title: 'Tauri', type: 'warning' });


  console.log(yes2);

}



const selectDir = async () => {
  // Open a selection dialog for directories
  const selected = await open({
    directory: true,
    multiple: true,
    defaultPath: await appDir(),
  });
  if (Array.isArray(selected)) {
    // user selected multiple directories
  } else if (selected === null) {
    // user cancelled the selection
  } else {
    // user selected a single directory
  }

  console.log(selected);
}



const minimize = () => {
  appWindow.minimize();
};


const maximize = () => {
  appWindow.toggleMaximize();
};


const close = () => {
  appWindow.close();
};

</script>



<template>
  <div data-tauri-drag-region class="titlebar">
    <div @click="minimize()"  class="titlebar-button" id="titlebar-minimize">
      <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
    </div>
    <div @click="maximize()" class="titlebar-button" id="titlebar-maximize">
      <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
    </div>
    <div @click="close()" class="titlebar-button" id="titlebar-close">
      <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
    </div>
  </div>

  <button @click="myCustomCommand">点此按钮触发Rust方法</button>
  <button @click="initProcess">启动事件,后端主动请求前端</button>
  <button @click="response">获取网站信息</button>
  <button @click="readImg">读取图片</button>
  <button @click="readImgTwo">读取图片2</button>
  <button @click="dialogOne">弹框1</button>
  <button @click="dialogTwo">弹框2</button>
  <button @click="selectDir">选择文件</button>

  <img :src="imgSrc" alt="">
</template>



<style scoped>
.titlebar {
  height: 30px;
  background: #329ea3;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}

.titlebar-button:hover {
  background: #5bbec3;
}
</style>


alt

尝试去掉左侧的按钮.

需要修改窗口的配置 https://tauri.app/v1/api/config#windowconfig


搜索 decorations, Whether the window should have borders and bars., 默认是true

在tauri.conf.json的windows部分新增 "decorations":false

   "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "tauri-app",
        "width": 800,
        "height": 600,
        "decorations":false
      }
alt

这样左上方的按钮就没有了


一些其他配置:

X,Y为距离左上方(0,0)坐标的偏移值


系统托盘


https://tauri.app/v1/guides/features/system-tray

把

 "systemTray": {
      "iconPath": "icons/icon.png",
      "iconAsTemplate": true
    }

复制到tauri.conf.json最后

Mac上和Windows上应该有较大差异,先略过


开屏界面


像Jetbrains全家桶,PS等软件,打开时都有个开屏界面 (我猜很大原因是软件较大,启动耗时较长,加个开屏界面可以看上去消减用户的等待时间)

https://tauri.app/v1/guides/features/splashscreen

要先把主界面隐藏,然后添加一个(开屏)界面的配置

"windows": [
  {
    "title": "Tauri App",
    "width": 800,
    "height": 600,
    "resizable": true,
    "fullscreen": false,
+   "visible": false // Hide the main window by default
  },
  // Add the splashscreen window
+ {
+   "width": 400,
+   "height": 200,
+   "decorations": false,
+   "url": "splashscreen.html",
+   "label": "splashscreen"
+ }
]

即

    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "tauri-app",
        "width": 800,
        "height": 600,
        "decorations": false,
        "visible": false // 隐藏主界面
      },
      {
        "width": 400,
        "height": 200,
        "decorations": false,
        "url": "splashscreen.html",
        "label": "splashscreen"
      }
    ]

label 为界面标识,url 为界面路径(一个html文件,可以用vue去写). 目前读取的目录是在"distDir": "../dist",可以在public目录下创建这个html文件,因为打包时会包含进去

在public下新建splashscreen.html文件:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>开屏界面</div>
</body>

</html>

需要用到Rust了(其实使用前端API也能做到)

等Rust代码执行完后,关闭开屏界面,打开主界面


在main.rs中新增: 
// Create the command:
// This command must be async so that it doesn't run on the main thread.
#[tauri::command]
async fn close_splashscreen(window: Window) {
  // Close splashscreen
  window.get_window("splashscreen").expect("no window labeled 'splashscreen' found").close().unwrap();
  // Show main window
  window.get_window("main").expect("no window labeled 'main' found").show().unwrap();
}

同时将close_splashscreen加入到tauri::Builder::default()的数组中,

完整rust代码:

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
// #[tauri::command]
// fn greet(name: &str) -> String {
//     format!("Hello, {}! You've been greeted from Rust!", name)
// }

use std::{thread,time};

#[tauri::command]
fn my_custom_command(a: f32, b: f32) ->f32 {
    println!("开始计算");
    let c = a*b;
    println!("值为:{}",c);
    c
}



use tauri::{Manager, Window};

// the payload type must implement `Serialize` and `Clone`.
#[derive(Clone, serde::Serialize)]
struct Payload {
  message: String,
}

// init a background process on the command, and emit periodic events only to the window that used the command
#[tauri::command]
fn init_process(window: Window) {

  println!("到了事件处理方法里面");
  std::thread::spawn(move || 
    loop {
      window.emit("event-name", Payload { message: "Tauri is awesome!".into() }).unwrap();
      thread::sleep(time::Duration::from_millis(500));
    }
  );
}

// Create the command:
// This command must be async so that it doesn't run on the main thread.
#[tauri::command]
async fn close_splashscreen(window: Window) {
  // Close splashscreen
  window.get_window("splashscreen").expect("no window labeled 'splashscreen' found").close().unwrap();
  // Show main window
  window.get_window("main").expect("no window labeled 'main' found").show().unwrap();
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![my_custom_command, init_process,close_splashscreen]) // 要记得把init_process加进来,不然会报错 `Unhandled Promise Rejection: command init_process not found`
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

再之后需要前端去调用这个Rust方法


为了能看到效果,需要加一个定时器

Greet.vue中:

onMounted(() => {
  //  console.log(a * b);

  setTimeout(() => {
    invoke('close_splashscreen')
  }, 3000)

})

执行 npm run tauri dev,

alt

而后会进入到主界面


多窗口


https://tauri.app/v1/guides/features/multiwindow


  1. 静态窗口: 打开软件时直接弹出两个窗口(这种很少见)

  2. 动态窗口

还是写一个按钮事件来触发


const newWindow = () => {

const webview = new WebviewWindow('theUniqueLabel', {
  url: 'test.html',
})
// since the webview window is created asynchronously,
// Tauri emits the `tauri://created` and `tauri://error` to notify you of the creation response
webview.once('tauri://created', function () {
  // webview window successfully created 窗口创建成功时触发的逻辑
  console.log("创建成功")
})
webview.once('tauri://error', function (e) {
  // an error occurred during webview window creation 窗口创建失败时触发的逻辑
  console.log("创建失败",e)
})
}

// ...

 <button @click="newWindow">新建窗口</button>

另外在public下新建一个test.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>新建窗口</div>
</body>

</html>
alt

现在想要实现打开新窗口时,隐藏原来的主界面. 实现办法是点击按钮触发创建新窗口操作时,先把主界面隐藏掉,等新窗口创建成功,再把主界面关掉 (如果在新窗口没有创建出来前就直接close,直接退出程序了)

可以通过label指定具体的页面

还可以通过在json文件中,配置相应的参数

如:

  {
      "width": 200,
      "height": 100,
      "decorations": false,
      "url": "test.html",
      "label": "test",
      "visible": false
    }
alt

WiX打包


Windows系统打包: https://tauri.app/v1/guides/building/windows 是否支持win7需要特殊配置

Mac系统打包: https://tauri.app/v1/guides/building/macos


我主要试一下Mac下的打包

npm run tauri build 或 cargo tauri build

npm run tauri build

> tauri-app@0.0.0 tauri
> tauri build

       Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

根据 [Tauri的安装、启动、打包和很多用例(第一部分)](https://blog.csdn.net/qq_39124701/article/details/129015210 "Tauri的安装、启动、打包和很多用例(第一部分 "Tauri的安装、启动、打包和很多用例(第一部分)")"), com.tauri.dev 随便改个名字,不叫dev就行.

这里就改成 com.tauri.shuang

再次执行,还是报了一个错:

error TS2345: Argument of type '{}' is not assignable to parameter of type 'Partial<{}> & Omit<{ readonly meg: string; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never> & Record<...>'.
  Property 'meg' is missing in type '{}' but required in type 'Omit<{ readonly meg: string; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ meg: string; }>>>, never>'.

40     <Greet/>
        ~~~~~



Found 1 error in src/App.vue:40

       Error beforeBuildCommand `npm run build` failed with exit code 2 

问了下ChatGPT 什么问题？如何解决？

这个错误是 TypeScript 编译器的错误。它指出在文件 "src/App.vue" 的第 40 行，你传递给组件 <Greet/> 的属性不符合类型要求。

根据错误信息，组件 <Greet/> 需要一个名为 "meg" 的属性，类型为字符串。然而，你传递给组件的属性是一个空对象 {}，没有包含必需的 "meg" 属性。

要解决这个问题，你需要确保在使用组件 <Greet/> 时传递一个包含 "meg" 属性的对象。例如：

<Greet meg="Hello"/>

或者，如果 "meg" 属性是可选的，你可以将其设置为可选属性：

interface GreetProps {
  meg?: string;
}

// ...

<Greet meg="Hello"/>

通过这样做，你应该能够解决这个 TypeScript 编译器错误，并成功构建你的应用程序。


然后就可以了~

alt
alt
alt
alt

跨平台构建:

可以针对 Apple Silicon、基于 Intel 的 Mac 计算机或通用 macOS 二进制文件编译应用程序。默认情况下，CLI 会构建一个针对你计算机架构的二进制文件。如果想针对不同的目标进行构建，则必须首先通过运行 rustup target add aarch64-apple-darwin 或 rustup target add x86_64-apple-darwin 来安装该目标缺少的 rust 目标，然后您可以使用 --target

  • tauri build --target aarch64-apple-darwin ：针对 Apple 硅机器。
  • tauri build --target x86_64-apple-darwin ：针对基于 Intel 的机器。
  • tauri build --target universal-apple-darwin ：生成可在 Apple 芯片和基于 Intel 的 Mac 上运行的通用 macOS 二进制文件。

NSIS打包


Tauri 1.4版本新增了这种打包方式


软件更新


https://tauri.app/v1/guides/distribution/updater

将这段代码增加到json文件中

  "updater": {
      "active": true,
      "endpoints": [
        "https://releases.myapp.com/{{target}}/{{arch}}/{{current_version}}"
      ],
      "dialog": true,
      "pubkey": "YOUR_UPDATER_SIGNATURE_PUBKEY_HERE"
    }

主要需要设置服务器地址和公钥

服务器接口返回一个json,大概是版本,更新内容等,需要额外开发.

生成公钥:

npm run tauri signer generate -- -w $HOME/.tauri/myapp.key

把得到的公钥复制到json文件pubkey后面

另外可能还需要给TAURI_PRIVATE_KEY加入环境变量



Rust相关的代码,空间占用非常之大..

alt
alt

完整代码:

tauri-app[6]

参考资料

[1]

Tauri入门教程: https://www.bilibili.com/video/BV1Za411N7dN/

 [2]

Tauri官网: https://tauri.app/

 [3]

可参考: https://stackoverflow.com/questions/75013520/when-i-install-and-run-tauri-on-mac-os-monterey-i-get-immediate-error

 [4]

实测好用的四个有免费API接口的网站: https://blog.csdn.net/m0_73875883/article/details/130840251

 [5]

天气接口: https://api.qqsuu.cn/doc/dm-hqtiqnqi.html

 [6]

tauri-app: https://github.com/cuishuang/tauri-app

本文由 mdnice 多平台发布

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/144771.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

UE5 各种moveto

UE5 各种moveto

阅读更多...
js的File对象，Blob和file相互转换

js的File对象，Blob和file相互转换

示例 <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1" /><title>js的File对象&#xff0c;Blob和file相互转换</title><…
阅读更多...
Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap，Kotlin

Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap，Kotlin

Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap&#xff0c;Kotlin fun getOriginalBitmap(resId: Int): Bitmap {val options BitmapFactory.Options()options.inJustDecodeBounds true //只解析原始图片的宽高&#xff0c;不decode原始文件装载到内…
阅读更多...
t-product的matlab实现

t-product的matlab实现

t-product是一个比较好的概念&#xff0c;相对应于矩阵中的乘法。 定义如下 这里的 circ(A),MatVec(b) 的定义分别如下 这么定义的原因是为了映射到FFT域里面去&#xff0c;简化计算。 上面的一段摘录说明&#xff1a;直接按照定义来计算&#xff0c;会耗费大量的计算资源。因…
阅读更多...
ATFX汇市：英国通胀率大降两个百分点，GBPUSD止步近两月高点

ATFX汇市：英国通胀率大降两个百分点，GBPUSD止步近两月高点

ATFX汇市&#xff1a;据英国国家统计局数据&#xff0c;英国10月CPI年率最新值4.6%&#xff0c;远低于前值6.7%&#xff0c;低于预期值4.8%&#xff0c;英国通胀率大降温&#xff0c;降幅高达2.1个百分点&#xff0c;远远超出市场预期。4.6%的通胀率是2021年10月以来最低值。主…
阅读更多...
Go常见数据结构的实现原理——map

Go常见数据结构的实现原理——map

&#xff08;一&#xff09;基础操作 版本&#xff1a;Go SDK 1.20.6 1、初始化 map分别支持字面量初始化和内置函数make()初始化。 字面量初始化&#xff1a; m : map[string] int {"apple": 2,"banana": 3,}使用内置函数make()初始化&#xff1a; m …
阅读更多...
Java 简单实现一个 TCP 回显服务器

Java 简单实现一个 TCP 回显服务器

文章目录 TCP 服务端TCP 客户端实现效果TCP 服务端(实现字典功能)总结 TCP 服务端 package network;import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Soc…
阅读更多...
基于springboot的医护人员排班系统 全套代码 全套文档

基于springboot的医护人员排班系统 全套代码 全套文档

基于springboot的医护人员排班系统,springboot vue mysql (毕业论文10411字以上,共27页,程序代码,MySQL数据库) 代码下载链接&#xff1a;https://pan.baidu.com/s/177HdCGtTvqiHP4O7qWAgxA?pwd0jlf 提取码&#xff1a;0jlf 【运行环境】 IDEA, JDK1.8, Mysql, Node, Vue …
阅读更多...
HDP集群Kafka开启SASLPLAINTEXT安全认证

HDP集群Kafka开启SASLPLAINTEXT安全认证

hdp页面修改kafka配置 java代码连接kafka增加对应的认证信息 props.put("security.protocol","SASL_PLAINTEXT");props.put("sasl.mechanism","PLAIN");props.put("sasl.jaas.config","org.apache.kafka.common.securi…
阅读更多...
【华为HCIP | 华为数通工程师】ISIS 高频题（1）

【华为HCIP | 华为数通工程师】ISIS 高频题（1）

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…
阅读更多...
Spring Boot 日志

Spring Boot 日志

日志概述 ⽇志对我们来说并不陌⽣&#xff0c;我们经常需要通过打印⽇志来发现和定位问题,或者根据⽇志来分析程序的运⾏过程.在Spring的学习中, 也经常需要根据控制台的⽇志来分析和定位问题. 打印日志 一&#xff1a;在程序中得到⽇志对象. 通过⽇志⼯⼚ LoggerFactory 获取…
阅读更多...
embedding的综述

embedding的综述

0【自然语言处理】Word2Vec 词向量模型详解 Python代码实战 1 一文读懂Embedding的概念&#xff0c;以及它和深度学习的关系 one-hot 变成地位稠密的向量&#xff0c;降维 什么是词嵌入&#xff1a;讲词汇表中的词或者词语映射成固定长度的向量。 具体过程&#xff1a; …
阅读更多...
2023年第九届数维杯国际大学生数学建模挑战赛A题

2023年第九届数维杯国际大学生数学建模挑战赛A题

2023年第九届数维杯国际大学生数学建模挑战赛正在火热进行&#xff0c;小云学长又在第一时间给大家带来最全最完整的思路代码解析&#xff01;&#xff01;&#xff01; A题思路解析如下&#xff1a; 完整版解题过程及代码&#xff0c;稍后继续给大家分享~ 更多题目完整解析点…
阅读更多...
MIB 操作系统Lab: Xv6 and Unix utilities(1)boot xv6

MIB 操作系统Lab: Xv6 and Unix utilities(1)boot xv6

从github中下载xv6代码 $ git clone git://g.csail.mit.edu/xv6-labs-2023 $ cd xv6-labs-2023 编译和运行xv6: $ make qemu 如果在终端输入ls命令&#xff0c;能看到输出。 大多数都是可以直接运行的命令。 xv6没有ps命令&#xff0c;但是可以输入ctrl-p可以看到进程的信…
阅读更多...
fileread任意文件读取学习笔记

fileread任意文件读取学习笔记

任意文件读取概述 一些网站的需求&#xff0c;可能会提供文件查看与下载的功能。如果对用户查看或下载的文件没有限制或者限制绕过&#xff0c;就可以查看或下载任意文件。这些文件可以是源代码文件&#xff0c;配置文件&#xff0c;敏感文件等等。 任意文件读取会造成&#x…
阅读更多...
在docker下安装suiteCRM

在docker下安装suiteCRM

安装方法&#xff1a; docker-hub来源&#xff1a;https://hub.docker.com/r/bitnami/suitecrm curl -sSL https://raw.githubusercontent.com/bitnami/containers/main/bitnami/suitecrm/docker-compose.yml > docker-compose.yml//然后可以在docker-compose.yml文件里修…
阅读更多...
深度学习+opencv+python实现车道线检测 - 自动驾驶 计算机竞赛

深度学习+opencv+python实现车道线检测 - 自动驾驶 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV56 数据集处理7 模型训练8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &am…
阅读更多...
HTML5学习系列之主结构

HTML5学习系列之主结构

HTML5学习系列之主结构 前言HTML5主结构定义页眉定义导航定义主要区域定义文章块定义区块定义附栏定义页脚 具体使用总结 前言 学习记录 HTML5主结构 定义页眉 head表示页眉&#xff0c;用来表示标题栏&#xff0c;引导和导航作用的结构元素。 <header role"banner…
阅读更多...
Java和JavaScript是一样的技术吗？

Java和JavaScript是一样的技术吗？

目录 一、Java 是什么 二、JavaScript 是什么 三、Java 和 JavaScript 的区别 一、Java 是什么 Java是一种广泛使用的计算机编程语言&#xff0c;最初由Sun Microsystems&#xff08;后被Oracle收购&#xff09;于1995年发布。Java是一种面向对象的语言&#xff0c;设计初衷…
阅读更多...
qnx 工程目录创建工具 addvariant

qnx 工程目录创建工具 addvariant

文章目录 前言一、addvariant 是什么二、addvariant 使用实例1. variant names 参数说明2. 创建一个可执行文件工程3. 创建一个动态库工程 总结参考资料 前言 本文主要介绍如何在qnx 开发环境中创建工程目录及其相关的配置文件(common.mk, Makefile 文件等) 软件版本&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023