Electron快速开发WEB-URL客户端并生成EXE

本文共有2815个字,关键词:

Electron就是可以让你用Javascript、HTML、CSS来编写运行于Windows、macOS、Linux系统之上的桌面应用的库。

开发环境配置

安装Node.js
点击 这里 进入官网 https://nodejs.org/en/ 下载、安装。
验证node安装成功

node -v

安装cnpm

由于众所周知的原因(国内连接外国网络慢),你需要一个cnpm 代替 npm,这里是官网。
安装命令(打开系统的cmd.exe来执行命令):

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Electron

cnpm install -g electron

查看electron版本

electron -v

两种方式创建项目

方式一: 官方实例代码

从GitHub上下载实例代码

git clone https://github.com/electron/electron-quick-start

进入到electron-quick-start目录下

cd electron-quick-start

安装项目依赖

npm install

启动项目:

npm start

方式二、使用electron-forge

创建项目

electron-forge init  myproject 

进入目录,执行

cd myproject
electron-forge start

WEB配置

打开项目文件 main.js 修改WEB参数

创建窗口对象

let mainWindow
function createWindow () { 
  mainWindow = new BrowserWindow({
       各种属性,
       各种方法    
 });

[属性]窗口高宽、全屏、不显示、exe图标

// width: 800,
// height: 600,
//全屏
// fullscreen: true,
//不显示
show: false,
//图标 
icon: './logo.png',

[方法]加载url里的 javascript 可执行

mainWindow = new BrowserWindow({ 
    webPreferences: {
        //nodeIntegration: true [默认] 
      //加载远程内容时,不论是使用BrowserWindow,BrowserView 还是 <webview>,首要任务都是禁用 Node.js 集成  【改成fasle】
      nodeIntegration: false,
      nodeIntegrationInWorker: false  
    }
  }) 

加载远程url地址

let url="http://www.baidu.com"
mainWindow.loadURL(url);

隐藏 electron 窗体的菜单

mainWindow.setMenu(null);

最大化窗口

// 原来是默认先不显示, 然后最大化窗口,最后窗口显示
mainWindow.maximize()
请输入代码
mainWindow.show()

Electron-packager 打包EXE

安装electron-packager

npm install electron-packager --save-dev

安装好之后会在package.json中的devDependencies生成代码:

"devDependencies": {
    "electron-packager": "^9.1.0"
}

注意:
1、打包时要分清devDependencies与dependencies的区别,文章后会讲。 2、package.json 的额外字段 ——
productName、author 和 description,虽然这几个字段并不是打包必备的,但它们会在 Windows 的
Squirrel 安装包(用于自动更新)中使用到,所以请读者根据实际情况添加。

electron-packager的打包基本命令是:

electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

参数说明:

sourcedir:项目所在路径
appname:应用名称
platform:确定了你要构建哪个平台的应用(Windows、Mac 还是Linux)
architecture:决定了使用 x86 还是 x64 还是两个架构都用
electronversion:electron 的版本
optional options:可选选项

在package.json中添加代码:

"scripts": {
    "package": "electron-packager ./ myapp --out ./OutApp --version 1.7.9 --arch=x64 --electron-version=6.0.4 --overwrite --icon=./app/img/icon/icon.ico"
  }

最后使用命令生成

npm run package

此方法非安装包方式生成,如需要生成安装包,需要使用 electron-builder

LGS

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

版权声明:本文为作者原创,如需转载须联系作者本人同意,未经作者本人同意不得擅自转载。本站微信公众号:苏米志,敬请关注!
广告还在招~
添加新评论
暂无评论