当前位置： 首页 > news >正文

electron 网页TodoList工具打包成win桌面应用exe

news 2026/3/27 15:55:50

参考：
electron安装（支持win、mac、linux桌面应用）
https://blog.csdn.net/weixin_42357472/article/details/140643624
TodoList工具
https://blog.csdn.net/weixin_42357472/article/details/140618446

electron打包过程：

要将这个TodoList网页应用转换成Mac、Windows和Linux的桌面应用，你可以使用Electron框架。Electron允许你使用web技术（HTML、CSS和JavaScript）来创建跨平台的桌面应用。以下是将你的TodoList转换为Electron应用的步骤：

  1. 准备工作：
    首先，确保你的系统中安装了Node.js和npm。

  2. 创建一个新的Electron项目：
    创建一个新文件夹，并在其中初始化一个新的Node.js项目：

    mkdir todolist-app
cd todolist-app
npm init -y

这里TodoList工具主要是：index.html、styles.css 、script.js
其他是electron打包需要配置文件：main.js 、package.json
在这里插入图片描述

  1. 安装Electron：

    cnpm install electron --save-dev

  2. 创建主进程文件：
    在项目根目录创建一个名为main.js的文件，内容如下：

    const { app, BrowserWindow } = require('electron')
const path = require('path')function createWindow () {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false}})win.loadFile('index.html')
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

  3. 修改package.json：
    在package.json文件中添加以下内容：

    {"main": "main.js","scripts": {"start": "electron ."}
}

  4. 将你的HTML、css、js文件放在项目根目录
    index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TodoList</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>TodoList</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="Enter a new task" required><button type="submit" id="add-button">Add</button></form><ul id="todo-list"></ul><script src="script.js"></script>
</body>
</html>

styles.css

body {font-family: Arial, sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;
}
h1 {text-align: center;
}
#todo-form {display: flex;margin-bottom: 20px;
}
#todo-input {flex-grow: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;
}
#add-button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;
}
#todo-list {list-style-type: none;padding: 0;
}
.todo-item {display: flex;align-items: center;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 4px;
}
.todo-item.completed {text-decoration: line-through;opacity: 0.6;
}
.todo-item input[type="checkbox"] {margin-right: 10px;
}
.delete-button {margin-left: auto;background-color: #f44336;color: white;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;
}

script.js

const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');function loadTodos() {chrome.storage.sync.get(['todos'], function(result) {const todos = result.todos || [];todos.forEach(todo => {addTodoToDOM(todo.text, todo.completed);});});
}function saveTodos() {const todos = Array.from(todoList.children).map(li => ({text: li.querySelector('span').textContent,completed: li.classList.contains('completed')}));chrome.storage.sync.set({todos: todos});
}function addTodoToDOM(text, completed = false) {const li = document.createElement('li');li.className = 'todo-item' + (completed ? ' completed' : '');li.innerHTML = `<input type="checkbox" ${completed ? 'checked' : ''}><span>${text}</span><button class="delete-button">Delete</button>`;li.querySelector('input[type="checkbox"]').addEventListener('change', function() {li.classList.toggle('completed');if (li.classList.contains('completed')) {todoList.appendChild(li);} else {todoList.insertBefore(li, todoList.firstChild);}saveTodos();});li.querySelector('.delete-button').addEventListener('click', function() {li.remove();saveTodos();});if (completed) {todoList.appendChild(li);} else {todoList.insertBefore(li, todoList.firstChild);}
}todoForm.addEventListener('submit', function(e) {e.preventDefault();if (todoInput.value.trim() === '') return;addTodoToDOM(todoInput.value);saveTodos();todoInput.value = '';
});loadTodos();

  1. 运行应用：
    现在你可以通过以下命令运行你的Electron应用：

    npm start

看效果
在这里插入图片描述

  1. 打包应用：
    要为不同平台打包应用，你可以使用electron-builder。首先安装它：

    cnpm install electron-builder --save-dev

    然后在package.json中添加build配置

    {"build": {"appId": "com.yourcompany.todolist","mac": {"category": "public.app-category.productivity"},"win": {"target": ["nsis"]},"linux": {"target": ["AppImage","deb"]}},"scripts": {"start": "electron .","build": "electron-builder --mac --win --linux"}
}

    在这里插入图片描述

最终package.json文件：
icon是图标应用，大小至少需要放256*256大小像素的

