uTools开发最佳实践
一些开发uTools插件比较好用的代码
推荐理由
uTools中，是要web的文件上传组件，会导致主窗口隐藏，并且web的上传组件需要<input type="file"></input>标签，比较麻烦，本文介绍的方法，直接js调用即可，方便快捷。
代码
首先，创建preload.js文件，并在plugin.json指定preload字段
在preload.js中加入：
const {readFile} = require('fs');
const {basename} = require('path');
function readFileAsync(path) {
return new Promise((resolve, reject) => {
readFile(path, 'utf8', (err, data) => {
if (err) {
reject(err);
return;
}
resolve(data);
})
})
}
/**
* 获取一个文件
* @param options {options: {
* title?: string,
* defaultPath?: string,
* buttonLabel?: string,
* filters?: { name: string, extensions: string[] }[],
* properties?: Array<'openFile' | 'openDirectory' | 'multiSelections' | 'showHiddenFiles' | 'createDirectory' | 'promptToCreate' | 'noResolveAliases' | 'treatPackageAsDirectory' | 'dontAddToRecent'>,
* message?: string,
* securityScopedBookmarks?: boolean
* }} 参数
* @return {Promise<Array<File>>} 返回文件对象
*/
async function openFile(options) {
const paths = utools.showOpenDialog(options);
const files = [];
for (const path of paths) {
const data = await readFileAsync(path);
const name = basename(path);
const type = 'application/octet-stream';
const blob = new Blob([data], { type: type });
const file = new File([blob], name, { type: type });
files.push(file);
}
return files;
}
window.preload = {
openFile
}
如果你是要ts开发，可以在vite-env.d.ts中加入函数定义：
interface OpenFileOption {
title ?: string,
defaultPath ?: string,
buttonLabel ?: string,
filters ?: { name: string, extensions: string[] }[],
properties ?: Array < 'openFile' | 'openDirectory' | 'multiSelections' | 'showHiddenFiles' | 'createDirectory' | 'promptToCreate' | 'noResolveAliases' | 'treatPackageAsDirectory' | 'dontAddToRecent' >,
message ?: string,
securityScopedBookmarks ?: boolean
}
interface Window {
preload: {
/**
* 打开一个文件，并返回blob对象
* @param options 参数
* @return 返回文件列表
*/
openFile(options: OpenFileOption): Promise<Array<File>>
}
}
使用
window.preload.openFile({
title: '选择图片',
filter: [{
name: '图片',
extensions: ['jpg', 'png', 'git', 'jpeg', 'webp']
}]
}).then(files => {
// 自己的逻辑
})