经常需要使用,记录一下,免得忘记
需要下载node.js,安装完node.js之后npm自然会有。
参考链接:http://www.runoob.com/nodejs/nodejs-install-setup.html
a、安装node.js。node官网地址:https://nodejs.org/en/
b、在windows 命令行下检查node是否安装成功。分别输入 node -v, npm -v 。如果出现 node 和 npm 的版本号,则转下一步。否则转第一步。
c、在命令行,下载淘宝镜像命令工具 cnpm。
d、用 cnpm 命令安装 electron。
首先,我们要安装electron-prebuilt,它是一个npm模块,因此我们可以使用Npm来进行安装,它是一个electron的预编译版本。
接下来安装electron-packager ,它也是一个npm模块,是一个用于打包electron应用的工具
创建一个electron应用。我们现在仅仅需要3个文件。
index.html
main.js
package.json
index.html使我们想要显示的页面,main.js为此应用的入口,package.json为npm项目的配置文件。
内容如下:
内容如下:
内容如下:(main.js的文件名对应package.json中main的值)
关于浏览器BrowserWindow模块更多的参数设置可以查看官方文档https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html
现在只要在myApp目录下执行npm start 就可以运行了
因为我们在main.js中写了win.webContents.openDevTools(); 开启了浏览器调试工具,所以我们打开的界面是这样的:
现在整个过程进行到最后一步,我们需要打包我们自己的应用,那么如何打包,这就需要用到我们先前已经安装的electron-packager
打开命令行我们可以这样使用它:
大概格式是这样的:
但是这样并不够,会提示:
我们需要指明Electronversion。这个参数是当前安装Electron的版本,不知道的可以直接electron就能看到了,我这里是1.4.13,经过改进后如下:
执行完毕后,看到父级目录下已经产生了我们希望看到的应用文件夹。里面的应用程序HelloWorld.exe就可以直接打开桌面应用了。
但是每次打包的执行命令太长太麻烦了,所以我们可以把命令写进package.json中,执行命令调用它就好了。
更改后的package.json如下:
这样我们每次打包只需要执行 npm run-script package就可以了。
如果我们想要更改窗口左上角的图标和任务栏的图标,只需要在打包的命令上加个icon参数就好了
NSIS操作简单,而且打包出来的安装包,安装过程和卸载过程都更加正规。推荐使用
1.下载NSIS软件,安装
NSIS中文版下载地址:https://pan.baidu.com/s/1mitSQU0
2.安装asar (参考官方文档https://www.w3cschool.cn/electronmanual/cexo1qkn.html)
1.在我们electron最初的目录myApp下执行下面命令,生成asar包
得到app.asar包
2.将app.asar放到文章开始图片得到目录下的resources文件夹下
1)选择可视化脚本编辑器
2)选择使用脚本向导创建新的脚本文件,确定
3)下一步
4)设置应用名称,版本号,网址,标志随便自定义一个就好,然后下一步
5)设置安装程序图标(图标必须是ico格式),名称,语言(SimpChinese),界面,然后下一步
6)默认,直接下一步就好
7)打开脚本文件,编译及运行
8)编译完就可以安装啦
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。