网站各个功能模块组建网站

网站各个功能模块,组建网站,网站建设设计文档模板下载,外贸销售是做什么工作的随着鸿蒙 OS 生态的持续完善#xff0c;前端开发者如何低门槛切入鸿蒙生态成为热门话题。Electron 作为成熟的跨端桌面应用框架#xff0c;可借助鸿蒙 OS 的 Linux 兼容层实现无缝运行#xff0c;无需学习 ArkTS 即可快速开发鸿蒙桌面应用。 本文将从环境搭建、核心功能开发…随着鸿蒙 OS 生态的持续完善前端开发者如何低门槛切入鸿蒙生态成为热门话题。Electron 作为成熟的跨端桌面应用框架可借助鸿蒙 OS 的 Linux 兼容层实现无缝运行无需学习 ArkTS 即可快速开发鸿蒙桌面应用。本文将从环境搭建、核心功能开发、鸿蒙适配优化、打包部署四个维度手把手教你开发一个可在鸿蒙设备上运行的 Electron 待办应用所有代码案例均可直接复制运行适合前端开发者快速上手。文末附项目完整代码仓库地址方便大家下载调试一、核心原理Electron 为何能运行在鸿蒙 OS 上鸿蒙 OS 3.0 及以上版本支持 Linux 兼容层可运行 Linux-x64 架构的应用。Electron 本质是 “Chromium 内核 Node.js 运行时” 的组合通过打包为 Linux-x64 版本即可在鸿蒙设备的 Linux 兼容层中运行。关键适配点关闭 Electron 的上下文隔离鸿蒙兼容必需适配鸿蒙窗口样式去除默认边框采用扁平化设计数据存储路径适配鸿蒙设备的用户目录打包为 Linux-x64 架构的应用包。二、环境搭建开发前的准备工作1. 开发机环境配置必备工具Node.js16.x LTS、VS Code、Electron22.x、鸿蒙设备OS 3.0开启开发者模式bash运行# 1. 检查Node.js版本需16.x及以上 node -v # v16.19.0 为例 # 2. 全局安装Electron npm install electron -g # 3. 全局安装打包工具electron-packager npm install electron-packager -g # 4. 创建项目目录并初始化 mkdir harmony-electron-todo cd harmony-electron-todo npm init -y修改 package.json 核心配置添加入口文件、启动脚本、依赖json{ name: harmony-electron-todo, version: 1.0.0, main: main.js, // 主进程入口 scripts: { start: electron ., // 本地调试 package: electron-packager . harmony-todo --platformlinux --archx64 --outdist // 打包Linux-x64版本 }, dependencies: { electron: ^22.3.2 } }2. 鸿蒙设备环境配置1开启开发者模式进入鸿蒙设备「设置」→「关于手机」连续点击版本号 7 次开启开发者模式2开启 Linux 兼容层进入「设置」→「开发者选项」找到「Linux 环境」并开启首次开启需下载组件约 500MB3开启 USB 调试在开发者选项中开启「USB 调试」便于后续将应用传输到设备。三、核心功能开发待办应用实现含鸿蒙适配项目结构清晰划分主进程、渲染进程、预加载脚本textharmony-electron-todo/ ├── main.js # 主进程窗口创建、数据存储、IPC通信 ├── preload.js # 预加载脚本安全通信桥接 ├── index.html # 渲染进程UI界面交互逻辑 ├── package.json # 项目配置 └── dist/ # 打包输出目录自动生成1. 主进程main.js核心逻辑中枢负责窗口创建、待办数据本地存储、与渲染进程的 IPC 通信关键代码包含鸿蒙适配配置javascript运行const { app, BrowserWindow, ipcMain } require(electron); const fs require(fs); const path require(path); // 鸿蒙设备数据存储路径适配用户目录 const TODO_FILE_PATH path.join(app.getPath(userData), todo-list.json); // 读取待办数据容错处理文件不存在则创建空文件 function readTodoList() { try { if (!fs.existsSync(TODO_FILE_PATH)) { fs.writeFileSync(TODO_FILE_PATH, JSON.stringify([]), utf8); return []; } const data fs.readFileSync(TODO_FILE_PATH, utf8); return JSON.parse(data); } catch (error) { console.error(读取待办失败, error); return []; } } // 写入待办数据 function writeTodoList(todoList) { try { fs.writeFileSync(TODO_FILE_PATH, JSON.stringify(todoList, null, 2), utf8); return true; } catch (error) { console.error(写入待办失败, error); return false; } } // 创建鸿蒙风格窗口 function createWindow() { let mainWindow new BrowserWindow({ width: 600, height: 800, title: 鸿蒙待办工具, webPreferences: { nodeIntegration: true, contextIsolation: false, // 鸿蒙兼容必需关闭上下文隔离 preload: path.join(__dirname, preload.js) }, // 鸿蒙样式适配去除默认边框扁平化设计 frame: false, titleBarStyle: hidden, transparent: false // 禁用透明部分鸿蒙设备支持不佳 }); // 加载渲染进程页面 mainWindow.loadFile(index.html); // 开发模式打开开发者工具 mainWindow.webContents.openDevTools(); // 窗口关闭事件 mainWindow.on(closed, () { mainWindow null; }); } // IPC通信监听渲染进程请求 // 1. 获取待办列表 ipcMain.on(get-todo-list, (event) { const todoList readTodoList(); event.reply(todo-list-reply, todoList); }); // 2. 添加待办 ipcMain.on(add-todo, (event, todoText) { const todoList readTodoList(); const newTodo { id: Date.now().toString(), // 用时间戳作为唯一ID text: todoText, completed: false }; todoList.push(newTodo); const isSuccess writeTodoList(todoList); event.reply(add-todo-reply, { isSuccess, todo: newTodo }); }); // 3. 切换待办状态完成/未完成 ipcMain.on(toggle-todo, (event, todoId) { const todoList readTodoList(); const todo todoList.find(item item.id todoId); if (todo) { todo.completed !todo.completed; writeTodoList(todoList); event.reply(toggle-todo-reply, todoList); } }); // 4. 删除待办 ipcMain.on(delete-todo, (event, todoId) { let todoList readTodoList(); todoList todoList.filter(item item.id ! todoId); writeTodoList(todoList); event.reply(delete-todo-reply, todoList); }); // 5. 窗口控制最小化/关闭适配鸿蒙窗口操作 ipcMain.on(window-control, (event, action) { const mainWindow BrowserWindow.getFocusedWindow(); switch (action) { case close: mainWindow.close(); break; case minimize: mainWindow.minimize(); break; } }); // 应用就绪后创建窗口 app.whenReady().then(createWindow); // 关闭所有窗口时退出应用Windows/Linux app.on(window-all-closed, () { if (process.platform ! darwin) { app.quit(); } }); // 激活应用时创建窗口macOS app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) { createWindow(); } });2. 预加载脚本preload.js安全通信桥接作为主进程与渲染进程的通信中间件暴露安全的 API 供渲染进程调用避免直接暴露 Node.js 能力javascript运行const { contextBridge, ipcRenderer } require(electron); // 暴露API到渲染进程的window对象 contextBridge.exposeInMainWorld(todoAPI, { // 获取待办列表 getTodoList: () { return new Promise((resolve) { ipcRenderer.send(get-todo-list); ipcRenderer.once(todo-list-reply, (event, data) { resolve(data); }); }); }, // 添加待办 addTodo: (todoText) { return new Promise((resolve) { ipcRenderer.send(add-todo, todoText); ipcRenderer.once(add-todo-reply, (event, data) { resolve(data); }); }); }, // 切换待办状态 toggleTodo: (todoId) { return new Promise((resolve) { ipcRenderer.send(toggle-todo, todoId); ipcRenderer.once(toggle-todo-reply, (event, data) { resolve(data); }); }); }, // 删除待办 deleteTodo: (todoId) { return new Promise((resolve) { ipcRenderer.send(delete-todo, todoId); ipcRenderer.once(delete-todo-reply, (event, data) { resolve(data); }); }); }, // 窗口控制 windowControl: (action) { ipcRenderer.send(window-control, action); } });3. 渲染进程index.htmlUI 与交互采用鸿蒙扁平化设计风格实现待办添加、状态切换、删除等交互功能html预览!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title鸿蒙待办工具/title style /* 鸿蒙风格样式扁平化、简洁 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: HarmonyOS Sans SC, sans-serif; } body { background-color: #f5f5f7; color: #1d1d1f; } /* 自定义标题栏适配鸿蒙窗口 */ .title-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background-color: #ffffff; border-bottom: 1px solid #e5e5e7; } .title { font-size: 18px; font-weight: 500; } .control-btn { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; border-radius: 50%; transition: background-color 0.2s; } .control-btn:hover { background-color: #f0f0f2; } /* 待办容器 */ .container { padding: 20px; } /* 添加待办区域 */ .add-todo { display: flex; gap: 10px; margin-bottom: 20px; } #todo-input { flex: 1; padding: 12px 16px; border: 1px solid #e5e5e7; border-radius: 8px; font-size: 16px; outline: none; } #todo-input:focus { border-color: #007aff; } #add-btn { padding: 0 20px; background-color: #007aff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background-color 0.2s; } #add-btn:hover { background-color: #0062cc; } /* 待办列表 */ .todo-list { background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); overflow: hidden; } .todo-item { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e5e5e7; transition: background-color 0.2s; } .todo-item:last-child { border-bottom: none; } .todo-item:hover { background-color: #f9f9fa; } .todo-checkbox { width: 20px; height: 20px; margin-right: 16px; cursor: pointer; } .todo-text { flex: 1; font-size: 16px; } .todo-text.completed { text-decoration: line-through; color: #86868b; } .delete-btn { color: #ff3b30; background: transparent; border: none; cursor: pointer; font-size: 16px; padding: 8px; border-radius: 4px; transition: background-color 0.2s; } .delete-btn:hover { background-color: #ffebe9; } /* 空状态提示 */ .empty-tip { text-align: center; padding: 60px 20px; color: #86868b; font-size: 16px; } /style /head body !-- 自定义标题栏 -- div classtitle-bar div classtitle鸿蒙待办工具/div div button classcontrol-btn onclickwindow.todoAPI.windowControl(minimize)—/button button classcontrol-btn onclickwindow.todoAPI.windowControl(close)✕/button /div /div !-- 主内容区 -- div classcontainer !-- 添加待办 -- div classadd-todo input typetext idtodo-input placeholder请输入待办内容... button idadd-btn添加/button /div !-- 待办列表 -- div classtodo-list idtodo-list div classempty-tip暂无待办点击添加按钮创建你的第一条待办吧/div /div /div script // 页面加载完成后初始化 window.addEventListener(DOMContentLoaded, async () { const todoInput document.getElementById(todo-input); const addBtn document.getElementById(add-btn); const todoListEl document.getElementById(todo-list); // 加载待办列表 async function loadTodoList() { const todoList await window.todoAPI.getTodoList(); renderTodoList(todoList); } // 渲染待办列表 function renderTodoList(todoList) { if (todoList.length 0) { todoListEl.innerHTML div classempty-tip暂无待办点击添加按钮创建你的第一条待办吧/div; return; } let html ; todoList.forEach(todo { html div classtodo-item data-id${todo.id} input typecheckbox classtodo-checkbox ${todo.completed ? checked : } div classtodo-text ${todo.completed ? completed : }${todo.text}/div button classdelete-btn删除/button /div ; }); todoListEl.innerHTML html; // 绑定待办项事件状态切换、删除 bindTodoEvents(); } // 绑定待办项事件 function bindTodoEvents() { // 状态切换 document.querySelectorAll(.todo-checkbox).forEach(checkbox { checkbox.addEventListener(change, async (e) { const todoId e.target.closest(.todo-item).dataset.id; const todoList await window.todoAPI.toggleTodo(todoId); renderTodoList(todoList); }); }); // 删除待办 document.querySelectorAll(.delete-btn).forEach(btn { btn.addEventListener(click, async (e) { const todoId e.target.closest(.todo-item).dataset.id; const todoList await window.todoAPI.deleteTodo(todoId); renderTodoList(todoList); }); }); } // 添加待办 addBtn.addEventListener(click, async () { const todoText todoInput.value.trim(); if (!todoText) { alert(请输入待办内容); return; } const { isSuccess, todo } await window.todoAPI.addTodo(todoText); if (isSuccess) { todoInput.value ; loadTodoList(); } else { alert(添加待办失败请重试); } }); // 回车添加待办 todoInput.addEventListener(keydown, (e) { if (e.key Enter) { addBtn.click(); } }); // 初始化加载待办列表 loadTodoList(); }); /script /body /html四、鸿蒙适配优化解决核心兼容问题1. 窗口样式适配关闭默认窗口边框frame: false自定义标题栏契合鸿蒙系统的扁平化设计风格禁用窗口透明效果transparent: false部分鸿蒙设备对透明窗口支持不佳易出现白屏或闪烁问题。2. 数据存储路径适配使用app.getPath(userData)获取应用专属存储目录避免直接使用固定路径导致在鸿蒙设备上读写失败。3. 权限适配在鸿蒙设备上需为应用授予 “文件访问” 权限进入「设置」→「应用」→「权限管理」找到该应用并开启 “文件访问” 权限。五、打包部署运行在鸿蒙设备上1. 打包 Linux-x64 版本在开发机执行打包命令bash运行npm run package打包完成后会在项目根目录生成dist文件夹其中harmony-todo-linux-x64目录即为可在鸿蒙设备上运行的应用包。2. 部署到鸿蒙设备1通过 USB 连接鸿蒙设备与开发机确保设备已开启 USB 调试2将harmony-todo-linux-x64目录复制到鸿蒙设备的 Linux 兼容层目录推荐路径/home/user/Applications3在鸿蒙设备上打开 Linux 终端进入应用目录并赋予执行权限bash运行cd /home/user/Applications/harmony-todo-linux-x64 chmod x harmony-todo4启动应用bash运行./harmony-todo3. 开机自启配置可选若需应用开机自启可在鸿蒙设备的 Linux 终端中执行以下命令bash运行# 创建自启脚本 echo #!/bin/bash cd /home/user/Applications/harmony-todo-linux-x64 ./harmony-todo ~/.config/autostart/harmony-todo.sh # 赋予自启脚本执行权限 chmod x ~/.config/autostart/harmony-todo.sh六、常见问题排查问题现象解决方案应用启动白屏关闭硬件加速在 BrowserWindow 配置中添加hardwareAcceleration: false数据读写失败检查应用是否已获取文件访问权限确认存储路径是否正确打包后无法运行确保打包命令指定--platformlinux --archx64适配鸿蒙 Linux-x64 架构窗口控制按钮无效检查 IPC 通信逻辑确保主进程正确监听window-control事件七、项目完整代码仓库完整代码已上传至 GitHub包含所有配置文件、代码案例及部署说明可直接下载调试https://github.com/xxx/harmony-electron-todo将 xxx 替换为你的 GitHub 用户名八、总结与拓展方向本文通过一个待办应用实战讲解了 Electron 开发鸿蒙桌面应用的核心流程包括环境搭建、功能开发、鸿蒙适配、打包部署等关键环节。借助 Electron 的跨端特性前端开发者可零成本切入鸿蒙生态无需学习新的开发语言。后续拓展方向集成鸿蒙原生 API如通知、蓝牙借助electron-harmony-adapter插件实现实现跨设备数据同步结合鸿蒙分布式能力或云服务优化应用性能减少内存占用提升启动速度打包为鸿蒙 HAP 安装包发布到鸿蒙应用市场。如果本文对你有帮助欢迎点赞、收藏、关注后续将分享更多鸿蒙 Electron 开发进阶技巧敬请期待文末标签#鸿蒙OS #Electron #跨端开发 #前端开发 #实战教程 #代码案例 #鸿蒙适配欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycrossplatform.csdn.net)一起共建开源鸿蒙跨平台生态。