怎么用微信做网站第三方物流网站建设

怎么用微信做网站,第三方物流网站建设,工程接单网,律师网站建设案例鸿蒙 Electron#xff1a;跨端开发新范式#xff0c;从环境搭建到实战开发 前言 随着鸿蒙系统#xff08;HarmonyOS#xff09;的生态不断完善#xff0c;越来越多的开发者开始探索鸿蒙与主流跨平台框架的结合方案。Electron 作为一款成熟的跨平台桌面应用开发框架…鸿蒙 Electron跨端开发新范式从环境搭建到实战开发前言随着鸿蒙系统HarmonyOS的生态不断完善越来越多的开发者开始探索鸿蒙与主流跨平台框架的结合方案。Electron 作为一款成熟的跨平台桌面应用开发框架可以让开发者用 HTML、CSS、JavaScript 快速构建 Windows、macOS、Linux 桌面应用。而将 Electron 与鸿蒙系统结合既能利用 Electron 的前端生态优势又能适配鸿蒙桌面端如鸿蒙 PC、鸿蒙平板实现一套代码跨多端运行。本文将从环境搭建到实战开发带你一步步掌握鸿蒙 Electron 的开发流程包含完整代码案例。一、鸿蒙与 Electron 的结合点首先需要明确鸿蒙系统桌面端支持标准的 Linux/Windows 应用运行环境而 Electron 本身是基于 Node.js 和 Chromium 的跨平台框架其打包后的应用可以直接在鸿蒙桌面端运行。此外鸿蒙提供的方舟开发框架ArkUI与 Electron 的前端技术栈可以互补实现更灵活的跨端开发。核心优势技术栈复用前端开发者可直接使用 HTML/CSS/JS 技术栈开发鸿蒙桌面应用无需学习全新的原生开发语言。跨平台兼容一套代码可同时运行在 Windows、macOS、Linux 以及鸿蒙桌面端。生态丰富Electron 拥有海量的 npm 包和社区资源能快速实现复杂的桌面应用功能。二、开发环境搭建附截图说明环境要求操作系统Windows 10/11、macOS 12、鸿蒙桌面端如华为 MateBook 系列Node.jsv16.x 及以上Electron 对 Node.js 版本有兼容要求npm/yarn包管理工具代码编辑器VS Code推荐搭配 Electron 插件更佳步骤 1安装 Node.js截图 1Node.js 官网下载页面 安装后 cmd 验证node -v访问Node.js 官网下载对应系统的 LTS 版本长期支持版。安装完成后打开终端 / 命令行输入node -v和npm -v若显示版本号则安装成功。步骤 2初始化 Electron 项目截图 2VS Code 终端执行初始化命令新建项目文件夹如harmony-electron-demo打开 VS Code 并进入该文件夹。执行初始化命令创建package.json文件bash运行npm init -y安装 Electron 依赖推荐安装指定版本避免版本兼容问题bash运行npm install electron25.8.0 --save-dev步骤 3配置 package.json 启动脚本修改package.json中的scripts字段添加启动命令json{ name: harmony-electron-demo, version: 1.0.0, description: 鸿蒙Electron演示项目, main: main.js, scripts: { start: electron ., // 启动Electron应用 test: echo \Error: no test specified\ exit 1 }, keywords: [harmony, electron], author: , license: ISC, devDependencies: { electron: ^25.8.0 } }三、第一个鸿蒙 Electron 应用Hello World附代码 运行截图步骤 1编写主进程代码main.jsElectron 应用分为主进程Main Process和渲染进程Renderer Process主进程负责窗口管理、系统交互等核心功能。javascript运行// main.js - 主进程代码 const { app, BrowserWindow } require(electron); const path require(path); // 定义创建窗口的函数 function createWindow() { // 创建浏览器窗口 const mainWindow new BrowserWindow({ width: 800, // 窗口宽度 height: 600, // 窗口高度 webPreferences: { preload: path.join(__dirname, preload.js), // 预加载脚本主进程与渲染进程通信桥梁 nodeIntegration: true, // 允许渲染进程使用Node.js API开发环境可开启生产环境建议关闭 contextIsolation: false // 关闭上下文隔离与nodeIntegration配合使用 } }); // 加载本地HTML文件渲染进程页面 mainWindow.loadFile(index.html); // 开启开发者工具开发环境使用生产环境可注释 mainWindow.webContents.openDevTools(); } // Electron应用就绪后创建窗口 app.whenReady().then(() { createWindow(); // 处理macOS系统的窗口行为关闭所有窗口后不退出应用 app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) { createWindow(); } }); }); // 处理Windows/Linux系统的退出行为关闭所有窗口后退出应用 app.on(window-all-closed, () { if (process.platform ! darwin) { app.quit(); } });步骤 2编写预加载脚本preload.js可选但推荐预加载脚本用于在渲染进程加载前执行作为主进程和渲染进程的安全通信桥梁javascript运行// preload.js - 预加载脚本 window.addEventListener(DOMContentLoaded, () { // 向渲染进程暴露全局方法示例 const replaceText (selector, text) { const element document.getElementById(selector); if (element) element.innerText text; }; // 展示Electron和Node.js版本信息 for (const dependency of [chrome, node, electron]) { replaceText(${dependency}-version, process.versions[dependency]); } });步骤 3编写渲染进程页面index.html渲染进程负责应用的 UI 展示使用标准的 HTML/CSS/JS 编写html预览!-- index.html - 渲染进程页面 -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title鸿蒙Electron Demo/title style /* 简单的样式美化 */ body { font-family: Microsoft YaHei, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90vh; background-color: #f5f5f5; } .title { color: #007dff; /* 鸿蒙主题色 */ font-size: 2.5rem; } .version-info { margin-top: 20px; color: #666; } /style /head body h1 classtitleHello Harmony Electron!/h1 div classversion-info pChrome版本: span idchrome-version/span/p pNode.js版本: span idnode-version/span/p pElectron版本: span idelectron-version/span/p /div /body /html步骤 4运行应用截图 3Electron 应用窗口运行效果显示 Hello Harmony Electron 和版本信息在 VS Code 终端执行启动命令bash运行npm start此时会弹出一个 Electron 窗口显示我们编写的 UI 内容这就是第一个鸿蒙 Electron 应用四、进阶实战鸿蒙 Electron 应用实现文件选择功能附代码接下来我们实现一个更实用的功能点击按钮选择本地文件并在应用中显示文件路径。这个功能涉及主进程与渲染进程的 IPC 通信进程间通信是 Electron 开发的核心知识点。步骤 1修改渲染进程页面index.html添加按钮和文件路径展示区域html预览!-- 新增部分 -- button idselect-file-btn选择本地文件/button p idfile-path未选择文件/p步骤 2修改主进程代码main.js引入dialog模块用于打开系统文件选择对话框并监听渲染进程的 IPC 请求javascript运行// 新增引入ipcMain模块 const { app, BrowserWindow, ipcMain, dialog } require(electron); // ... 原有代码不变 ... // 监听渲染进程的select-file请求 ipcMain.handle(select-file, async () { // 打开文件选择对话框 const result await dialog.showOpenDialog({ properties: [openFile], // 允许选择单个文件 filters: [ // 过滤文件类型示例只允许选择txt和json文件 { name: Text Files, extensions: [txt, json] }, { name: All Files, extensions: [*] } ] }); // 返回选择的文件路径若取消选择则返回空 if (!result.canceled) { return result.filePaths[0]; } else { return 未选择文件; } });步骤 3修改渲染进程的交互逻辑在 index.html 中添加 JS 代码html预览script // 给按钮绑定点击事件 document.getElementById(select-file-btn).addEventListener(click, async () { // 向主进程发送select-file请求并获取返回结果 const filePath await window.electron.ipcRenderer.invoke(select-file); // 展示文件路径 document.getElementById(file-path).innerText 选择的文件${filePath}; }); // 暴露ipcRenderer到全局需修改preload.js /script步骤 4更新预加载脚本preload.js向渲染进程暴露ipcRenderer的invoke方法安全通信javascript运行const { ipcRenderer } require(electron); window.addEventListener(DOMContentLoaded, () { // ... 原有代码不变 ... }); // 新增暴露electron对象到全局 window.electron { ipcRenderer: { invoke: ipcRenderer.invoke } };运行效果截图 4点击按钮后弹出文件选择对话框选择文件后显示路径执行npm start启动应用点击 “选择本地文件” 按钮选择一个文件后页面会显示该文件的路径功能完美实现五、打包鸿蒙 Electron 应用开发完成后需要将应用打包为可执行文件如.exe、.app、.deb以便在鸿蒙桌面端运行。这里使用electron-builder工具进行打包。步骤 1安装 electron-builderbash运行npm install electron-builder --save-dev步骤 2配置 package.json 打包脚本jsonscripts: { start: electron ., build: electron-builder // 新增打包命令 }, // 新增打包配置 build: { appId: com.harmony.electron.demo, // 应用唯一标识 productName: HarmonyElectronDemo, // 应用名称 directories: { output: dist // 打包输出目录 }, win: { // Windows打包配置 target: nsis // 生成安装包 }, linux: { // Linux/鸿蒙桌面端打包配置 target: deb // 生成deb安装包鸿蒙桌面端支持deb格式 } }步骤 3执行打包命令bash运行npm run build打包完成后会在dist目录下生成对应系统的安装包将deb包拷贝到鸿蒙桌面端即可安装运行六、注意事项与优化建议鸿蒙系统适配鸿蒙桌面端基于 Linux 内核因此打包时选择linux目标deb/rpm 格式可直接安装运行。性能优化Electron 应用默认占用内存较高可通过关闭不必要的开发者工具、优化渲染进程代码来降低内存占用。安全策略生产环境中建议关闭nodeIntegration使用预加载脚本进行安全的进程通信。鸿蒙 API 调用若需要调用鸿蒙系统的原生 API可通过 Electron 的native module扩展实现或使用鸿蒙提供的 JS API 对接。总结本文从鸿蒙与 Electron 的结合点出发详细介绍了开发环境搭建、Hello World 应用、实战文件选择功能以及应用打包的全流程。通过 Electron前端开发者可以快速上手鸿蒙桌面应用开发充分复用现有技术栈实现跨平台开发的高效性。