{"name": "todolist-app","version": "1.0.0","main": "main.js","build": {"appId": "com.yourcompany.todolist","mac": {"category": "public.app-category.productivity"},"win": {"icon": "icons/icon.png","target": ["nsis"]},"linux": {"target": ["AppImage","deb"]}},"scripts": {"start": "electron .","build": "electron-builder  --win"},"keywords": [],"author": "","license": "ISC","description": "","devDependencies": {"electron": "^31.2.1","electron-builder": "^24.13.3"}
}

  1. 构建应用：
    运行以下命令来为所有平台构建应用：

    npm run build

    这将在dist文件夹中生成针对Mac、Windows和Linux的安装包。
    注意：这里"build": “electron-builder --win” 只生成win平台的，其他linux需wsl打开或者linux平台操作；mac只能mac电脑操作

在这里插入图片描述
运行完会再dist文件下
在这里插入图片描述
双击exe启动
在这里插入图片描述

相关文章：

electron 网页TodoList工具打包成win桌面应用exe

参考&#xff1a; electron安装&#xff08;支持win、mac、linux桌面应用&#xff09; https://blog.csdn.net/weixin_42357472/article/details/140643624 TodoList工具 https://blog.csdn.net/weixin_42357472/article/details/140618446 electron打包过程&#xff1a; 要将…...

编程日记 2024/7/28 0:27:10

数据结构之判断二叉树是否为搜索树（C/C++实现）

文章目录 判断二叉树是否为搜索树方法一&#xff1a;递归法方法二&#xff1a;中序遍历法总结 二叉树是一种非常常见的数据结构&#xff0c;它在计算机科学中有着广泛的应用。二叉搜索树&#xff08;Binary Search Tree&#xff0c;简称BST&#xff09;是二叉树的一种特殊形式&…...

编程日记 2024/7/28 0:26:09

golang长连接的误用

误用一&#xff1a;忘记读取响应的body 由于忘记读取响应的body导致创建大量处于TIME_WAIT状态的连接&#xff08;同时产生大量处于transport.go的readLoop和writeLoop的协程&#xff09; 在linux下运行下面的代码: package mainimport ("fmt""html"&qu…...

编程日记 2024/7/28 0:25:08

Springboot @Validate @Valid 基于复杂嵌套对象的参数校验示例

