MediumDesk 项目教程

MediumDesk 项目教程

mediumdesk-v1Minimal Desktop App for Medium developed by Medium enthusiasts项目地址:https://gitcode.com/gh_mirrors/me/mediumdesk-v1

1. 项目的目录结构及介绍

MediumDesk 是一个基于 Electron 的桌面应用，用于浏览 Medium 网站。以下是项目的目录结构：

mediumdesk-v1/
├── dist/
├── media/
├── src/
│   ├── index.js
│   ├── main.js
│   ├── renderer.js
│   └── static/
│       ├── Icon.icns
│       ├── Icon.ico
│       └── styles.css
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

• dist/: 构建输出目录。
• media/: 媒体文件目录。
• src/: 源代码目录。
  • index.js: 主入口文件。
  • main.js: 主进程文件。
  • renderer.js: 渲染进程文件。
  • static/: 静态资源目录。
    • Icon.icns: macOS 图标文件。
    • Icon.ico: Windows 图标文件。
    • styles.css: 样式文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• package.json: 项目配置文件。
• README.md: 项目说明文档。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是 Electron 应用的主入口点。以下是 index.js 的简要介绍：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadURL('https://medium.com');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

• app: Electron 的应用模块，负责应用的生命周期。
• BrowserWindow: 创建和管理应用窗口。
• createWindow(): 创建主窗口并加载 Medium 网站。

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的元数据和脚本命令。以下是 package.json 的简要介绍：

{
  "name": "mediumdesk",
  "productName": "MediumDesk",
  "version": "0.2.1",
  "description": "Minimal Desktop App for Medium developed by Medium enthusiasts",
  "main": "src/index.js",
  "license": "MIT",
  "repository": "sivragav/mediumdesk",
  "author": {
    "name": "Sivaprakash Ragavan",
    "email": "mediumdesk@sivragav.com",
    "url": "medium.com/desktop-apps"
  },
  "scripts": {
    "start": "electron src/index.js",
    "build": "npm run build:osx && npm run build:linux && npm run build:windows",
    "build:osx": "electron-packager --overwrite --asar --out=dist --ignore='^media$' --prune --platform=darwin --arch=x64 --icon=static/Icon.icns --app-bundle-id=com.sivragav.mediumdesk --sign='Developer ID Application: Sivaprakash Ragavan (7S2WW76HXL)' --app-version=$npm_package_version && cd dist/MediumDesk-darwin-x64 && codesign --deep --force --verbose --sign 'Developer ID Application: Sivaprakash Ragavan (7S2WW76HXL)' MediumDesk.app && zip -ryXq9 /MediumDesk-osx-${npm_package_version}.zip MediumDesk.app",
    "build

mediumdesk-v1Minimal Desktop App for Medium developed by Medium enthusiasts项目地址:https://gitcode.com/gh_mirrors/me/mediumdesk-v1