Запись разработки календаря MAC Electron + Vue3 (2) - Список функций

Vue.js Electron
Запись разработки календаря MAC Electron + Vue3 (2) - Список функций

Это второй день моего участия в Gengwen Challenge.Подробности мероприятия смотрите:Обновить вызов

Текущее состояние

запись первого дняПервоначальное намерение сделать версию календаря для Mac в основном объяснено.Прежде чем приступить к галантерее, я подытожу некоторые из функций, которые были завершены на данный момент (записано с использованием Things 3):

И список функций, которые будут выполнены в будущем (все записывается в режиме реального времени, когда вы видите или думаете об этом, чтобы облегчить следующую разработку):

Чтобы заставить себя писать код каждый день, я напрямую создал этот давно поддерживаемый проект на Github, сгенерированный из cawa-93/vite-electron-builder:fanly/fanlymenu.

Каждый может раскошелиться или внести больше предложений и списков функций продукта.

При этом тоже скажу отступление, открытый исходный код, как и участие в этомДеятельность, все надеются, что кто-то может помочь контролировать и заставить себя постоянно совершенствоваться.

Список функций

Как видно из вышеизложенного, основные функции, которых я хочу достичь, в основном включают:

  1. отображать лунный календарь;
  2. Отображение названий праздников по мере необходимости;
  3. отображать альманах;
  4. отображать прогноз погоды;
  5. Функция увеличения количества событий, связанная с GTD;
  6. Увеличьте функцию отображения сообщений, связанных с временной шкалой (таких как члены семьи, родственники и друзья, дни рождения коллег и т. д.);
  7. Синхронизация собственного календаря, функция события Google Calendar;
  8. todo (и многие другие, которые будут обновлены на следующем шаге).

цель кода

Используя Electron + Vue3 + TypeScript, суть состоит в том, чтобы изучить его принципы разработки и освоить каждый фреймворк и языковое мышление.

Electron

Будь то очень популярная IDE для кода: VS Code или InVision, используйтеElectron

И здесь я хочу знать, как передавать сообщения из основного процесса в процесс рендеринга через «события сообщений» и как использовать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,
};

Это можно вызвать непосредственно в коде Vue слоя Renderer:

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

Отправить на основной слойquitВыйдите из события сообщения APP, наконец, зафиксируйте его на основном уровне и выполните относительные операции:

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

...

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

Примечание. Конкретный анализ кода см. в последующих записях!

Vue 3

Как сказал автор You Yuxi, рекомендуется использовать Vue 3 напрямую.Есть много мест, которые стоит тщательно изучить и изучить.Например, использование нескольких моделей в коде шаблона и иерархические отношения между моделями, очень удобно используйте 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 в процессе.

С завтрашнего дня мы перейдем к этапу записи сыпучих материалов сводки функций, который будет продолжен.

Категории