MediumDesk 项目教程
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