长沙做网站微联讯点不错,九创wordpress,深圳坪山住房和建设局网站,网站开发中网页上传和发布前言#xff1a;electron是一个跨平台桌面端应用开发工具。它将整个系统内容分为主进程和渲染进程两个部分(你可以粗略的理解为electron项目开启了两个服务器#xff0c;一个渲染页面另一个处理electron窗口内容)。这两个服务器之间通过JS Bridge进行通信(即electron是一个跨平台桌面端应用开发工具。它将整个系统内容分为主进程和渲染进程两个部分(你可以粗略的理解为electron项目开启了两个服务器一个渲染页面另一个处理electron窗口内容)。这两个服务器之间通过JS Bridge进行通信(即contextBridge),在主进程的preload预加载中可以同时访问到浏览器进程的window对象和主进程的electron api。此时我们可以经由ipcRerender(electron中从渲染进程网页向主进程发送同步和异步消息的api)将electron的api挂载到window对象上以便在浏览器进程中使用)然后在主进程中通过ipcMain(处理从渲染器进程网页发送的异步和同步消息。从渲染器发送的消息将被发送到该模块。)监听即可达到进程通信的目的。
本文章主要介绍如何基于vite搭建electron项目
首先创建文件夹并cd到此文件夹中初始化
npm init -y
然后安装vite环境
npm i vite -D
安装electron(推荐cnpm安装npm安装有可能会卡住或者你自己更换镜像地址也行)
cnpm install --save-dev electron
安装electron打包工具
cnpm install electron-builder -D
接下来安装你想用的框架及配套内容(本文使用的是vue3)
npm i vue vue-router pinia axios less less-loader -s
安装vue的构建工具
npm i vitejs/plugin-vue -D
现在我们开始配置文件内容
因为是基于vite搭建的项目故此需要再根目录新建vite.config.mjs(为啥用mjs稍后会解释)文件
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import electron from vite-plugin-electron
import renderer from vite-plugin-electron-renderer
import { resolve } from pathexport default defineConfig({//项目路径配置base:./,plugins:[//vue解析插件vue(),electron({//electron项目入口entry:./electron/index.js,vite:{build:{//打包目录名outDir:dist}}}),//渲染进程入口 renderer({entry:./src/main.js,nodeIntegration: true,})],//允许跨域server:{cors:true},resolve:{alias:{:resolve(__dirname,./src)}}
})
package.json文件配置
{name: electron,version: 1.0.0,//type:module,/* electron项目不推荐type:module故此我们这里就不使用type:module选项启动项目时控制台会提醒The CJS build of Vites Node API is deprecatedvite已弃用cjs进行构建我们可以修改vite.config.js为vite.config.mjs*///入口文件main: electron/index.js,scripts: {//启动项目 dev: vite,//打包成windows应用/* --config electron-builder.json 指根据electron-builder.json配置文件打包所以需要在根 目录下新建electron-builder.json文件配置打包信息*/build: vite build electron-builder build --win --x64 --config electron- builder.json,//打包成mac应用(注打包mac应用需要再mac系统中才能打包)build:mac:vite build electron-builder build --mac --arm64 --config electron- builder.json,//打包成linux应用build:linux:vite build electron-builder build --linux --armv7l --config electron-builder.json},keywords: [electron,vue,pinia],description:vite-electron,author: 仙古梦回,license: ISC,devDependencies: {vitejs/plugin-vue: ^5.1.0,electron: ^31.2.1,electron-builder: ^24.13.3,less: ^4.2.0,less-loader: ^12.2.0,vite: ^5.3.4,vite-plugin-electron: ^0.28.7,vite-plugin-electron-renderer: ^0.14.5},dependencies: {vitejs/plugin-vue: ^5.1.0,pinia: ^2.1.7,vue: ^3.4.33,vue-router: ^4.4.0}
}electron-builder.json文件配置
{productName: 仙古梦回,files: [./electron/index.js, ./dist],extraFiles: [./videos, ./cvideo], directories: {output: ./dist}}
现在我们开始构建主进程文件在根目录新建electron文件夹并新建index.js
const { app,BrowserWindow,ipcMain } require(electron)
const path require(path)const createWindow (){const win new BrowserWindow({width:1100,height:700,webPreferences:{nodeIntegration:true, // 禁用 nodeIntegrationcontextIsolation: true, // 启用上下文隔离 preload:path.join(__dirname,./preload.js)}})//关闭菜单win.setMenu(null)/*环境变量process.env.VITE_DEV_SERVER_URL用于获取当前项目的启动地址。 示例http://localhost:5173*/if(process.env.VITE_DEV_SERVER_URL){win.loadURL(process.env.VITE_DEV_SERVER_URL)}else{win.loadFile(path.join(__dirname,../dist/index.html))}
}//监听渲染进程传过来的great事件
ipcMain.on(great,(event,val){console.log(val)
})app.whenReady().then(() {createWindow()app.on(activate, () {if (BrowserWindow.getAllWindows().length 0) createWindow()})})app.on(window-all-closed, () {if (process.platform ! darwin) app.quit()
})
预加载文件配置
const { contextBridge,ipcRenderer } require(electron)//用于安全地将 API 从预加载脚本的隔离上下文公开到网站运行的上下文。该 API 也可以像以前一样从 window.myAPI 上的网站访问。
contextBridge.exposeInMainWorld(electronAPI, {//暴露到渲染进程window对象中的great事件通过ipcRenderer.send发送给主进程great: (val) ipcRenderer.send(great, val)
})
构建渲染进程
在根目录建立src文件夹同时在根目录创建index.html作为展示页面(上文建立主进程index.js文件时有引入这个html文件)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title仙古梦回/title!--注意这里的typemodule我们使用vue开发用的是ESmodule同时允许跨域crossorigin --script typemodule crossorigin src./src/main.js /script
/head
bodydiv idapp/div
/body
/html
在src文件夹下开始构建vue项目(与普通vue项目构建一样)
main.js文件
import { createApp } from vue;import App from ./App.vueconst app createApp(App)app.mount(#app)
App.vue文件配置
templatedivbutton clicksend向主进程发送你好/button/div
/templatescript setupconst send (){window.electronAPI.great(你好123 )
}/scriptstyle langless scoped/style
至此一个基于vite和vue搭建的electron项目就构建完成。
项目代码地址仙古梦回/electron的搭建
