Tauri 使用体验

应朋友之托，要写一个界面程序，来调用第三方的接口创建任务。看了一下文档，功能不多。就是上传图片或pdf，然后提交任务。虽然自己用过 electron ，但是最近看到 Tauri 很火，所以打算试一下。

2 Tauri 使用

2.1 安装

可以参考以下文章进行安装
《前端桌面应用之-tauri》
《安装 Rust 和 Cargo》
需要安装以下环境：
npm
Visual Studio
Rust
Cargo

2.2 使用体验

打包比 electron 小

2.3 上传文件

因为需要向第三方接口上传文件，涉及跨域问题，所以决定使用 tauri 的 http。但是在上传过程中发现接口报错，参数错误。通过调试发现，上传中并没有传递文件的二进制部分。经过查询发现有人和我遇到了同样的问题，但是没有好的解决方案。
https://github.com/tauri-apps/tauri/issues/2118

另外通过搜索发现 tauri 有一个上传文件的插件
https://github.com/tauri-apps/tauri-plugin-upload
安装使用后发现，无法自定义 form 的 name 字段，因为第三方接口要求 name 必须为指定的字符，所以还是无法解决上传文件问题。

最终，解决方式，弃坑，选择electron。

3 electron 使用

3.1 安装

可以参考以下文章进行安装
《前端桌面应用之-tauri》
《安装 Rust 和 Cargo》
需要安装以下环境：
npm
Visual Studio
Rust
Cargo

3.1 使用体验

抓到老鼠的猫才是好猫

3.2 跨域

使用别人配置好的模板
https://github.com/arvinxx/umi-electron-template
启动时会有个os-name的报错，将其更换为 v4 版本即可（修改package.json）
https://github.com/arvinxx/umi-electron-template/issues/627

解决跨域问题
https://juejin.cn/post/6844904202905321480
new BrowserWindow() 中添加
webPreferences: { webSecurity: false }

https://github.com/arvinxx/umi-electron-template （项目貌似不支持less，弃坑，待后续研究）

自己新建项目完成

https://github.com/BySlin/umi-plugin-electron-builder/tree/main/examples/demo

插曲

1 useRequest 之 umi 与 ahooks 区别

在使用 umi 的 useRequest onSuccess 方法時，发现 res 会出现 undefined 的情况。直接使用 ahooks 中的 useRequest 则正常。
示例代码：

const { run, loading } = useRequest(fakeSubmitForm, {
  manual: true,
  onSuccess: ( res ) => {
    console.log(res)
    message.success('提交成功');
  },
});

经过查询官方文档得知，umi 会对返回数据进行处理，传递给 onSuccess 的 data 变量为返回数据中的 data 字段。由于第三方接口只有正确时才返回 data 字段，其他情况只有 error、errormsg 等字段，此时会导致我代码中的 res 为 undefined 。
umi 官方描述如下：
———————umi说明 start————————-
有如下两点差异：

• 按照接口请求规范内置了 formatResult: res => res?.data 让你可以更方便的使用数据，当然你也可以自己配置 formatResult 来覆盖内置的这个逻辑。
• 按照接口错误规范统一了错误处理逻辑。

———————-umi说明 end—————————

根据描述可知，我们只要覆盖 formatResult 不做任何处理，直接返回，即可满足效果：

const { run, loading } = useRequest(fakeSubmitForm, {
    manual: true,
    formatResult: res => res,
    onSuccess: ( res ) => {
      console.log(res)
      message.success('提交成功');
    },
  });