最近学习了下前端(js还没怎么学)
在了解js的途中了解到了Electron
早闻其大名于是就来尝试一下
Electron的安装与配置 node.js https://nodejs.org/
这是node.js的官网,需要下载node.js才可以使用
检查安装
git https://git-scm.com/downloads/win
需要下载这两者
检查安装
换源 由于一些原因,npm,pip以及各类Linux的包管在国内的速度可以说几乎为0
那么就需要国内的镜像站进行下载
npm 官方原始镜像网址是:https://registry.npmjs.org/ 淘宝镜像:http://registry.npmmirror.com
1 npm config set registry https://registry.npmmirror.com
进行换源
创建工作目录以及初始化 然后随便找个地方新建一个文件夹,并且在此目录打开git bash进行初始化
1 2 3 mkdir test cd test npm init
然后下载electron
1 2 3 4 npm install -g electron npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install -g electron
test
文件夹会生成一个package.json
文件
1 2 3 4 5 6 7 8 9 10 11 12 { "name" : "test" , # 你项目的名称(必填!) "version" : "1.0.0" , # 版本(必填!) "description" : "" , # 描述(必填!) "license" : "ISC" , # 协议 "author" : "" , #作者(必填!) "type" : "commonjs" , "main" : "index.js" , # 程序入口 "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" } }
在此目录下创建一个文件inex.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const { app, BrowserWindow } = require ('electron' )app.on ('ready' , () => { const win = new BrowserWindow ({ width : 800 , height : 600 , autoHideMenuBar : true , alwaysOnTop : true , x : 100 , y : 100 }) win.loadFile ('' )
然后git bash里输入
你就会发现
1 2 3 4 5 6 7 8 9 10 11 $ npm start npm error Missing script: "start" npm error npm error Did you mean one of these? npm error npm star npm error npm stars npm error npm error To see a list of scripts, run: npm error npm run npm error A complete log of this run can be found in : C:\Users\1\AppData\Local\npm-cache\_logs\2025-02-04T15_17_29_225Z-debug-0.log
报错,显示为缺失start
让我们回到刚刚的package.js
文件,找到
1 2 3 "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" }
并且添加一个start,修改如下
1 2 3 4 "scripts" : { "start" : "electron ." , "test" : "echo \"Error: no test specified\" && exit 1" }
这样就能成功运行了
打包 electron-builder electron-forge electron-builder是electron社区开发的打包工具,用起来相对简便
electron官方的打包工具(本文不提及使用方法)
electron-builder安装起来很简单(前提是你得有一个良好的网络环境)
1 2 3 npm install --save-dev electron-builder cnpm install --save-dev electron-builder
继续去package.js
里面
添加一个build
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 "build" : { "productName" : "xxxx" , "appId" : "com.leon.xxxxx" , "copyright" : "xxxx" , "directories" : { "output" : "build" } , "nsis" : { "oneClick" : false , "allowElevation" : true , "allowToChangeInstallationDirectory" : true , "installerIcon" : "./build/icons/aaa.ico" , "uninstallerIcon" : "./build/icons/bbb.ico" , "installerHeaderIcon" : "./build/icons/aaa.ico" , "createDesktopShortcut" : true , "createStartMenuShortcut" : true , "shortcutName" : "xxxx" , "include" : "build/script/installer.nsh" , } , "publish" : [ { "provider" : "generic" , "url" : "http://xxxxx/" } ] , "files" : [ "dist/electron/**/*" ] , "dmg" : { "contents" : [ { "x" : 410 , "y" : 150 , "type" : "link" , "path" : "/Applications" } , { "x" : 130 , "y" : 150 , "type" : "file" } ] } , "mac" : { "icon" : "build/icons/icon.icns" } , "win" : { "icon" : "build/icons/aims.ico" , "target" : [ { "target" : "nsis" , "arch" : [ "ia32" ] } ] } , "linux" : { "icon" : "build/icons" } }
详情请见Electron-builder打包详解 - 简书
当然,还要在script里添加进行build的命令
1 2 3 4 5 "scripts" : { "start" : "electron ." , "test" : "echo \"Error: no test specified\" && exit 1" , "build" : "electron-builder" }
然后运行
即可打包