吉林省建设网站wordpress图片灯箱效果

吉林省建设网站,wordpress图片灯箱效果,印刷电商网站开发,中国建筑网络安全培训系统前言 鸿蒙 OS#xff08;HarmonyOS#xff09;凭借 “一次开发、多端部署” 的分布式架构优势#xff0c;正在快速构建起完善的生态体系。而 Electron 作为前端跨端开发的经典框架#xff0c;以 HTML/CSS/JS 技术栈为核心#xff0c;让开发者能轻松打造跨 Windows、macOS…前言鸿蒙 OSHarmonyOS凭借 “一次开发、多端部署” 的分布式架构优势正在快速构建起完善的生态体系。而 Electron 作为前端跨端开发的经典框架以 HTML/CSS/JS 技术栈为核心让开发者能轻松打造跨 Windows、macOS、Linux 的桌面应用。对于前端开发者来说无需学习 ArkTS 鸿蒙原生开发语言只需借助 Electron 的 Linux 版本与鸿蒙的 Linux 兼容层就能快速开发适配鸿蒙系统的应用 —— 这是切入鸿蒙生态的 “捷径”也是兼顾开发效率与生态布局的最优解。本文将从原理到实战手把手教你开发一个适配鸿蒙系统的 Electron 应用包含完整代码案例、鸿蒙适配要点、调试部署全流程即使是鸿蒙生态新手也能快速上手。一、核心逻辑鸿蒙与 Electron 为何能 “无缝结合”在动手开发前我们首先要理解两者的适配底层逻辑避免踩坑。1. 底层兼容基础鸿蒙 OS 3.0 及以上版本内置了Linux 容器和兼容层技术能够直接运行 Linux 原生应用。而 Electron 的本质是 “Chromium 内核 Node.js 运行时” 的组合体其 Linux 版本的应用包可通过鸿蒙的 Linux 兼容层直接运行无需修改 Electron 的核心源码。2. 关键适配要点架构匹配鸿蒙 PC、平板等设备主流为 x64 架构需将 Electron 应用打包为 Linux-x64 版本权限与模式鸿蒙设备需开启开发者模式同时启用 USB 调试、Linux 环境兼容、未知来源应用安装权限通信配置关闭 Electron 的上下文隔离contextIsolation: false确保 Node.js API 在鸿蒙环境中正常调用视觉适配遵循鸿蒙的扁平化设计风格优化窗口样式、交互逻辑贴合鸿蒙系统的视觉体验。二、环境搭建极简配置步骤1. 必备环境清单工具 / 环境版本要求作用说明鸿蒙 OS3.0PC / 平板 / 手机应用运行的目标设备开发机系统Windows 10/macOS 12编写代码与打包应用Node.js16.x LTS / 18.x LTSElectron 的运行依赖Electron22.x稳定版跨端应用开发框架兼容性最优electron-packager最新版打包 Electron 应用为系统可执行文件VS Code任意稳定版代码编辑推荐安装 Electron 插件2. 环境安装与验证1安装 Node.js 与 Electron首先下载 Node.js 16.x LTS 版本官网地址安装时勾选 “Add to PATH”。安装完成后在终端执行以下命令验证bash运行node -v # 输出v16.20.2即为成功 npm -v # 输出对应版本号即为成功接着全局安装 Electron 与打包工具bash运行npm install -g electron22.3.2 electron-packager验证 Electron 安装bash运行electron -v # 输出v22.3.2即为成功2鸿蒙设备配置打开鸿蒙设备进入「设置」→「系统和更新」→「关于手机 / 平板 / PC」连续点击「版本号」7 次激活开发者模式返回「系统和更新」进入「开发者选项」开启USB 调试允许安装未知来源的应用Linux 环境兼容部分设备在「开发人员选项」的高级设置中三、实战开发鸿蒙 Electron 应用待办工具本节将开发一个鸿蒙适配的 Electron 待办事项工具支持待办添加、删除、状态切换功能代码结构清晰可直接运行。1. 项目初始化bash运行# 1. 创建项目目录 mkdir harmony-electron-todo cd harmony-electron-todo # 2. 初始化package.json npm init -y # 3. 安装依赖electron 热重载工具nodemon npm install electron22.3.2 --save npm install nodemon --save-dev2. 配置 package.json修改package.json文件添加入口文件、启动与打包脚本json{ name: harmony-electron-todo, version: 1.0.0, main: main.js, scripts: { start: nodemon --exec electron ., package: electron-packager . harmony-todo --platformlinux --archx64 --outdist }, devDependencies: { nodemon: ^3.1.0 }, dependencies: { electron: ^22.3.2 } }3. 核心代码实现1主进程文件main.js窗口管理 IPC 通信主进程是 Electron 应用的核心负责窗口创建、系统交互与渲染进程通信javascript运行const { app, BrowserWindow, ipcMain } require(electron); const path require(path); const fs require(fs); // 定义待办数据存储路径鸿蒙设备的用户目录 const TODO_FILE_PATH path.join(app.getPath(userData), todo-list.json); let mainWindow; // 读取待办数据 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() { mainWindow new BrowserWindow({ width: 600, height: 800, title: 鸿蒙待办工具, webPreferences: { nodeIntegration: true, contextIsolation: false, // 鸿蒙兼容必需关闭上下文隔离 preload: path.join(__dirname, preload.js) }, // 鸿蒙样式适配去除默认边框采用扁平化设计 frame: false, titleBarStyle: hidden }); // 加载渲染进程页面 mainWindow.loadFile(index.html); // 打开开发者工具调试用发布时可注释 mainWindow.webContents.openDevTools(); // 窗口关闭事件 mainWindow.on(closed, () { mainWindow null; }); } // IPC通信监听获取待办列表请求 ipcMain.on(get-todo-list, (event) { const todoList readTodoList(); event.reply(todo-list-reply, todoList); }); // IPC通信监听添加待办请求 ipcMain.on(add-todo, (event, todoText) { const todoList readTodoList(); const newTodo { id: Date.now().toString(), text: todoText, completed: false }; todoList.push(newTodo); const isSuccess writeTodoList(todoList); event.reply(add-todo-reply, { isSuccess, todo: newTodo }); }); // IPC通信监听切换待办状态请求 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); } }); // IPC通信监听删除待办请求 ipcMain.on(delete-todo, (event, todoId) { let todoList readTodoList(); todoList todoList.filter(item item.id ! todoId); writeTodoList(todoList); event.reply(delete-todo-reply, todoList); }); // IPC通信监听窗口控制请求关闭/最小化 ipcMain.on(window-control, (event, action) { 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安全通信桥接预加载脚本作为渲染进程与主进程的安全桥梁避免渲染进程直接访问 Node.js API 带来的安全风险javascript运行const { ipcRenderer, contextBridge } require(electron); // 向渲染进程暴露安全的API contextBridge.exposeInMainWorld(electronAPI, { // 获取待办列表 getTodoList: () { return new Promise((resolve) { ipcRenderer.send(get-todo-list); ipcRenderer.once(todo-list-reply, (event, data) { resolve(data); }); }); }, // 添加待办 addTodo: (text) { return new Promise((resolve) { ipcRenderer.send(add-todo, text); ipcRenderer.once(add-todo-reply, (event, data) { resolve(data); }); }); }, // 切换待办状态 toggleTodo: (id) { return new Promise((resolve) { ipcRenderer.send(toggle-todo, id); ipcRenderer.once(toggle-todo-reply, (event, data) { resolve(data); }); }); }, // 删除待办 deleteTodo: (id) { return new Promise((resolve) { ipcRenderer.send(delete-todo, id); 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, Microsoft YaHei, sans-serif; } body { background-color: #f5f5f7; color: #1d1d1f; } /* 窗口头部鸿蒙风格标题栏 */ .window-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background-color: #ffffff; border-bottom: 1px solid #e5e5e7; } .window-title { font-size: 18px; font-weight: 500; } .control-buttons { display: flex; gap: 12px; } .control-btn { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; border-radius: 50%; transition: background-color 0.2s ease; font-size: 16px; } .control-btn:hover { background-color: #f0f0f2; } /* 待办添加区域 */ .todo-add { padding: 20px; background-color: #ffffff; margin: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .todo-input { width: 100%; padding: 12px 16px; border: 1px solid #e5e5e7; border-radius: 8px; font-size: 16px; margin-bottom: 12px; outline: none; } .todo-input:focus { border-color: #007aff; } .add-btn { padding: 12px 24px; background-color: #007aff; color: #ffffff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background-color 0.2s ease; } .add-btn:hover { background-color: #0066cc; } /* 待办列表区域 */ .todo-list { margin: 0 20px; } .todo-item { display: flex; align-items: center; padding: 16px; background-color: #ffffff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .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 { padding: 8px 12px; background-color: #ff3b30; color: #ffffff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; } .delete-btn:hover { background-color: #cc2e25; } /* 空状态提示 */ .empty-tip { padding: 40px; text-align: center; color: #86868b; font-size: 16px; } /style /head body !-- 窗口头部 -- div classwindow-header div classwindow-title鸿蒙待办工具/div div classcontrol-buttons button classcontrol-btn onclickwindow.electronAPI.windowControl(minimize)—/button button classcontrol-btn onclickwindow.electronAPI.windowControl(close)✕/button /div /div !-- 待办添加区域 -- div classtodo-add input typetext classtodo-input idtodoInput placeholder请输入待办事项... button classadd-btn onclickaddTodo()添加待办/button /div !-- 待办列表区域 -- div classtodo-list idtodoList div classempty-tip暂无待办事项添加一个吧/div /div script // 页面加载完成后加载待办列表 window.addEventListener(DOMContentLoaded, loadTodoList); // 加载待办列表 async function loadTodoList() { const todoList await window.electronAPI.getTodoList(); renderTodoList(todoList); } // 渲染待办列表 function renderTodoList(todoList) { const todoListEl document.getElementById(todoList); if (todoList.length 0) { todoListEl.innerHTML div classempty-tip暂无待办事项添加一个吧/div; return; } let html ; todoList.forEach(todo { html div classtodo-item input typecheckbox classtodo-checkbox ${todo.completed ? checked : } onchangetoggleTodo(${todo.id}) div classtodo-text ${todo.completed ? completed : }${todo.text}/div button classdelete-btn onclickdeleteTodo(${todo.id})删除/button /div ; }); todoListEl.innerHTML html; } // 添加待办 async function addTodo() { const inputEl document.getElementById(todoInput); const text inputEl.value.trim(); if (!text) { alert(请输入待办事项内容); return; } const result await window.electronAPI.addTodo(text); if (result.isSuccess) { inputEl.value ; loadTodoList(); // 重新加载列表 } else { alert(添加待办失败请重试); } } // 切换待办状态 async function toggleTodo(todoId) { const todoList await window.electronAPI.toggleTodo(todoId); renderTodoList(todoList); } // 删除待办 async function deleteTodo(todoId) { if (confirm(确定要删除该待办吗)) { const todoList await window.electronAPI.deleteTodo(todoId); renderTodoList(todoList); } } /script /body /html4. 代码核心说明主进程main.js负责窗口创建、待办数据的本地存储使用 Node.js fs 模块、与渲染进程的 IPC 通信同时配置鸿蒙兼容的关键参数关闭上下文隔离预加载脚本preload.js通过contextBridge暴露安全的 API 接口实现渲染进程与主进程的安全通信渲染进程index.html采用鸿蒙扁平化设计风格实现待办的添加、删除、状态切换交互通过暴露的electronAPI调用主进程方法鸿蒙适配亮点窗口样式去除默认边框、打包为 Linux-x64 版本、数据存储到鸿蒙设备的用户目录app.getPath(userData)。四、调试与部署鸿蒙设备运行应用1. 本地调试开发机预览在项目根目录执行以下命令启动热重载开发模式bash运行npm start启动后会自动打开应用窗口可调试待办功能与 UI 样式修改代码后无需重启应用提升开发效率。2. 鸿蒙设备部署1打包 Linux-x64 版本执行打包命令生成鸿蒙设备可运行的应用包bash运行npm run package打包完成后项目根目录会生成dist/harmony-todo-linux-x64文件夹包含可执行文件与依赖资源。2传输应用到鸿蒙设备方式 1USB 传输用 USB 数据线连接开发机与鸿蒙设备将harmony-todo-linux-x64文件夹拷贝到鸿蒙设备的任意目录如 “文档” 文件夹方式 2网络共享开发机开启文件夹共享鸿蒙设备通过 “文件管理” 应用访问共享文件夹下载应用包。3鸿蒙设备运行应用打开鸿蒙设备的 “终端” 应用开发者模式下可在系统搜索中找到进入应用目录以拷贝到 “文档” 为例bash运行cd /home/user/Documents/harmony-todo-linux-x64赋予应用执行权限bash运行chmod x harmony-todo启动应用bash运行./harmony-todo启动成功后鸿蒙设备上会显示待办工具窗口可正常使用所有功能数据会持久化存储在设备中。3. 常见问题排查问题现象排查方向与解决方案应用无法启动提示 “权限不足”执行chmod x harmony-todo赋予执行权限启动后白屏无内容检查 main.js 中contextIsolation: false是否配置待办数据无法保存确认鸿蒙设备的用户目录有读写权限开发者模式下默认开启应用闪退确认鸿蒙 OS 版本≥3.0低版本不支持 Linux 兼容层五、进阶优化鸿蒙特性深度适配1. 调用鸿蒙系统通知通过electron-harmony-adapter插件可调用鸿蒙原生通知功能实现待办提醒bash运行# 安装插件 npm install electron-harmony-adapter --save在 main.js 的createWindow函数中添加通知逻辑javascript运行const { HarmonyAdapter } require(electron-harmony-adapter); const path require(path); function createWindow() { // ... 原有窗口配置 ... const harmonyAdapter new HarmonyAdapter(mainWindow); // 监听添加待办成功事件发送鸿蒙通知 ipcMain.on(todo-added, () { harmonyAdapter.showNotification({ title: 鸿蒙待办工具, body: 新的待办事项已添加, icon: path.join(__dirname, todo-icon.png) }); }); }2. 适配鸿蒙深色模式在 index.html 中添加深色模式检测与样式适配javascript运行// 深色模式适配函数 function adaptDarkMode() { const isDark window.matchMedia((prefers-color-scheme: dark)).matches; if (isDark) { document.body.classList.add(dark-mode); // 设置CSS变量 document.documentElement.style.setProperty(--bg-color, #1a1a1a); document.documentElement.style.setProperty(--card-bg, #2c2c2e); document.documentElement.style.setProperty(--text-color, #f5f5f7); } else { document.body.classList.remove(dark-mode); document.documentElement.style.setProperty(--bg-color, #f5f5f7); document.documentElement.style.setProperty(--card-bg, #ffffff); document.documentElement.style.setProperty(--text-color, #1d1d1f); } } // 初始化适配监听模式切换 adaptDarkMode(); window.matchMedia((prefers-color-scheme: dark)).addEventListener(change, adaptDarkMode);添加深色模式 CSS 样式css:root { --bg-color: #f5f5f7; --card-bg: #ffffff; --text-color: #1d1d1f; } .dark-mode { background-color: var(--bg-color); color: var(--text-color); } .dark-mode .window-header, .dark-mode .todo-add, .dark-mode .todo-item { background-color: var(--card-bg); border-color: #3a3a3c; } .dark-mode .todo-input { background-color: #3a3a3c; border-color: #4a4a4c; color: var(--text-color); }六、总结与展望通过本文的实战案例我们实现了一个适配鸿蒙系统的 Electron 待办应用核心收获如下理解了鸿蒙与 Electron 的适配原理 —— 基于 Linux 兼容层实现无缝运行无需学习 ArkTS掌握了鸿蒙 Electron 应用的开发流程环境搭建→代码开发→调试→打包部署学会了鸿蒙适配的关键要点架构匹配、权限配置、样式适配、通信安全。未来随着鸿蒙 OS 对 Linux 生态的进一步优化Electron 与鸿蒙的结合将覆盖更多场景如办公软件、开发工具、多媒体应用等。对于前端开发者而言这是一个低门槛切入国产操作系统生态的绝佳机会既能复用现有技术栈又能抢占鸿蒙生态的发展红利。如果本文对你有帮助欢迎点赞、收藏、关注后续将分享 ElectronVue/React 适配鸿蒙、鸿蒙 HAP 包打包发布等进阶内容敬请期待文末标签#鸿蒙OS #Electron #跨端开发 #前端开发 #鸿蒙应用开发 #代码实战 #桌面应用欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycrossplatform.csdn.net)一起共建开源鸿蒙跨平台生态。