阅读 2266

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

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

目前状态

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

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

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

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

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

功能清单

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

  1. 显示农历;
  2. 根据需要,显示节假日名称;
  3. 显示黄历;
  4. 显示天气预报;
  5. 增加事件功能,也就是 GTD 相关功能;
  6. 增加和时间轴有关的消息展示功能 (如家人、亲朋好友、同事的生日等);
  7. 同步自带日历、Google 日历事件功能;
  8. 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 知识。

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

文章分类
前端
文章标签