用electron开发桌面应用--quick start 的那些坑

2019独角兽企业重金招聘Python工程师标准>>>

如果一切顺序，只需要几步就可以体检到了：

1. 克隆项目：

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

2. 安装依赖的包：

cd到electron-quick-start文件夹，执行命令：

npm install  

3.运行程序：

npm start

这时应该能看到一个弹出的窗口。

 

但是，如果你想把你写的程序给别人使用，不可能要它们安装npm环境，还要命令行启动吧，所以就有了下一步：

4.编译成二进制文件：

1）安装：electron-packager

npm i electron-packager

2)打包：

electron-packager . myapp --out  ../

参数说明：            

.  是指当前目录，也就是项目所在目录

myapp 是项目名，可以随意取

--out ../   表示二进制文件输出到上一级目录，当然你也可以指定到其它目录

它会根据你的系统平台生成对应的二进制文件，如果需要生成多平台的二进制文件，在后面加上 --all

如果一切顺利，很快你就可以看到../目录下生成了一个新的带myapp字样的文件夹，里面的myapp.exe就是二进制文件了，当然独立把这个二进制文件拿出来运行是不行的，必须把所整个文件夹一起发给使用者。

双击myapp.exe就应该可以打开程序了。

如果想在桌面生成快捷方式，右键发送到桌面快捷方式就行了。

 

说一说测试中遇到的坑：

1、win10 x64的环境下执行npm start后(也就是：electron . 命令)，窗口一直不能打开：

后来我找来了另一个demo，项目名叫做electron-demo 的，安装后可以正常打开，对比了代码中的内容后，我发现是安装的包不一样，在安装了electron-prebuilt 这个包后就可以正常打开了。

但其实electron-prebuilt就是现在的electron，也就是说electron-prebuilt是较旧的版本。

再进一步测试后，我发现是在main.js中的：

mainWindow = new BrowserWindow({width: 800, height: 600})

这一行代码不能正常执行，但也没有报错；而且执行到这一行就停止了。

在上一行代码中console.log(app);或者console.log(BrowserWindow)都是正常的。

 

另外，我对比了只安装electron的时候与安装了electron-prebuilt时console.log(BrowserWindow)的结果，在命令行打印出的结果是完全一样的，看不出任何差异。

 

2.如果执行npm install 命令的时候很慢，或者出现超时的情况，请使用淘宝镜像，请自行搜索怎样设置（安装cnpm)。

 

3.如果打包二进制的时候出现超时，还是选择镜像的问题，需要另外配置一下镜像：

npm config set electron_mirror="https://npm.taobao.org/mirrors/electron/"

或者在项目文件夹下面添加文件：.npmrc

文件内容：

electron_mirror="https://npm.taobao.org/mirrors/electron/"

(其实就是通过添加文件的方式设置配置信息)

 

补充：有个更方便地使用electron的方式：

https://github.com/sindresorhus/generator-electron 

 

转载于:https://my.oschina.net/agui1989/blog/1438732