Electron+Vue3 MAC 版日历开发记录(2)——功能清单__Vue.js__Electron

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

theme: fancy

这是我参与更文挑战的第2天，活动详情查看：更文挑战

目前状态

第一天的记录基本交代了制作 Mac 版日历的初衷，在上干货之前，还是总结下到目前为止已经完成的部分功能清单 (使用 Things 3 记录)：

和未来要做的功能列表 (都是在看到或者想到的实时记录下来，便于下一步开发)：

为了督促自己每天都需要写写代码，所以我直接以 generated from cawa-93/vite-electron-builder，在 Github 创建自己长时间维护的这个项目：fanly/fanlymenu。

欢迎大家 fork，或者提出更多建议和产品功能清单。

同时，也说一个题外话，把代码开源了，就好比参加这次活动，都是希望有人帮忙监督，让自己不断完善。

功能清单

从上文也能看出来，我想实现的核心功能主要有：

显示农历；
根据需要，显示节假日名称；
显示黄历；
显示天气预报；
增加事件功能，也就是 GTD 相关功能；
增加和时间轴有关的消息展示功能 (如家人、亲朋好友、同事的生日等)；
同步自带日历、Google 日历事件功能；
todo (还有很多，有待于下一步更新)。

代码目标

使用 Electron + Vue3 + TypeScript，核心还是学习其开发原理，掌握各个框架和语言思维。

Electron

无论是现在很火的代码 IDE：VS Code，还是 InVision，都使用 Electron

而在这里，我想了解如何通过「消息事件」从 Main 进程将消息传递给渲染器进程，以及如何借助 Preload scripts 达到目标，如本文代码：

createWindow(): BrowserWindow {
const window = new BrowserWindow({
  width: 600,
  height: 700,
  resizable: false,
  alwaysOnTop: true,
  show: false,
  frame: false,
  webPreferences: {
    webSecurity: false,
    preload: join(__dirname, '../../preload/dist/index.cjs'),
    contextIsolation: this.env.MODE !== 'test',   // Spectron tests can't work with contextIsolation: true
    enableRemoteModule: this.env.MODE === 'test', // Spectron tests can't work with enableRemoteModule: false
  },
});

然后在 preload/src/index.ts，增加 ipcRenderer：

import {contextBridge, ipcRenderer} from 'electron';

const apiKey = 'electron';
/**
 * @see https://github.com/electron/electron/issues/21437#issuecomment-573522360
 */
const api: ElectronApi = {
  versions: process.versions,
  ipcRenderer: ipcRenderer,
};

这样就可以在 Renderer 层的 Vue 代码中直接调用：

quit(): void {
    window.electron.ipcRenderer.send('quit');
},

给 Main 层发送 quit 退出 APP 的消息事件，最后在 Main 层捕获，并执行相对于的操作：

import { app, protocol, ipcMain } from 'electron';

...

ipcMain.on('quit', () => {
  app.quit();
});

注：具体代码分析，看后续的记录！

Vue 3

正如尤雨溪作者说的，推荐大家直接使用 Vue 3，有很多地方值得推敲和学习，比如，在模板代码中使用多个 Model，以及 Model 有层级关系，这时候用 Vue 3 就显得很方便：

<template>
  <div>
    <fullcalendar-sub
      v-model:changeShowFestivals="changeShowFestivals"
      v-model:changeShowWeather="changeShowWeather"
      v-model:weather="weather"
      v-model:location="location"
      @settingClick="visibleFullSetting = true"
      @dateClick="dateClick"
    />
    <weather-sub
      v-if="changeShowWeather"
      v-model:changeShowWeather="changeShowWeather"
      v-model:weather="weather"
      v-model:location="location"
    />
    <setting-sub
      v-model:visibleFullSetting="visibleFullSetting"
      v-model:changeShowWeather="changeShowWeather"
      v-model:changeShowFestivals="changeShowFestivals"
      v-model:location="location"
    />
    <date-view-sub
      v-model:visibleFullDateView="visibleFullDateView"
      v-model:date="date"
    />
  </div>
</template>

而这里，还有一些祖孙传递关系，可以直接使用函数处理同步回传：

<InputSwitch
  v-model="inputSwitchWeatherModel"
  @change="$emit('update:changeShowWeather', inputSwitchWeatherModel)"
/>

...

emits: [
'update:visibleFullSetting',
'update:changeShowFestivals',
'update:changeShowWeather',
'update:location',
],

具体使用，参考官网文档

TypeScript

在 vite-electron-builder 模板中，还是 Javascript 占的比例多，所以接下来如何使用 TypeScript，并提高 TypeScript 占比是我的下一步目标：

同时，自己也买了相关的书，作为工具书，放在旁边，可以随时翻看：

小结

今天主要整理出目前的功能完成情况，主要功能清单，以及在这过程，我想学到的关于 Electron、Vue 3 和 TypeScript 知识。

明天开始进入功能总结的干货记录阶段，未完待续。