基于electron29版本桌面应用app开发例子
html+js+node.js 开发模式
生成package.json文件：
yarn init --yes
或
npm init --yes
运行打包
yarn dev
yarn build
#==========================================
electron与electron-builder版本不兼容问题处理办法：
在package.json中scripts中添加
"postinstall": "electron-builder install-app-deps",
#==========================================
在VSCode的终端窗口输入：npm init --yes 则自动生成一个package.json文件
（也可以在electron_helloWorld目录下的dos窗口里输入该命令），
运行该项目：
在终端cmd输入如下命令：
electron .
OK 测试运行
yarn dev
yarn start
npm run start
npm run dev
OK 安装打包成可执行app的cmd命令：
yarn global add electron-packager
yarn global add electron-builder
yarn global add @electron-forge/cli
npm install electron-packager -g
开始打包
yarn build
npm run build
如下执行结果：
C:\Users\hsg>npm install electron-packager
added 162 packages in 7s
33 packages are looking for funding
run npm fund for details
#==========================================
#start cli cammand
cnpm install --save-dev electron @electron-forge/cli
或者
npm install --save-dev electron @electron-forge/cli
或全局安装
cnpm install -g electron @electron-forge/cli
#build cli electron-builder
打exe安装包我们使用electron-builder工具包，安装命令如下。
cnpm install --save-dev electron-builder
或者
npm install --save-dev electron-builder
或全局安装
cnpm install -g electron-builder
开始打包
yarn run build
npm run build
#==========================================
electron与electron-builder版本不兼容问题处理办法：
在package.json中scripts中添加
"postinstall": "electron-builder install-app-deps",
#==========================================
注意，json文件不能带注释，复制上面的文本后记得注释去掉。
修改package.json，添加一条scripts命令和build配置。
"scripts": {
"start": "electron-forge start",
"postinstall": "electron-builder install-app-deps",
"build": "electron-builder --win" // 打包命令
},
"devDependencies": {
"@electron-forge/cli": "^6.2.1",
"electron": "^25.4.0", //max=29
"electron-builder": "^24.6.3" //max=25
},
"dependencies": {
"cesium": "^1.112.0",
"@electron-forge/cli": "^6.2.1"
},
// electron-builder配置
"build": {
"productName": "我的应用", // 安装应用后桌面名称
"directories": {
"output": "out" // 输出的文件目录
},
"win": {
"icon": "./ico/logo.ico", // 安装的图标
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./ico/logo.ico",
"uninstallerIcon": "./ico/logo.ico",
"installerHeaderIcon": "./ico/logo.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "我的应用"
}
}
#==========================================
#如果报错，可以采用node_modules目录删除，重新下载依赖包
cnpm install
#cesium安装cmd命令： //OK
cnpm install cesium --save
(三). Remote安装和使用
安装：在命令提示符下，输入：
cnpm install '@electron/remote'
或者
npm install '@electron/remote'
使用示例：
在主进程中：
const remote = require('@electron/remote/main')
remote.initialize()
remote.enable(mainWindow.webContents)
在渲染进程中：
const remote = require('@electron/remote')
remote. remote.dialog.showOpenDialog() //示例
"extractResources": {
"from": "./resource/db/",
"to": "db"
},
package.json文件内容：
bash
{
"name": "pg-electron",
"version": "1.0.0",
"main": "main.js",
"repository": "https://gitee.com/hsg77/pg-electron.git",
"author": "'hsg77' <'qqId@qq.com'>",
"license": "MIT",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "electron-builder install-app-deps",
"dev": "electron-forge start",
"start": "electron-forge start",
"build": "electron-builder --win",
"electron:build":"electron-builder --win",
"build:windows": "node_modules/.bin/electron-builder -w"
},
"keywords": [],
"devDependencies": {
"@electron-forge/cli": "^6.2.1",
"electron": "^29.0.0",
"electron-builder": "^23.0.0",
"electron-updater": "^5.2.1"
},
"dependencies": {
"@electron-forge/cli": "^6.2.1",
"cesium": "^1.112.0",
"sqlite3": "^5.1.6"
},
"build": {
"productName": "我的应用",
"appId": "com.cwgis.pg.electron",
"copyright": "cwgis 版板所有",
"directories": {
"output": "out"
},
"win": {
"icon": "./ico/logo.ico",
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
}
]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./ico/logo.ico",
"uninstallerIcon": "./ico/logo.ico",
"installerHeaderIcon": "./ico/logo.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "我的应用"
}
}
}
本blog地址:https://blog.csdn.net/hsg77
本blog源代码地址：https://gitee.com/hsg77/pg-electron.git