基于electron29版本桌面应用app开发例子

基于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' <'[email protected]'>",
  "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

相关推荐
郭涤生2 小时前
第三章:事务处理_《凤凰架构:构建可靠的大型分布式系统》
笔记·架构·系统架构
寻丶幽风2 小时前
论文阅读笔记——RDT-1B: A DIFFUSION FOUNDATION MODEL FOR BIMANUAL MANIPULATION
论文阅读·笔记·扩散模型·具身智能·双壁机器人
奕天者3 小时前
C++学习笔记(三十三)——forward_list
c++·笔记·学习
m0_689618283 小时前
看爬山虎学本领 软爬机器人来创新 各种场景能适应
笔记·机器人
珊瑚里的鱼3 小时前
第五讲(下)| string类的模拟实现
开发语言·c++·笔记·程序人生·算法·visualstudio·visual studio
郭涤生3 小时前
第七章:从类库到服务的分布式基石_《凤凰架构:构建可靠的大型分布式系统》
笔记·分布式·架构
breakloop4 小时前
量化交易从0到1(理论篇)
笔记·学习·量化交易
大白的编程日记.4 小时前
【Linux学习笔记】初识进程概念和进程PCB
linux·笔记·学习
V---scwantop---信5 小时前
时尚优雅奢华品牌包装徽标设计衬线英文字体安装包 Kagea – Luxury Women Ligature Font
笔记·字体
V---scwantop---信5 小时前
复古未来主义屏幕辉光像素化显示器反乌托邦效果PS(PSD)设计模板样机 Analog Retro-Futuristic Monitor Effect
笔记