前一段时间我用 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. 01 vue子组件调用父组件中的方法

    vue子组件,调用父组件中有三种方法哈!下面我们一起来讲解. 第一种使用 直接在子组件中通过this.$parent.父组件中的方法.来调用父组件的方法 第一种的缺点是不能够传递参数哈.它只能够调用方 ...

  2. vue中render函数使用attrs绑定id、class、style、事件（5）

    1.h函数的三个参数 第一个参数是必须的. 类型:{String | Object | Function} 一个 HTML 标签名.一个组件.一个异步组件.或一个函数式组件. 是要渲染的html标签. ...

  3. gRPC基本教程

    原文在这里. 本教程为Go程序员提供了使用gRPC的基本介绍. 通过跟随本示例,你将学会如何: 在.proto文件中定义一个服务. 使用协议缓冲编译器生成服务器和客户端代码. 使用Go gRPC AP ...

  4. 压缩软件 WinRAR 去广告

    别去中国的那个代理网站下载 去国外的官网下载英文版或者湾湾版的, 这样用网上的rarreg.key文件方式就没有广告了, 不然中国的就是有广告. 这里是湾湾版的链接: https://pan.baid ...

  5. 复原docker中容器的启动命令

    复原 docker 容器的启动命令 前言 查看 docker 容器的启动命令 参考 复原 docker 容器的启动命令 前言 不规范的操作,在启动 docker 容器,没有留命令脚本,或者没有使用 d ...

  6. 强化学习从基础到进阶-案例与实践[1]：强化学习概述、序列决策、动作空间定义、策略价值函数、探索与利用、Gym强化学习实验

    强化学习从基础到进阶-案例与实践[1]:强化学习概述.序列决策.动作空间定义.策略价值函数.探索与利用.Gym强化学习实验 1.1 强化学习概述 强化学习(reinforcement learning ...

  7. 应用--WebApplication

    应用--Program中的WebApplication 在6.0,微软团队对于NetCore做了很大的改变,其中有一个改变就是推出了新的托管模型--最小托管模型,使用该模型可以创建最小的web应用.( ...

  8. 树莓派4B改造成云桌面客户端，连接DoraCloud免费版

    Raspberry Pi(树莓派) 是为学习计算机编程教育而设计的只有信用卡大小的微型电脑,自问世以来受众多计算机发烧友和创客的追捧,曾经一"派"难求. DoraCloud是一款多 ...

  9. SpringBoot不再需要@Autowired来注入属性

    实操部分 需要lombok依赖 在对应需要注入属性的类上添加注解 @RequiredArgsConstructor 所有需要注入的属性改为final修饰 为什么 lombok的@RequiredArg ...

  10. Spring Boot 参数校验注解（自整理，不停的测试更新）

    首先我们只使用java官方的 javax.validation.constraints ,足以使用了,不使用spring boot 自身的,自身的与官方的一致,可能会有扩展,但是还得引入包,麻烦,只用 ...