前一段时间我用 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

WPF 应用迁移到 Electron 框架过程记录的更多相关文章

  1. 将ibatis迁移到mybatis3的过程记录

    将ibatis迁移到mybatis3的过程记录 场景:有些以前的老项目是使用ibatis开发的,现在有转换成mybatis3的需求. 环境准备:需要安装Ant,以下是本人的安装版本,具体怎么安装不再赘 ...

  2. 半个前端新手入门Electron的过程

    前言 先说几句废话,本人是一名 web 后端开发,主语言是 java,在学 Electron 之前,只会一点点 HTML和 JavaScript.本文讲的也是我学习 Electron 的过程,而非教程 ...

  3. 将基于 .NET Framework 的 WPF 项目迁移到基于 .NET Core 3

    在 Connect(); 2018 大会上,微软发布了 .NET Core 3 Preview,以及基于 .NET Core 3 的 WPF:同时还发布了 Visual Studio 2019 预览版 ...

  4. 金蝶Apusic中间件适配JetSpeed2过程记录

    金蝶Apusic中间件适配JetSpeed2过程记录: 1.安装金蝶并配置域,确保域运行正常. 2.参考<JetSpeed2部署至Apusic操作步骤记录>进行应用迁移. https:// ...

  5. Electron安装过程深入解析（读完此文解决Electron应用无法启动，无法打包的问题）

    1. 安装Electron依赖包 开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...

  6. 升级Windows 10 正式版过程记录与经验

    升级Windows 10 正式版过程记录与经验 [多图预警]共50张,约4.6MB 系统概要: 预装Windows 8.1中文版 64位 C盘Users 文件夹已经挪动到D盘,并在原处建立了符号链接. ...

  7. 双系统Ubuntu分区扩容过程记录

    本人电脑上安装了Win10 + Ubuntu 12.04双系统.前段时间因为在Ubuntu上做项目要安装一个比较大的软件,导致Ubuntu根分区的空间不够了.于是,从硬盘又分出来一部分空间,分给Ubu ...

  8. .NET 4.5+项目迁移.NET Core的问题记录

    .NET 4.5+项目迁移.NET Core的问题记录 这几天试着把目前的开发框架迁移到新的.net core平台,中间遇到的问题在这里简单记录一下. 迁移过程遇到的最大的问题IOC容器.我目前使用的 ...

  9. SVN迁移到Git的过程（+ 一些技巧）

    SVN迁移到Git的过程(+ 一些技巧) 李顺利 Key Words SVN,Git,Clone,Conversion,Tips,VCS,Pro Git 关于在VCS中SVN和Git之间的迁移(Clo ...

  10. CentOS 5.5 下安装Countly Web Server过程记录

    CentOS 5.5 下安装Countly Web Server过程记录 1. 系统更新与中文语言包安装 2. 基本环境配置: 2.1. NodeJS安装 依赖项安装 yum -y install g ...

随机推荐

  1. 文件上传change事件只执行一次的问题

    参考地址:https://blog.csdn.net/john_xiaoweige/article/details/81392110 本节中的注意点: this.$refs.attenceInput. ...

  2. STM32CubeMX教程27 SDIO - 读写SD卡

    1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) ST-LINK/V2驱动 ...

  3. springboot security 权限控制 -- @PreAuthorize 的使用

    1. 说明 security 鉴权方式常用的有两种配置,1.配置文件中配置:2.使用注解标注:他们都是基于 acess 表达式,如果需要自定义逻辑的鉴权认证,只需要自定义 access 表达式即可.本 ...

  4. SqlSugar的Select用法

    Select 位置 正常情况:应该在最后面, 一般是 .Where(..).OrderBy(..).Select(..).ToList() 特殊情况:如果Select不是最后一个位置,则Select要 ...

  5. NLP国内外大模型汇总列表[文心一言、智谱、百川、星火、通义千问、盘古等等]

    NLP国内外大模型汇总列表[文心一言.智谱.百川.星火.通义千问.盘古等等] 中国大模型列表大全,全面收集有明确来源的大模型情况,包括机构.来源信息和分类等,随时更新. Awesome family ...

  6. win10 局域网共享文件创建方法

    win10 局域网共享文件创建方法 1.先在桌面文件夹,我命名为"xxxx",然后将文件放在该文件里. 2.右击共享文件夹,找到属性选项,点击"属性".再点击& ...

  7. 6.9 Windows驱动开发：内核枚举进线程ObCall回调

    在笔者上一篇文章<内核枚举Registry注册表回调>中我们通过特征码定位实现了对注册表回调的枚举,本篇文章LyShark将教大家如何枚举系统中的ProcessObCall进程回调以及Th ...

  8. 4.8 x64dbg 学会扫描应用堆栈

    堆栈是计算机中的两种重要数据结构 堆(Heap)和栈(Stack)它们在计算机程序中起着关键作用,在内存中堆区(用于动态内存分配)和栈区(用于存储函数调用.局部变量等临时数据),进程在运行时会使用堆栈 ...

  9. C# 字符串转码后操作二进制文件

    String转码后写入二进制文件,读二进制文件进行解码返回. public class BinaryClass { /// <summary> /// 写二进制文件 /// </su ...

  10. [Go] string、int、int64相互转换

    import "strconv" //先导入strconv包 // string到int int, err := strconv.Atoi(string) // string到in ...