ToB企服应用市场:ToB评测及商务社交产业平台

标题: WPF 应用迁移到 Electron 框架过程记录 [打印本页]
作者: 伤心客    时间: 2024-5-13 00:42
标题: WPF 应用迁移到 Electron 框架过程记录
前一段时间我用 WPF 开发了一个查看 emoji 表情的小工具 https://github.com/he55/EmojiViewer ，由于迩来我利用 macOS 系统比较多，我想能在 macOS 系统上也能利用这个工具。于是我尝试将 WPF 应用迁移到 Electron 框架，感觉这个框架很强大，在这里记录一下应用迁移的过程。

安装 Electron 环境

编写代码

  1. function createWindow() {
  2.   const mainWindow = new BrowserWindow({
  3.     width: 915,
  4.     height: 560,
  5.     autoHideMenuBar: true,
  6.     webPreferences: {
  7.       preload: path.join(__dirname, 'preload.js')
  8.     }
  9.   })
  11.   mainWindow.loadFile('index.html')
  12. }
复制代码
  1. app.whenReady().then(() => {
  2.   createWindow()
  4.   app.on('activate', function () {
  5.     if (BrowserWindow.getAllWindows().length === 0) createWindow()
  6.   })
  7. })
复制代码
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="UTF-8">
  6.   
  7.   <link href="./styles.css" rel="stylesheet">
  8.   <title>EmojiViewer</title>
  9. </head>
  11. <body>
  12.   
  13.     <ul >
  14.       <li v-for="(item, key) in categories" : @click="catetoryItemClick(item)">{{ key }}</li>
  15.     </ul>
  16.     <ul  ref="mainElement">
  17.       <li v-for="emoji in emojis" : @click="emojiItemClick(emoji)">
  18.         <img :src="emoji.previewImage" alt="">
  19.         <p>{{emoji.name}}</p>
  20.       </li>
  21.     </ul>
  22.    
  23.       <img :src="selectedEmoji.previewImage">
  24.       <p>{{ selectedEmoji.name }}</p>
  25.       <button @click="copyEmoji(selectedEmoji)" type="button">Copy Emoji</button>
  26.       <button @click="copyImage(selectedEmoji)" type="button">Copy Image</button>
  27.       <button @click="openFile(selectedEmoji)" type="button">Open File</button>
  28.    
  29.   
  31.   
  32. </body>
  34. </html>
复制代码
  1. window.addEventListener('DOMContentLoaded', async () => {
  2.     const { createApp, ref, onMounted } = Vue
  3.     let emojiData = await ipc.getData()
  5.     createApp({
  6.         setup() {
  7.             const mainElement = ref(null)
  9.             const categories = ref(emojiData)
  10.             const emojis = ref([])
  11.             const selectedEmoji = ref({})
  13.             function copyEmoji(emoji) {
  14.                 ipc.ipc('writeText', emoji.metadata.glyph)
  15.             }
  16.             function copyImage(emoji) {
  17.                 ipc.ipc('writeImage', emoji.previewImage)
  18.             }
  19.             function openFile(emoji) {
  20.                 ipc.ipc('showItemInFolder', emoji.previewImage)
  21.             }
  23.             let lastSelectedEmojis
  24.             function catetoryItemClick(items) {
  25.                 if (lastSelectedEmojis) {
  26.                     lastSelectedEmojis.isActive = false
  27.                 }
  29.                 items.isActive = true
  30.                 lastSelectedEmojis = items
  32.                 // const main = document.querySelector('.main')
  33.                 mainElement.value.scrollTop = 0
  34.                 emojis.value = items
  35.             }
  37.             function emojiItemClick(emoji) {
  38.                 if (selectedEmoji.value) {
  39.                     selectedEmoji.value.isActive = false
  40.                 }
  42.                 emoji.isActive = true
  43.                 selectedEmoji.value = emoji
  44.             }
  46.             onMounted(() => {
  47.                 catetoryItemClick(emojiData['Activities'])
  48.                 emojiItemClick(emojiData['Activities'][0])
  49.             })
  51.             return {
  52.                 mainElement,
  53.                 categories,
  54.                 emojis,
  55.                 selectedEmoji,
  56.                 catetoryItemClick,
  57.                 emojiItemClick,
  58.                 copyEmoji,
  59.                 copyImage,
  60.                 openFile,
  61.             }
  62.         }
  63.     }).mount('#app')
  64. })
复制代码
  1. function loadData(assetPath) {
  2.   const dirs = fs.readdirSync(assetPath)
  3.   const data = []
  4.   const groupData = {}
  5.   for (const dir of dirs) {
  6.     const fullPath = path.resolve(assetPath, dir)
  7.     const metadata = require(path.resolve(fullPath, 'metadata.json'))
  8.     let previewImage
  10.     let imagePaths = [path.resolve(fullPath, '3D'), path.resolve(fullPath, 'Default', '3D')]
  11.     for (const imagePath of imagePaths) {
  12.       if (fs.existsSync(imagePath)) {
  13.         let files = fs.readdirSync(imagePath)
  14.         if (files.length === 0)
  15.           return
  16.         previewImage = path.resolve(imagePath, files[0])
  17.       }
  18.     }
  20.     const { unicode, group } = metadata
  21.     const obj = {
  22.       metadata,
  23.       id: unicode,
  24.       name: dir,
  25.       previewImage,
  26.     }
  27.     data.push(obj)
  29.     if (!groupData[group])
  30.       groupData[group] = []
  31.     groupData[group].push(obj)
  32.   }
  33.   return groupData
  34. }
复制代码
完整代码(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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4