moyigg 2019-11-18
版权:禁止任何形式的转载
备注:我是用其他编辑器编辑的,发现导出后,标题就不对了,后面再找时间修改吧,或者大家到这里看:https://gitbook.cn/gitchat/ac...
Electron 是一个使用 JavaScript、 HTML 和 CSS 等 Web 技术创建跨平台桌面应用程序的框架,它负责比较难搞的部分,你只需把精力放在你的核心业务开发上即可。说到把精力放到核心业务开发上,这听起来特别诱人,但是很多初学者在第一个 Hello World 上就被各种拦路虎挡住了,我这篇文章的目标就是帮助大家跳过去,把精力放在核心业务上。
这是一篇 Electron 入门教程,让大家能快速搭建开发环境、会写 Hello World、会用 Git 做开发版本管理、会用 SemVer 做发布版本管理、会打包成 exe 文件发布,目标是让大家能尽快把精力放到业务开发上去。
适宜人群
Web 初学者
Electron 初学者
想用 Web 技术开发桌面应用的开发者
看完本教程,您将收获如下知识点:
tips:
本教程Electron 版本是 5.0.0,Node.js 版本是 12.1.0,操作系统是 Windows10,没有Mac OS 和 Linux相关的特定内容。
Electron 支持 Windows 7 及以上版本,任何在低版本 Windows 上开发 Electron 的尝试都将是徒劳无功的。 如果你的 Windows 低于Windows 7,您可以使用微软向开发者免费提供的 Windows 10 虚拟机镜像,链接:https://developer.microsoft.com/zh-cn/windows/downloads/virtual-machines。约定:
下文说在 VSCode 终端工具上执行下面的命令,是指在 Visual Studio Code 横排菜单的那个终端工具里执行命令,当然您完全可以在操作系统自带的 CMD 命令行工具或 Windows PowerShell 上执行命令,在一些场景它可能还更高效,如果您还不会灵活使用,不用纠结,下面按提示操作即可。
由于本人能力有限,疏漏或错误在所难免,还望读者朋友若发现错误或者其他问题,能给予谅解及批评指正。
Electron 通俗点讲就是用 HTML、CSS、JavaScript 开发跨平台桌面应用程序的一个框架。
但是今天官网不建议去看了,我想您搜到这篇文章,是直接来收干货的,不过传送门还是根据惯例要上,官网:https://electronjs.org/ 。
下载并安装:https://code.visualstudio.com
Windows 系统下载后直接下一步下一步,按默认选项安装即可,这里不再讲安装。
今天也不深入讲解VSCode的使用,也不建议你去看,不过教程传送门按惯例还是上一下:https://www.jianshu.com/p/75652eb00680
不得不提,VSCode就是用 Electron 开发的。
Electron 依赖 Node.js,所以要先下载并安装 Node.js,不过您得先确定要装哪个版本的 Electron,然后下载对应的 Node.js 版本,比如我这里是用Electron 5.0.1,我下载的 Node.js 是12.0.0。
各版本如图
Windows 系统下载后直接下一步下一步,按默认选项安装即可,这里不再讲安装。npm 是包管理器,它会一起安装,下面将用到它。
下载并安装:http://nodejs.cn/download/
检查安装是否成功,在 VSCode 终端工具上执行命令:
node -v npm -v
成功输出版本则安装成功
在 VSCode 终端工具上用 npm 包管理器安装 Electron (在国内,如果也怕一天一夜都没装起来的朋友,请自动忽略这一步,跳到设置淘宝镜像):
npm install electron --save-dev
tips:
--save-dev 参数在下面有讲解
如果执行上一步提示了 npm 版本过低,在 VSCode 终端工具上用下面的命令升级 npm:
npm install -g npm
报错的话,看下面的报错处理。
如果下面配置了淘宝镜像,也遇到提示需要升级npm,执行下面的命令:
cnpm install -g npm
如果执行报错:Error: EPERM: operation not permitted……,请按Win + X 启动 Windows PowerShell(管理员)(A),然后执行命令。
弃用上面的命令,执行下面的命令,用淘宝镜像提速:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样以后就可以用 cnpm 代替 npm
在 VSCode 终端工具上执行下面的命令安装 Electron:
cnpm install electron --save-dev
tips:
cnpm 跟 npm 用法完全一致
淘宝镜像官网:https://npm.taobao.org/
删除 Electron:cnpm uninstall electron (在哪个目录下,卸载哪个目录下的,如果报错,请按Win + X 启动 Windows PowerShell(管理员)(A),然后执行命令。
升级 Electron:cnpm update electron -gtips:
如果想不同项目使用不同版本的 Electron,安装时就不能用 -g 参数,如生产环境用 LTS 稳定版本,新功能学习用 Current 版本。
分别用到参数为 -g,--save,--save-dev,-D,关于这几个参数下面的解释还不够,大家还需要百度,今天就不用了。
首选是 --save-dev 安装到具体项目下
关于参数的更多介绍请看教程:http://www.cnblogs.com/limitcode/p/7906447.html
--save:是将模块安装到项目目录下,并在 package.json 文件的 dependencies 节点写入依赖
--save-dev 或 -D:意思是将模块安装到项目目录下,并在 package.json 文件的 devDependencies节点写入依赖
那 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢?devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的
为什么要保存在 package.json?因为节点插件包相对来说非常庞大,不加入版本管理,将配置信息写入 package.json,方便将其加入版本管理,其他开发者对应下载即可(命令提示符执行 npm install,则会根据 package.json 下载所有需要的包)。全局安装:-g
全局安装代码:cnpm install -g electron
全局将会安装在 C: Users Administrator AppData Roaming npm,并且写入系统环境变量;
全局安装可以通过命令行任何地方调用它;非全局安装:--save-dev
非全局代码:cnpm install --save-dev electron
非全局安装:将会安装在当前定位目录(需要cd切换到具体项目目录,或者在项目目录按住 Shift,然后右键,启动 Powershell 执行命令);
非全局安装将安装在定位目录的 node_modules 文件夹下,通过要求()调用;tips:
这里顺便提一个对初学者比较懵的命令:npm install
乍一看,怎么什么参数都没有,它安装什么呢?其实它是安装当前执行命令所在目录下的json文件里的相关依赖文件。我们从 GitHub 克隆一个别人的示例,示例里一般是不包含依赖的文件的,但是它的 package.json 里会有依赖列表,就是用这个命令下载一下那些依赖文件。
如果想手工搭建项目可以不安装
Electron-forge 是 Electron 的一个脚手架,它可以自动生成项目文件,这篇文章不会深入讲它,也可以选择安装,但是暂时不学它。
在 VSCode 终端工具上执行命令,全局安装它:
cnpm install -g electron-forge
D:\ElectronProject └── ElectronDemo
手工在 D 盘创建文件夹,ElectronDemo 文件夹在 ElectronProject 文件夹里面(这次推荐手工快速建),或者在 VSCode 终端工具上执行下面的命令创建文件夹:
D: #本行写法是为了兼容 cmd 命令行工具切换盘符的写法 mkdir \ElectronProject\ElectronDemo
用 Visual Studio Code 软件来新建三个文件,这里不多说,跟微软其他软件新建文件一样,创建完以后,保存到 D:ElectronProjectElectronDemo,目录是这样的。
习惯用其他 IDE,请直接有用其他 IDE,注意新建的文件编码用 UTF-8
D:\ElectronProject\ElectronDemo ├── package.json ├── index.js └── index.html
三个文件之间的关系:index.html 是我们想要显示的页面,index.js 为此应用的入口,package.json 为 npm 项目的配置文件。
在 VSCode 终端工具上执行下面的命令:
cd D: #本行写法是为了兼容 cmd 命令行工具切换盘符 cd \ElectronProject\ElectronDemo npm init
tips:
如果你觉得cd命令慢,你可以在 ElectronDemo 文件夹下按住 Shift 键,然后点右键,启动 Powershell,然后输入 npm init 后回车
然后一路回车,可以全部用默认,也可以改内容,创建完,我这里显示如下,其中版本我改了一下,您的可能是 "version":"1.0.0",这一篇还不用纠结这些具体是什么意思。
{ "name": "ElectronDemo", "version": "0.1.0", "description": "test", "main": "index.js", "author": "qian", "license": "ISC", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" } }
//引入 electron 模块,它必须引入 //该模块导出了一个 app 对象和一个 BrowserWindow 类,app 对象包含一些方法,如 on 方法用于将事件绑定到事件函数中。 const {app,BrowserWindow} =require('electron') // 保持一个对于 window 对象的全局引用,如果你不这样做, // 当 JavaScript 对象被垃圾回收, window 会被自动地关闭 let mainWindow function createWindow(){ //创建浏览器窗口 mainWindow = new BrowserWindow({width:1024,height:768}) //载入index.html mainWindow.loadURL(`file://${__dirname}/index.html`) } //ready是当Electron完成初始化后触发,这里初始化后就会去执行 createWindow 函数,然后创建浏览器窗口并加载主页面。 app.on('ready',createWindow)
tips:
关于加载 html 的代码(上面第9行),在很多其他教程您可能看到的写法是 mainWindow.loadFile('./index.html') ,但是会报 mainWindow.loadFile is not a function 错误,改写成上面的 mainWindow.loadURL 写法,它加载一个 url,可以是本地文件或者是远程 url,则不会报错,注意不是单引号,是键盘ESC键下面的那个,并且注意是要英文输入法下输入。
另外关于分号(;),我这里是不加,分号要不要加,大家看到 js 代码有的教程里有分号,有的没有,比如我的,到底哪种最优。关于加不加,可以参考 Vue贡献者尤雨溪的回答 :https://www.zhihu.com/question/20298345/answer/49551142
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron 项目</title> </head> <body> <h1>这是我们的第一个 ELECTRON 练习项目</h1> </body> </html>
在 VSCode 终端工具上执行下面的命令:
cd D:\ElectronProject\ElectronDemo
tips:
不切换到项目目录,无法启动项目
如果你觉得cd命令慢,你可以在 ElectronDemo 文件夹下按住 Shift 键,然后点右键,启动 Powershell,然后执行 electron . 命令
继续执行命令:
electron .
不出意外,将正常启动项目
在 VSCode 终端工具上执行下面的命令:
D: #本行写法为兼容 cmd 命令行工具切换盘符的写法 cd \ElectronProject electron-forge init Electron-forgeDemo
tips:
如果你觉得cd命令慢,你可以在 ElectronProject 文件夹下按住 Shift 键,然后点右键,启动 Powershell,然后输入 electron-forge init Electron-forgeDemo 后回车
创建过程杀毒软件可能会对操作dll进行阻止,点允许。
创建成功后,它会自动生成一个文件夹,文件目录应该是这样:
D:\ElectronProject ├── ElectronDemo ├── Electron-forgeDemo
继续执行下面的命令启动项目
cd \ElectronProject\Eelectron-forgeDemo electron-forge start
tips:
不切换到项目目录,无法启动项目
如果你觉得cd命令慢,你可以在 Eelectron-forgeDemo 文件夹下按住 Shift 键,然后点右键,启动 Powershell,然后输入 electron-forge start 后回车
它是一个 Electron 的预编译版本
cnpm install -g electron-prebuilt
它是一个用于打包 Electron 应用的工具
cnpm install -g electron-packager
electron-packager . ElectronDemo --win --out ../myElectronDemo --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module
tips:
格式这样
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>
对应关系
electron-packager . ElectronDemo --win --out ../myElectronDemo --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module
. 点代表当前目录
ElectronDemo 代表应用名称
win 代表打包平台 Windows
../myElectronDemo 在项目上级文件夹新建文件夹
electron-version=5.0.0 代表 Electron 的版本号,我这里是5.0.0
--overwrite 是覆盖原文件
--ignore=node_module 是忽略node_module打包过程,杀毒软件可能会报操作关键 dll ……,点允许。
打包完成,到上级目录找到打包好的文件夹,进去执行 exe 即可启动应用。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" "package":"electron-packager . ElectronDemo --win --out ../myElectronDemo --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module" }
然后在 VSCode 终端工具上执行下面的打包命令:
cnpm run-script package
上面两步的任何一步,执行完毕后,看到父级目录下已经产生了我们希望看到的应用文件夹,双击里面的应用程序 electron01.exe 就可以直接打开桌面应用了,不过还不是安装包。
如果我们想要更改窗口左上角的图标和任务栏的图标,只需要在打包的命令上加个 icon参数就好了。
electron-packager . ElectronDemo --win --out ../myElectronDemo --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module --icon=./app/img/icon.ico
火凤官网:www.hofosoft.cn,这个比较简单,但是可控项目少,今天推荐用它。
NSIS 教程:https://www.cnblogs.com/modou/p/3573772.html,这个稍微复杂了一些,但是可控项目特别多,今天不建议大家去看它,这里只给传送门。
我们用 Git 进行版本控制
tips:
它是 Linux 创始人 Linus Benedict Torvalds 的第二神作,特别好用。
想深学更多 Git,请看廖雪峰老师的 Git 教程:https://www.liaoxuefeng.com/wiki/896043488029600,不过今天不建议你点进去,后面再说,今天还不用去学那么深,不过它是必学。
官网地址:https://www.git-scm.com/download/
安装后,在 Windows 开始菜单或桌面空白处右键,找到并启动 Git Bash 或 Git Bash Here,设置用户和邮箱,执行下面的命令。
git config --global user.name "Your Name" git config --global user.email "[email protected]"
git config 命令中的 --global 参数,这个参数表示这台机器上所有的 Git 仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和 Email 地址。
tips:
至于为什么要要设置名字和邮箱,是因为 Git 是分布式版本控制系统,每个机器都都要自报家门,说出名字和 Email 地址。
那么问题来了,这个用户名与邮箱可以随便填吗?答案是可以,那有什么作用呢?当邮箱号与 GitHub 上的仓库的邮箱号一致,提交记录左侧会显示账号头像,并且可点击,并且名字是用的 GitHub 的 username 而不是上面设置的 Your Name,反之不可点击,名字用的是上面配置的 Your Name。
更深入的内容,请看 Git 教程。
在项目目录下右键,启动 Git Bash Here,并执行命令。
git init
这时将生成一个 git 文件夹,这个目录是 Git 用来跟踪管理版本库的,里面的东西不要手动去修改。
tips:
解释一个谜团,所有的版本控制系统,其实只能跟踪文本文件的改动,另外文本是有编码的,如果没有历史遗留问题,建议统一用 UTF-8(VSCode新建的文件默认了UTF-8,在右下角可以看到),另外不要用 Windows 的记事本,就算设置为 UTF-8 也不要用,具体原因可百度。而图片、视频这些二进制文件,虽然也能由版本控制系统管理,但没法跟踪文件文本的变化,只能把二进制文件每次改动串起来,也就是只知道图片从 10KB 改成了 30KB,但到底改了啥,版本控制系统不知道。
初始化好 git 仓库,我们将文件夹下的文件添加到 git 仓库。
第一步:在项目文件夹下右键,启动 Git Bash Here(如果上一步你关了的话才要重新启动),用 git add 命令告诉 Git,把文件添加到仓库,如果是所有文件,用点(.)表示,下面有两种代码,选一种。
git add 文件名.后缀 git add .
执行后没有什么提示,那就正确了,没有提示就是最好的提示。
第二步:用 git commit 命令告诉 Git,把文件提交到仓库,提交一次一个版本,后续可以回滚。
git commit -m "提交备注"
tips:
如果你对提交为什么要先 add 后 commit 的两步设计有疑问,请看上面的 Git 教程。备注也是重中之中,千万不要写一些没有意义的字符,不然后面可能会哭,正确的做法是简要描述你本本次提交里面改了或者新增了什么。
tips:
今天允许您跳过本节,不过它很重要,后面一定要学。
这里推荐选择的远程仓库平台有:
下面我们讲 GitHub。
先用邮箱注册一个账号,设置 username,这里取好听一点,不过后面可改,这个是公开的,比如 PG 大神德哥的 GitHub 地址是:https://github.com/digoal ,最后的 digoal 就是 username。
本地 Git 仓库和 GitHub 仓库之间的传输,有两种:
https 这里不推荐,用它速度会慢一点,另外每次连接要输入密码,有点麻烦,今天讲解 SSH 加密的,由于远程推送需要验证身份,所以需要设置。
接下来讲操作流程,进入到项目文件夹,空白处点鼠标右键,打开 Git Bash Here
检查公钥是否存在,输入命令:
cd ~/.ssh #打开公钥目录 ls #查看是否存在公钥id_rsa.pub
我的执行结果如下,代表有了,不用创建了:
id_rsa id_rsa.pub known_hosts
检查邮箱,输入命令:
git config --global --list #检查邮箱是什么
我的执行结果如下:
filter.lfs.clean=git-lfs clean -- %f filter.lfs.smudge=git-lfs smudge -- %f filter.lfs.process=git-lfs filter-process filter.lfs.required=true [email protected] user.name=ccc winupdater.recentlyseenversion=2.21.0.windows.1
如果没有 id_rsa.pub ,就执行下面的命令新建 SSH Key:
ssh-keygen -t rsa -C "[email protected]"
tips:
"[email protected]"改为"[email protected]"
邮件地址换成你自己的邮件地址,然后一路回车,使用默认值即可,一切顺利的话,可以在用户主目录里找到.ssh目录(我的在:C:Usersqian.ssh),里面有id_rsa和id_rsa.pub两个文件,这两个就是SSH Key的秘钥对,id_rsa是私钥,不能泄露出去,id_rsa.pub是公钥,可以放心地告诉任何人,这里就填到 GitHub 上。
文件夹里应该如下的样子:
~/.ssh
├── id_rsa
├── id_rsa.pub
└── known_hosts
创建过程,命令行会显示新生成的公钥保存在哪个目录(我的在:C:Usersqian.ssh),到那个目录找到 id_rsa.pub ,然后按下面的流程操作:
在 Git Hub 右上角找到 “Create a new repo” 按钮,填写仓库名 ElectronDemo ,然后点击 “Create repository” 按钮创建一个仓库。
tips:
当本地有个文件夹里的仓库要上传到远程仓库(本地可以有多个文件夹里的项目,同步到通一个 GitHub 上,只需先在 GitHub 上创建一个仓库。
这里不用勾选生成 README,如果勾选了,后面第一次本地与远程同步,需要先 git pull 拉远程的到本地,然后 git push 推上去,我们今天只是入门,所以不建议大家搞复杂了,后面直接往上推即可。
在本地项目文件夹里空白处右键,打开 Git Bash Here,然后输入如下命令
git remote add origin [email protected]:lixiang/ElectronDemo.git
tips:
上面的命令是与远程仓库建立联系,下面的命令是当前文件夹下的仓库与 GitHub上的ElectronDemo 建立联系,把这个写到了当前文件夹下的 git 目录里的 config 文件夹里,这样下面就可以在当前目录打开 Git Bash Here 然后执行 git push origin master 它就会把当前文件下的仓库,对应传到 GitHub 上的仓库里。
git remote add origin [email protected]:lixiang(GitHub 上的username)/ElectronDemo(仓库名).git
把上面的 lixiang 替换成你自己的 GitHub 账户名,否则您无法把您本地的项目推送到 Git Hub 仓库的,因为你本地没有我的 id_rsa.pub 公钥。ElectronDemo 替换成 Github 官网上的仓库名称(repository),注意 Github 上的仓库名称,不支持中文,并且必须手工去 GitHub 上先建立仓库。
执行命令如果提示:fatal: remote origin already exists. 它的意思是远程 origin 已经存在。那么执行:git remote rm origin 然后再重新执行 git remote add origin ......
还有可能会报的错误是,提示没有姓名,邮箱,那就是前面没有设置,请设置。
在本地项目文件夹里空白处右键,打开 Git Bash Here,然后输入如下命令
git push -u origin master
tips:
由于远程库是空的,我们第一次推送master分支时,加上了-u参数,Git不但会把本地的master分支内容推送的远程新的master分支,还会把本地的master分支和远程的master分支关联起来,在以后的推送或者拉取时就可以简化命令。
至此,本地仓库的内容就与远程仓库的内容一致了。
关于远程仓库我们本教程就到这里,其他内容建议学习上面的 Git 教程,真心写的好。
git push origin master
当本地有用 git commit 命令,向本地版本库提交了新的版本,则可以能需要git push 把本地更新推送到远程,具体语句有下面的这些写法,主要是看参数写与不写的意思。
git push <远程主机名> <本地分支名> <远程分支名> git push origin master:refs/for/master
上面语句即是将本地的master分支推送到远程主机origin上的对应master分支
至于分支创建合并、版本回退,冲突处理等,本篇文章不再讲解,也不希望你现在就去看,目前每次会把更新推送到 master 主分支就可以了,后面你可以看上面的 Git 教程。
生产版本管理,要根据下面这样的语义规则来,比如2.0.0跟1.5.3之间,应该是有 API 突破性变更,或者 Node.js 重大版本跟新,或者 Chromium 版本更新了,才能改最前面的一位,不是随意编出来的,我们发布版本时版本编号应该如下这样来确定每位的增加。
这里不再赘述,直接上别人的教程,今天可以不用深读。
生产版本建议参考:https://semver.org/lang/zh-CN/
Electron 遵循:https://electronjs.org/docs/tutorial/electron-versioning#semver
下一篇教程我们将精力放在业务上面,我们试着做个小项目,这样对大家的学习更有帮助,我们要尽快从 Hello World 往后面走,怀旧不适合学习编程,对吧。
强烈建议加QQ群:1025951999,方便交流,也方便有文章时能及时通知大家。大家也请在 GitChat 上关注我,以便更容易找到我。