前一段时间我用 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. vue中jsx

    //item.vue 文件如下 <template> <div> <h1 v-if="id===1"> <slot></slo ...

  2. 【一个小发现】VictoriaMetrics 中 vmselect 的 `-search.denyPartialResponse` 选项不应该开启

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 一直以为vmselect 的 -search.denyPa ...

  3. x509: cannot validate certificate for xxx because it doesn't contain any IP SANs

    项目中有时候需要访问https网站,但如果该网站使用的是自建证书,那client端验证server端证书时,有时候会报错: x509: cannot validate certificate for ...

  4. ILRuntime性能测试

    我们公司有一个Unity原生开发语言C#写的项目,目前已经在安卓测试过多次,上架IOS在考虑热更,所以对ILRuntim进行性能测试,在测试过程中已经按照官方文档进行了CLR绑定和生成Release的 ...

  5. TienChin-课程管理-展示课程列表

    配置按钮权限 博主这里就不贴SQL了,自行手动添加一下吧. 更改表结构 ALTER TABLE `tienchin_course` MODIFY COLUMN `info` varchar(255) ...

  6. 微信小程序-页面生命周期

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

  7. JVM（Java虚拟机） 整理

    JVM整体结构 本文主要说的是HotSpot虚拟机, JVM 全称是 Java Virtual Machine,中文译名:Java虚拟机 简化一下: Java字节码文件 Class文件本质上是一个以8 ...

  8. 6.8 Windows驱动开发：内核枚举Registry注册表回调

    在笔者上一篇文章<内核枚举LoadImage映像回调>中LyShark教大家实现了枚举系统回调中的LoadImage通知消息,本章将实现对Registry注册表通知消息的枚举,与LoadI ...

  9. MySQL 存储过程与函数(精简笔记)

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...

  10. Linux 系统Apache配置SSL证书

    在Centos7系列系统下,配置Apache服务器,给服务器增加SSL证书功能,让页面访问是不再提示不安全,具体操作流程如下. 1.第一步首先需要安装mod_ssl模块,执行yum install - ...