前言
本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。
环境配置
- 系统：windows 10
- 平台：visual studio code
- 语言：rust、javascript
- 库：tauri2.0
概述
本文是基于tauri框架下，打开系统安装的任意应用程序。
1、创建前端项目
如何创建前端项目以及集成tauri，本文不再赘述，可以参考之前的博文：
1、< tauri>< rust>< GUI>使用tauri实现一个简单的计算器程序
或者参考tauri的官网说明： tauri.app/zh-cn/start...
本文的目的，是通过tauri程序来打开windows系统中的任意应用程序，我们需要先安装一个插件opener：
javascript
npm run tauri add opener这个插件既可以在javascript中使用，也可以在rust中使用，本文将在rust中来使用。 官网rust使用实例：
rust
use tauri_plugin_opener::OpenerExt;
// 使用默认的应用来打开文件：
app.opener().open_path("/path/to/file", None::<&str>);
// 在 Windows 上使用 `vlc` 打开文件：
app.opener().open_path("C:/path/to/file", Some("vlc"));上述代码中的app变量，其类型是App或者AppHandle的实例。
照例，我们先创建一个新的html页面布局，openapp.html:
html
<div id="openappdiv" class="openappdiv">
<div id="systemappdiv" class="systemappdiv">
<p>系统应用:</p>
<figure>
<img id="notepadimg" class="notepadimg" src="../images/notepad.png" alt="notepad" width="64" height="64"/>
<figcaption>记事本</figcaption>
</figure>
<figure>
<img id="painteditorimg" src="../images/painteditor.png" alt="painteditor" width="64" height="64"/>
<figcaption>画图</figcaption>
</figure>
</div>
<div id="normalappdiv" class="normalappdiv">
<p>普通应用:</p>
<figure>
<img id="plcimg" src="../images/plc.png" alt="plc" width="64" height="64"/>
<figcaption>汇川PLC</figcaption>
</figure>
<figure>
<img id="lupingimg" src="../images/luping.png" alt="录制" width="64" height="64"/>
<figcaption>录制</figcaption>
</figure>
</div>
</div>然后为其添加布局样式openapp.css:
css
.app{
display: flex;
flex-direction: column;
gap: 20px;
}
.openappdiv{
display: flex;
flex-direction: column;
gap: 10px;
margin: 20px;
}
.systemappdiv{
display: flex;
flex-direction: row;
gap: 10px;
}
.normalappdiv{
display: flex;
flex-direction: row;
gap: 10px;
}
img{
background-color: #fffbfb;
}
img:hover{
background-color: #81f323;
}
img:active{
background-color: #d3d6d3;
}页面运行后效果如下：
当我们点击相应应用的图标时，将打开对应的应用程序。当然，我们也可以指定对应应用的文件，这样打开时会同时打开文件，如果未指定，则默认打开空应用。
2、打开应用
前文说过，我们使用插件opener来实现应用打开功能，而且是在rust端实现，所以，我们需要先在rust中添加函数，以供前端调用。 别忘了添加权限： src-tauri/capabilities/default.json
json
"opener:allow-open-path",我们创建一个openapp函数：
rust
#[tauri::command]
fn openapp(app:tauri::AppHandle,file:String,appname:String) -> Result<(), String> {
if appname.is_empty() {
match app.opener().open_path(file, None::<&str>) {
Ok(()) => Ok(()),
Err(e) => Err(format!("打开应用失败:{}", e)),
}
} else {
match app.opener().open_path(file, Some(appname)) {
Ok(()) => Ok(()),
Err(e) => Err(format!("打开应用失败:{}", e)),
}
}
}注意上述函数中的app变量，必须是App或者AppHandle。另外传入的参数是文件名和应用名（准确的说，是安装路径）。 open_path有两个参数，文件路径和应用路径，必须要有一个是有值的，且存在于系统中，即如果未提供文件名，那么默认打开空应用，如果未提供应用名，那么打开时，会根据文件类型，使用系统的默认应用来打开。 然后我们在前端调用此函数：
javascript
function openfile(file,appname){
invoke('openapp',{file:file,appname:appname}).then(
(res) => {
console.log(res);
}
).catch(
(err) => {
console.log(err);
}
)
}我们使用invoke函数来调用rust端的函数，可以捕获rust函数返回的错误信息。 然后，我们获取img元素，监控其单击事件即可：
javascript
const notepadimg = document.getElementById('notepadimg');
const painteditorimg = document.getElementById('painteditorimg');
const plcimg = document.getElementById('plcimg');
const lupingimg = document.getElementById('lupingimg');
notepadimg.addEventListener('click', async () => {
const appname = "C:\\Windows\\System32\\notepad.exe"
openfile("",appname)
})
painteditorimg.addEventListener('click', async () => {
const appname = "C:\\Windows\\System32\\mspaint.exe"
openfile("",appname)
})
plcimg.addEventListener('click', async () => {
const appname = "F:\\Inovance Control\\AutoShop\\AutoShop.exe"
openfile("",appname)
})
lupingimg.addEventListener('click', async () => {
const appname = "E:\\班迪录屏6.0.1\\BandicamPortable.exe"
openfile("",appname)
})本例中，我们未提供文件，默认打开的都是空应用，如果要提供文件，可以使用对话框获取文件路径，然后打开。