本文主要是描述electron中路徑相關的問題
- 靜態資源丟失的原因
- 靜態資源路徑一致性處理方案-resolvePath
- 常用路徑---userPath/appData/文檔
- pathUtil的封裝
一、靜態資源丟失的原因
Electron常見問題(二)Electron圖標打包我們討論過靜態資源的打包,但有時候我們會碰到在local環境運行程序的時候靜態資源可以看到,但是build成產品後靜態資源丟失的情況。
這裏用托盤圖標舉例。
托盤圖標的靜態資源我們通過extraResources複製操作放到打包後的文件中
package.json
{
...
"build": {
...
"extraResources": [
{
"from": "icons/",
"to": "icons/"
} // 可以移動多個文件夾,from-to
],
...
},
...
}
打包後的icons會複製到文件的resources中
local環境中我們引入圖標使用相對路徑來引入圖標
const iconName =process.platform === 'win32' ?
'icons/windows-icon.png' : 'icons/iconTemplate.png';
const ningImage = nativeImage.createFromPath(iconName);
tray = new Tray(ningImage);
我們的主代碼會被打包在app.asar中
對於主代碼來說,圖標的位置在 'icons/windows-icon.png' 沒有錯。
但在local環境我們的主代碼在app/main.developments.ts中,這樣 'icons/windows-icon.png' 是找不到對應的icon的。
二、 靜態資源路徑一致性處理方案-resolvePath
爲了解決路徑不一致的情況,我們可以封裝一個resolvePath類,將local環境的路徑和產品環境的路徑相一致。
export default class PathUtils {
// 將startPath作爲標準路徑,靜態資源的路徑和項目中使用到的路徑全部由startPath起始
public static startPath = path.join(__dirname, '..');
public static resolvePath = (dirPath) => {
return path.join(PathUtils.startPath, dirPath || '.');
};
}
這樣,相應的tray圖標引入方式改爲
const iconName =
process.platform === 'win32'
? PathUtils.resolvePath('icons/windows-icon.png')
: PathUtils.resolvePath('icons/iconTemplate.png');
const ningImage = nativeImage.createFromPath(iconName);
tray = new Tray(ningImage);
三、常用路徑---userPath/appData/文檔
我們系統的配置文件通常放到用戶目錄下,如 C://User/Administrator/xxxconfig.json 中,這個路徑一般稱爲userProfile,但是這是初始的情況,有的用戶系統盤放在D盤E盤等其他盤,這時對應的用戶目錄位置也會改變。
所以我們的用戶目錄一般使用userProfile來獲取,這個變量在electron的環境變量中也是可以找到的。
process.env['USERPROFILE'];
同樣的用戶的緩存目錄APPDATA路徑爲
process.env['APPDATA']
還有一個常用路徑是文檔,我們熟知的qq,微信等接受到的文件一般都會緩存在這個位置。
而文檔的位置在electron中是找不到的,而且文檔映射的路徑也是可以手動編輯的。
但它最終是存在註冊表中的。所以我們需要花些手段去讀取註冊表。
好在網上可以找到regedit組件可以讓nodejs訪問註冊表。
接下來我們只要找到文檔對應的位置就可以了。
四、pathUtil的封裝
增加了userPath/appData/文檔路徑,我們的pathUtil也要進行升級,如下
export default class PathUtils {
public static startPath = path.join(__dirname, '..');
public static userPath = process.env['USERPROFILE'];
public static userDocPath;
public static appdataPath = process.env['APPDATA'];
public static resolvePath = (dirPath) => {
return path.join(PathUtils.startPath, dirPath || '.');
};
public static resolveUserPath = (dirPath) => {
return path.join(PathUtils.userPath, dirPath || '.');
};
public static resolveUserDocPath = (dirPath) => {
return new Promise((resolve, reject) => {
getUserDoc().then((docPath: string) => {
PathUtils.userDocPath = docPath;
resolve(PathUtils.userDocPath);
});
});
};
}
const getUserDoc = () => {
return new Promise((resolve, reject) => {
const regedit = require('regedit');
regedit.setExternalVBSLocation(PathUtils.resolvePath('vbs'));
const key = 'HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Explorer\\User Shell Folders';
regedit.list(key, function(err, result) {
if (err) {
console.error('Window Reg:', err);
} else {
try {
resolve(result[key].values['Personal'].value);
} catch (e) {
const docPath = path.join(PathUtils.userPath, 'Documents');
if (!fs.existsSync(docPath)) {
fs.mkdirSync(docPath);
}
resolve(docPath);
}
}
});
});
};