企业官网建设流程全解析

网站建设开发背景,html网页标题代码怎么写,我的网站百度找不到,官方网站撰写策划书该框架通过整合Chromium内核和Node.js运行时环境#xff0c;允许开发者使用JavaScript、HTML及CSS构建兼容Windows、macOS与Linux系统的桌面应用#xff0c;架构采用主进程处理系统级交互、渲染进程依托Chromium展示界面及IPC通信机制。#xff08;说白了就是包装#xff0…该框架通过整合Chromium内核和Node.js运行时环境允许开发者使用JavaScript、HTML及CSS构建兼容Windows、macOS与Linux系统的桌面应用架构采用主进程处理系统级交互、渲染进程依托Chromium展示界面及IPC通信机制。说白了就是包装一、项目概述使用 Electron 将在线网页封装成独立的 Windows 桌面应用程序Dr.aiVoss。二、搭建electron第一步文件初始化新建一个空的文件夹编辑器中打开这个文件夹例如my-electron-appcd 你新创建的文件npm init初始化时可以一站式回车当然也可以填入相应的内容信息。执行完之后会生成package.json文件。第二步安装electronnpm install --save-dev electron安装之后npm installnpm install --save-dev electron-builder主要是运行整个项目以及打包整个项目生成exe文件。安装的过程中可能会比较慢影响因素是文件过大以及网络问题。第三步package.json 关键配置{ name: my-electron-app, version: 1.0.0, main: index.js, scripts: { start: electron ., build:win: electron-builder --win }, build: { appId: com.hithinker.voss, productName: Dr.aiVoss, files: [index.js, package.json], win: { target: [{target: nsis, arch: [x64]}], icon: public/icon/icons.ico } }, devDependencies: { electron: ^39.2.7, electron-builder: ^26.0.12 } }第四步编写文件根目录创建 index.html!DOCTYPE html html head meta charsetUTF-8 meta http-equivContent-Security-Policy contentdefault-src none titleHello World! - My Electron App/title /head body h1Hello World!/h1 We are using Node.js span idnode-version/span, Chromium span idchrome-version/span, and Electron span idelectron-version/span. /body /html根目录创建 index.js我在原有基础配置上加上了屏幕的缩放以及控制台显示// 在文件头部引入 Node.js 中的 path 模块 const path require(path) // app 它控制应用程序的事件生命周期。 // BrowserWindow 模块它创建和管理应用程序 窗口。 const { app, BrowserWindow, globalShortcut } require(electron); // 保存主窗口引用 let mainWindow null // 创建浏览器窗口 function createWindow () { //__dirname 字符串指向当前正在执行脚本的路径 (在本例中它指向你的项目的根文件夹) mainWindow new BrowserWindow({ width: 1000, height: 800, resizable: true, minWidth: 800, minHeight: 600, backgroundColor: #fff, icon: path.join(__dirname, public/icon/icons.ico), webPreferences: { nodeIntegration: true } }) // 本地文件 //mainWindow.loadFile(index.html) // 线上页面 mainWindow.loadURL(https://www.csdn.net/) // 打开控制台 // mainWindow.webContents.openDevTools() // 启用页面缩放功能 mainWindow.webContents.on(did-finish-load, () { // 设置缩放级别限制 mainWindow.webContents.setVisualZoomLevelLimits(1, 5) // 启用视觉缩放 mainWindow.webContents.setZoomFactor(1.0) }) // 监听鼠标滚轮缩放 mainWindow.webContents.on(zoom-changed, (event, zoomDirection) { const currentZoom mainWindow.webContents.getZoomFactor() if (zoomDirection in) { // 放大 mainWindow.webContents.setZoomFactor(Math.min(currentZoom 0.1, 5.0)) } else { // 缩小 mainWindow.webContents.setZoomFactor(Math.max(currentZoom - 0.1, 0.25)) } }) // 注册缩放快捷键 registerZoomShortcuts() // 监听窗口内的键盘事件用于 F12 等按键 mainWindow.webContents.on(before-input-event, (event, input) { // F12 打开/关闭开发者工具 if (input.key F12) { mainWindow.webContents.toggleDevTools() } }) }; // 保存当前缩放级别 let zoomLevel 1.0 // 注册缩放快捷键 function registerZoomShortcuts() { // Ctrl 放大 globalShortcut.register(CommandOrControl, () { if (mainWindow) { zoomLevel Math.min(zoomLevel 0.1, 5.0) mainWindow.webContents.setZoomFactor(zoomLevel) } }) // Ctrl Shift 放大针对不需要按 Shift 就能按 的键盘 globalShortcut.register(CommandOrControlShift, () { if (mainWindow) { zoomLevel Math.min(zoomLevel 0.1, 5.0) mainWindow.webContents.setZoomFactor(zoomLevel) } }) // Ctrl - 缩小 globalShortcut.register(CommandOrControl-, () { if (mainWindow) { zoomLevel Math.max(zoomLevel - 0.1, 0.25) mainWindow.webContents.setZoomFactor(zoomLevel) } }) // CtrlShiftI 打开/关闭开发者工具 globalShortcut.register(CommandOrControlShiftI, () { if (mainWindow) { mainWindow.webContents.toggleDevTools() } }) // F5 或 CtrlR 刷新页面 globalShortcut.register(F5, () { if (mainWindow) { mainWindow.reload() } }) globalShortcut.register(CommandOrControlR, () { if (mainWindow) { mainWindow.reload() } }) // CtrlShiftR 强制刷新清除缓存 globalShortcut.register(CommandOrControlShiftR, () { if (mainWindow) { mainWindow.webContents.reloadIgnoringCache() } }) } // 除了 macOS 外当所有窗口都被关闭的时候退出程序。 因此通常对程序和它们在 // 任务栏上的图标来说应当保持活跃状态直到用户使用 Cmd Q 退出。 app.on(window-all-closed, function () { if (process.platform ! darwin) app.quit() }) // 应用退出时注销所有快捷键 app.on(will-quit, () { globalShortcut.unregisterAll() }) // 部分 API 在 ready 事件触发后才能使用。 // 在 Electron 中只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口 app.whenReady().then(() { createWindow() app.on(activate, function () { // 通常在 macOS 上当点击 dock 中的应用程序图标时如果没有其他打开的窗口那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length 0) createWindow() }) })三、项目启动与打包终端执行之后会直接打开网页npm startnpm run build 或者 npm run build:win直接拖拽到桌面或直接创建快捷方式直接点击打开即可四、实现的功能1. 窗口管理✅ 自定义窗口大小1000x800✅ 可调整窗口大小✅ 最小尺寸限制800x600✅ 自定义应用图标2. 缩放功能✅Ctrl 鼠标滚轮- 页面缩放✅Ctrl - 放大每次 10%✅Ctrl -- 缩小每次 -10%✅Ctrl 0- 重置到 100%✅ 缩放范围25% ~ 500%3. 开发者工具✅F12- 打开/关闭控制台✅Ctrl Shift I- 打开/关闭控制台4. 页面刷新✅F5- 刷新页面✅Ctrl R- 刷新页面✅Ctrl Shift R- 强制刷新清除缓存五、注意事项1. 图标要求.ico文件必须包含至少256x256像素推荐包含多尺寸16x16, 32x32, 48x48, 256x256https://www.ico51.cn/ 在线转换实现自定义图标问题分析npm start显示了自定义图标 ✅打包时因为网络问题无法下载签名工具导致图标无法嵌入到 exe 文件中 ❌解决方案有几个方案1手动下载签名工具缓存# 手动下载 winCodeSign-2.6.0.7z 并放到缓存目录方案2使用 ResHacker 或其他工具手动修改图标方案3暂时接受现状虽然打包失败但 exe 文件已经生成在dist/win-unpacked/Dr.aiVoss.exe只是图标是默认的方案4在能连接 GitHub 的环境下重新打包由于网络问题当前情况下开发模式(npm start) - 图标正常 ✅打包后(dist/win-unpacked/Dr.aiVoss.exe) - 使用默认图标 ❌建议先使用dist/win-unpacked/Dr.aiVoss.exe这个可执行文件或者使用代理/VPN 后重新运行npm run build:win或者使用工具如 Resource Hacker 手动替换 exe 图标2. 开发 vs 打包开发模式通过代码中的icon属性显示图标打包模式通过package.json的build.win.icon配置3. 网络问题打包时需要下载签名工具winCodeSign如遇网络问题可使用dist/win-unpacked/中的 exe 文件六、总结通过 Electron 成功实现了将在线网页封装为独立桌面应用完整的窗口管理功能用户体验优化缩放、刷新等自定义应用图标和名称生成可分发的 .exe 文件这种方式非常适合将现有的 Web 应用快速打包成桌面应用无需重写代码。