前一段時間我用 WPF 開發了一個查看 emoji 表情的小工具 https://github.com/he55/EmojiViewer ，由於最近我使用 macOS 系統比較多，我想能在 macOS 系統上也能使用這個工具。於是我嘗試將 WPF 應用遷移到 Electron 框架，感覺這個框架很強 ...
前一段時間我用 WPF 開發了一個查看 emoji 表情的小工具 https://github.com/he55/EmojiViewer ，由於最近我使用 macOS 系統比較多，我想能在 macOS 系統上也能使用這個工具。於是我嘗試將 WPF 應用遷移到 Electron 框架，感覺這個框架很強大，在這裡記錄一下應用遷移的過程。
安裝 Electron 環境
- 安裝 nodejs。到官網 https://nodejs.org/en 下載最新的 nodejs，然後安裝
- 打開命令行輸入
git clone https://github.com/electron/electron-quick-start.git命令克隆 Electron 模板項目，使用模板可以快速搭建應用。 - 然後使用
cd electron-quick-start目錄進入到目錄，接著運行npm install命令還原項目。 - 使用 vscode 打開文件夾，項目文件如下
編寫代碼
- Electron 分為主進程和渲染進程，對文件、系統和視窗的操作需要在主線程，界面渲染在渲染進程。創建視窗屬於主進程的工作，需要到
main.js文件編寫代碼。創建視窗使用BrowserWindow對象，width和height分別設置視窗寬度和高度，autoHideMenuBar設置是否隱藏菜單，最後使用loadFile載入頁面文件並顯示視窗。
function createWindow() {
const mainWindow = new BrowserWindow({
width: 915,
height: 560,
autoHideMenuBar: true,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
}
- 監聽
whenReady事件，等待應用初始化完成後顯示視窗
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
- 修改
index.html文件，界面部分使用了 vue 進行渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="vue.global.js"></script>
<link href="./styles.css" rel="stylesheet">
<title>EmojiViewer</title>
</head>
<body>
<div id="app" class="container">
<ul class="left">
<li v-for="(item, key) in categories" :class="{active: item.isActive}" @click="catetoryItemClick(item)">{{ key }}</li>
</ul>
<ul class="main" ref="mainElement">
<li v-for="emoji in emojis" :class="{active: emoji.isActive}" @click="emojiItemClick(emoji)">
<img :src="emoji.previewImage" alt="">
<p>{{emoji.name}}</p>
</li>
</ul>
<div class="right">
<img :src="selectedEmoji.previewImage">
<p>{{ selectedEmoji.name }}</p>
<button @click="copyEmoji(selectedEmoji)" type="button">Copy Emoji</button>
<button @click="copyImage(selectedEmoji)" type="button">Copy Image</button>
<button @click="openFile(selectedEmoji)" type="button">Open File</button>
</div>
</div>
<script src="./renderer.js"></script>
</body>
</html>
- 在
renderer.js文件中編寫頁面處理代碼
window.addEventListener('DOMContentLoaded', async () => {
const { createApp, ref, onMounted } = Vue
let emojiData = await ipc.getData()
createApp({
setup() {
const mainElement = ref(null)
const categories = ref(emojiData)
const emojis = ref([])
const selectedEmoji = ref({})
function copyEmoji(emoji) {
ipc.ipc('writeText', emoji.metadata.glyph)
}
function copyImage(emoji) {
ipc.ipc('writeImage', emoji.previewImage)
}
function openFile(emoji) {
ipc.ipc('showItemInFolder', emoji.previewImage)
}
let lastSelectedEmojis
function catetoryItemClick(items) {
if (lastSelectedEmojis) {
lastSelectedEmojis.isActive = false
}
items.isActive = true
lastSelectedEmojis = items
// const main = document.querySelector('.main')
mainElement.value.scrollTop = 0
emojis.value = items
}
function emojiItemClick(emoji) {
if (selectedEmoji.value) {
selectedEmoji.value.isActive = false
}
emoji.isActive = true
selectedEmoji.value = emoji
}
onMounted(() => {
catetoryItemClick(emojiData['Activities'])
emojiItemClick(emojiData['Activities'][0])
})
return {
mainElement,
categories,
emojis,
selectedEmoji,
catetoryItemClick,
emojiItemClick,
copyEmoji,
copyImage,
openFile,
}
}
}).mount('#app')
})
- 讀取文件，node 提供了文件操作相關的 api 可以很方便的操作文件系統。
function loadData(assetPath) {
const dirs = fs.readdirSync(assetPath)
const data = []
const groupData = {}
for (const dir of dirs) {
const fullPath = path.resolve(assetPath, dir)
const metadata = require(path.resolve(fullPath, 'metadata.json'))
let previewImage
let imagePaths = [path.resolve(fullPath, '3D'), path.resolve(fullPath, 'Default', '3D')]
for (const imagePath of imagePaths) {
if (fs.existsSync(imagePath)) {
let files = fs.readdirSync(imagePath)
if (files.length === 0)
return
previewImage = path.resolve(imagePath, files[0])
}
}
const { unicode, group } = metadata
const obj = {
metadata,
id: unicode,
name: dir,
previewImage,
}
data.push(obj)
if (!groupData[group])
groupData[group] = []
groupData[group].push(obj)
}
return groupData
}
完整代碼(WPF 版本) https://github.com/he55/EmojiViewer
完整代碼(vue 版本) https://github.com/he55/web-learn/tree/main/9.electron-emoji-viewer(vue)
完整代碼(js 原生版本) https://github.com/he55/web-learn/tree/main/6.electron-emoji-viewer
