electron 介绍
使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
快速开始
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start
- electron 安装 卡在
node install.js - electron镜像在windows下安装出错
解决方法：
//设置.npmrc文件
registry=https://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"
创建透明窗体
- 拖动
主进程
渲染进程
主进程 与 渲染进程 通讯
打包 electron-builder
常见的可用的完整的配置
"build": {
"productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
"appId": "com.leon.xxxxx",//包名
"copyright":"xxxx",//版权 信息
"directories": { // 输出文件夹
"output": "build"
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"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", // 包含的自定义nsis脚本
},
"publish": [
{
"provider": "generic", // 服务器提供商 也可以是GitHub等等
"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"
}
}
命令行参数（CLI）
- Commands(命令):
electron-builder build 构建命名 [default]
electron-builder install-app-deps 下载app依赖
electron-builder node-gyp-rebuild 重建自己的本机代码
electron-builder create-self-signed-cert 为Windows应用程序创建自签名代码签名证书
electron-builder start 使用electronic-webpack在开发模式下运行应用程序(须臾要electron-webpack模块支持)
- Building(构建参数):
--mac, -m, -o, --macos Build for macOS, [array]
--linux, -l Build for Linux [array]
--win, -w, --windows Build for Windows [array]
--x64 Build for x64 (64位安装包) [boolean]
--ia32 Build for ia32(32位安装包) [boolean]
--armv7l Build for armv7l [boolean]
--arm64 Build for arm64 [boolean]
--dir Build unpacked dir. Useful to test. [boolean]
--prepackaged, --pd 预打包应用程序的路径（以可分发的格式打包）
--projectDir, --project 项目目录的路径。 默认为当前工作目录。
--config, -c 配置文件路径。 默认为`electron-builder.yml`（或`js`，或`js5`)
构建打包
- electron npm下载问题
解决方法：
//.npmrc文件配置
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
//或者
//ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/
- NSIS下载问题
解决方法：
缺什么就下什么
存放目录
存放目录