Springboot Validate Valid 基于复杂嵌套对象的参数校验示例 复杂对象 Data public class Object1 {Length(max 50,message "长度不能超过50位字符")NotBlank(message "名称不能为空")private String name;NotNull(message "不能为空")pri…...

编程日记 2024/7/28 0:23:06

算力共享下的，分级路由转发报文协议与通告

目录 网络双 SLA 约束 一、双SLA约束的定义与背景 二、双SLA约束的应用场景 三、双SLA约束的管理与实施 四、双SLA约束的优势与挑战 算力共享下的，分级路由转发报文协议与通告 基础设施即服务（IaaS）类 型算力资源 函数即服务（FaaS）类型算力服务 软件即服务（SaaS…...

编程日记 2024/7/28 0:22:05

滚动数组详解

滚动数组详解 何为滚动数组&#xff1f;滚动数组是如何优化空间的&#xff1f;交替滚动例题&#xff1a;来自某某轮廓线DP的题目 自我滚动(~~不如交替~~ 完结&#xff01;&#xff01;&#xff01; ( 宇宙免责任书&#xff1a;我用的是C) 何为滚动数组&#xff1f; 什么是滚动…...

编程日记 2024/7/28 0:17:00

C 语言动态链表

线性结构->顺序存储->动态链表 一、理论部分 从起源中理解事物&#xff0c;就是从本质上理解事物。 -杜勒鲁奇 动态链表是通过结点&#xff08;Node&#xff09;的集合来非连续地存储数据&#xff0c;结点之间通过指针相互连接。 动态链表本身就是一种动态分配内存的…...

编程日记 2024/7/28 0:14:58

【Leetcode】二十、记忆化搜索：零钱兑换

文章目录 1、记忆化搜索2、leetcode509&#xff1a;斐波那契数列3、leetcode322&#xff1a;零钱兑换 1、记忆化搜索 也叫备忘录&#xff0c;即把已经计算过的结果存下来&#xff0c;下次再遇到&#xff0c;就直接取&#xff0c;不用重新计算。目的是以减少重复计算。 以前面提…...

编程日记 2024/7/28 0:13:57

json数据格式 继续学习

1.定义 轻量级的数据交互格式&#xff0c;可以按照json数据格式去组织和封装数据。 本质是一个带有特定格式的字符串。 2.功能 负责不同编程语言中的数据传递和交互。 3.json数据格式转化 """ 演示json数据和python字典之间的转换 """ impor…...

编程日记 2024/7/28 0:12:55

gradle 构建项目添加版本信息

gradle 构建项目添加版本信息&#xff0c;打包使用 spring boot 的打包插件 build.gradle 配置文件 bootJar {manifest {attributes(Project-Name: project.name,Project-Version: project.version,"project-Vendor": "XXX Corp","Built-By": &…...

编程日记 2024/7/28 0:11:54

vue3 学习笔记17 -- 基于el-menu封装菜单

vue3 学习笔记17 – 基于el-menu封装菜单 前提条件&#xff1a;组件创建完成 配置路由 // src/router/index.ts import { createRouter, createWebHashHistory } from vue-router import type { RouteRecordRaw } from vue-router export const Layout () > import(/lay…...

编程日记 2024/7/28 0:08:49

使用 Redis 实现验证码、token 的存储，用自定义拦截器完成用户认证、并使用双重拦截器解决 token 刷新的问题

可以看一下我以前做过的笔记&#xff1a;黑马点评 短信登录部分 基于session实现登录流程 1.发送验证码 用户在提交手机号后&#xff0c;会校验手机号是否合法&#xff0c;如果不合法&#xff0c;则要求用户重新输入手机号 如果手机号合法&#xff0c;后台此时生成对应的验…...

编程日记 2024/7/28 0:06:48

反转链表 - 力扣（LeetCode）C语言

206. 反转链表 - 力扣&#xff08;LeetCode&#xff09;( 点击前面链接即可查看题目) /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* reverseList(struct ListNode* head) {if(head NULL)…...

编程日记 2024/7/28 0:05:46

【Linux】进程间通信（1）：进程通信概念与匿名管道

人与人之间是如何通信的&#xff1f;举个简单的例子&#xff0c;假如我是月老&#xff0c;我要为素不相识的但又渴望爱情的男女两方牵红线。我需要收集男方的信息告诉女方&#xff0c;收集女方的信息告诉男方&#xff0c;然后由男女双方来决定是否继续。对于他们而言&#xff0…...

编程日记 2024/7/27 23:59:42

Spring从入门到精通 01

文章目录 1. 依赖注入 (Dependency Injection, DI)2. 面向切面编程 (Aspect-Oriented Programming, AOP)3. 事务管理4. 简化 JDBC 开发5. 集成各种框架和技术6. 模块化和扩展性&#xff1a;主要的 Spring 模块&#xff1a;Core Container&#xff1a;AOP 模块&#xff1a;Data …...

编程日记 2024/7/27 23:55:39

C语言经典习题25

冒泡排序 对一维数组进行升序排序&#xff0c;然后在数组中输入20个数&#xff0c;将排序后的结果打印输出。 #include<stdio.h> #define N 20 int main() {int a[N];int i;for(i0;i<N;i) //初始化数组的数 {scanf("%d",&a);}for(i0;…...

编程日记 2024/7/27 23:53:37

2-47 基于matlab的时域有限差分法(FDTD法)拉夫等效原理进行时谐场外推

基于matlab的时域有限差分法(FDTD法)拉夫等效原理进行时谐场外推。外推边界距离吸收边界的距离、电磁场循环、傅立叶变换提起幅值和相位、各远区剖分点电场、方向系数计算等操作&#xff0c;得出可视化结果。程序已调通&#xff0c;可直接运行。 2-47 时域有限差分法(FDTD法) 拉…...

编程日记 2024/7/27 23:50:34

JupyterNotebook快捷键 自用

COMMAND MODE —————————————————————————————— Up Down cells的上下选择 A B 在上/下方插入cell C V X 复制/粘贴/剪切cell 双击D 删除所选cell Z 恢复被删除的cell 双击I Interrupt中断内核 Shift Enter 运行cell并选择下方 EDIT MODE ———…...

编程日记 2024/7/27 23:49:33

【我的OpenGL学习进阶之旅】讲一讲GL_TEXTURE_2D和GL_TEXTURE_EXTERNAL_OES的区别

在使用OpenGL ES进行图形图像开发时，我们常使用GL_TEXTURE_2D纹理类型，它提供了对标准2D图像的处理能力。这种纹理类型适用于大多数场景，可以用于展示静态贴图、渲染2D图形和进行图像处理等操作。 另外，有时我们需要从Camera或外部视频源读取数据帧并进行处理。这时，我们…...

编程日记 2024/7/27 23:48:33

Makefile 如何将生成的 .o 文件放到指定文件夹

研究了不少文章&#xff0c;我行通了一个&#xff0c;但是也不全&#xff0c;目前只能适用当前文件夹&#xff0c;如果源文件有子文件夹处理不了&#xff0c;还得继续研究。很多人说编译完把O文件移动走或者直接删掉。我想说的是不符合我的要求&#xff0c;移走或者删除O文件&a…...

编程日记 2024/7/27 23:46:31

3步颠覆性解决方案：零成本条码生成技术让企业彻底告别付费依赖

3步颠覆性解决方案&#xff1a;零成本条码生成技术让企业彻底告别付费依赖 【免费下载链接】librebarcode Libre Barcode: barcode fonts for various barcode standards. 项目地址: https://gitcode.com/gh_mirrors/li/librebarcode Libre Barcode开源字体库通过字体化…...

编程新知 2026/3/27 15:10:51

LFM2.5-1.2B-Thinking-GGUF基础教程：单页Web界面交互逻辑与后处理机制

LFM2.5-1.2B-Thinking-GGUF基础教程&#xff1a;单页Web界面交互逻辑与后处理机制 1. 模型与平台介绍 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;专为低资源环境优化设计。这个镜像采用内置GGUF模型文件和llama.cpp运行时&#xff0c;提供了…...

编程新知 2026/3/27 15:08:51

LongCat-Image-Editn部署案例：中小企业低成本AI修图方案，替代Photoshop高频操作

LongCat-Image-Editn部署案例&#xff1a;中小企业低成本AI修图方案&#xff0c;替代Photoshop高频操作 重要提示&#xff1a;本文所有操作均在合规合法的网络环境下进行&#xff0c;所有技术方案均符合相关法律法规要求。 1. 引言&#xff1a;中小企业修图痛点与解决方案 对于…...

编程新知 2026/3/27 14:54:49

EPLAN默认工具栏隐藏功能大揭秘：从复制格式到表格式编辑的实战技巧

EPLAN默认工具栏隐藏功能大揭秘&#xff1a;从复制格式到表格式编辑的实战技巧 在电气设计领域&#xff0c;EPLAN作为行业标杆软件&#xff0c;其默认工具栏中隐藏着许多未被充分发掘的效率利器。这些功能往往被常规操作所掩盖&#xff0c;却能在复杂项目设计中节省大量时间。…...

编程新知 2026/3/27 11:54:16

当心“Pin-to-Pin兼容“陷阱：ICM-42688国产替代芯片深度拆解与避坑指南

两句话总结&#xff1a;近期TDK ICM-42688-P价格暴涨至百元且一芯难求&#xff0c;立创商城上出现了华轩阳、Tokmas等"国产替代"。本文通过详细对比三家datasheet数据手册&#xff0c;揭示所谓"兼容"背后的软件陷阱与性能差异。结论可能出乎你意料&#xf…...

编程新知 2026/3/27 11:36:02

多模态扩展实验：OpenClaw+Qwen3-32B处理图片描述生成

多模态扩展实验&#xff1a;OpenClawQwen3-32B处理图片描述生成 1. 实验背景与动机 最近在探索如何将OpenClaw的自动化能力扩展到视觉领域。作为一个长期依赖文本交互的框架&#xff0c;OpenClaw能否结合多模态大模型处理图像任务&#xff1f;这引发了我的兴趣。恰好手头有台…...

编程新知 2026/3/27 11:29:59

质子交换膜燃料电池Comsol完整版仿真模型：涵盖两相流非等温雾状流道、液态水相变及扩散项，考...

质子交换膜燃料电池仿真Comsol完整版 虽然氢电发文量多了&#xff0c;但是氢电模型复杂程度和别的领域没法比&#xff0c;两相流非等温的氢燃料电池&#xff0c;跑通的都得好几千的&#xff0c;这个模型的流道和内侧都是多相流&#xff0c;这个里面是雾状流的流道&#xff0c;目…...

编程新知 2026/3/27 11:09:53

破解MSG文件解析难题：自动化处理工具让邮件数据提取效率提升90%

破解MSG文件解析难题&#xff1a;自动化处理工具让邮件数据提取效率提升90% 【免费下载链接】msg-extractor Extracts emails and attachments saved in Microsoft Outlooks .msg files 项目地址: https://gitcode.com/gh_mirrors/ms/msg-extractor 在日常办公中&#x…...

编程新知 2026/3/27 11:03:53

老设备焕新：OCLP更新系统全解析

老设备焕新&#xff1a;OCLP更新系统全解析 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 随着苹果对旧款Mac设备的系统支持逐渐终止&#xff0c;许多仍能正常工作的老设…...

编程新知 2026/3/27 10:31:45

vLLM-v0.17.1实操手册：vLLM服务升级策略与滚动更新最佳实践

vLLM-v0.17.1实操手册&#xff1a;vLLM服务升级策略与滚动更新最佳实践 1. vLLM框架概述 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;最新发布的v0.17.1版本带来了多项性能优化和功能增强。这个开源项目最初由加州大学伯克利分校的研究团队开发&am…...

编程新知 2026/3/27 8:34:33