我是靠谱客的博主 热心网友,这篇文章主要介绍让AI写一个简化版的“本地电子书阅读器”学习用,现在分享给大家,希望可以做个参考。

以下是一个简化版本地电子书阅读器(支持 .txt 文件),用 Electron + HTML + JavaScript 构建,适合学习和拓展。


🧱 项目结构

simple-ebook-reader/
├── main.js            // Electron 主进程
├── package.json       // 项目信息
├── preload.js         // 安全预加载脚本
├── index.html         // 主页面
├── renderer.js        // 前端逻辑


📦 1. package.json

{
  "name": "simple-ebook-reader",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^29.0.0"
  }
}
运行:
npm install
npm run start


🚀 2. main.js

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

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

  win.loadFile('index.html');
}

ipcMain.handle('open-file', async () => {
  const result = await dialog.showOpenDialog({
    filters: [{ name: 'Text Files', extensions: ['txt'] }],
    properties: ['openFile']
  });
  if (result.canceled || result.filePaths.length === 0) return '';

  const filePath = result.filePaths[0];
  return fs.readFileSync(filePath, 'utf-8');
});

app.whenReady().then(createWindow);


🔒 3. preload.js

js复制编辑const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('readerAPI', {
  openFile: () => ipcRenderer.invoke('open-file')
});


🖼️ 4. index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>简易电子书阅读器</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    #content { white-space: pre-wrap; margin-top: 20px; line-height: 1.6; }
    button { padding: 10px 20px; font-size: 16px; }
  </style>
</head>
<body>
  <h1>📖 简易电子书阅读器</h1>
  <button onclick="loadBook()">打开 TXT 文件</button>
  <div id="content">请打开一本书开始阅读...</div>

  <script src="renderer.js"></script>
</body>
</html>


🧠 5. renderer.js

async function loadBook() {
  const content = await window.readerAPI.openFile();
  if (content) {
    document.getElementById('content').innerText = content;
  }
}


✅ 功能总结:


功能支持情况
本地 TXT 文件读取
简单界面阅读
安全进程隔离✅ 使用 preload.js


🛠️ 可扩展功能建议:

  • 📑 支持 .epub(用 epub.js)
  • 📖 阅读进度保存
  • 🌙 黑夜模式
  • 📚 多书架管理
  • 🔍 搜索/字体调节

最后

以上就是热心网友最近收集整理的关于让AI写一个简化版的“本地电子书阅读器”学习用的全部内容,更多相关让AI写一个简化版内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(89)

评论列表共有 0 条评论

立即
投稿
返回
顶部