Electron应用程序打包(Windows环境下) 谁践踏了优雅 2021-09-20 07:30 348阅读 0赞 Electron 官网地址:[https://electronjs.org/][https_electronjs.org] ## 一、搭建环境 ## > 如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web > 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。 刚开始学习,我们先clone了一个starter来快速学习一下,熟悉之后再来把我们自己的项目生成桌面程序。 **首先,安装nodejs、cnpm,在安装nodejs是会附带安装npm。** nodejs、cnpm的安装参考我这篇文章 ,地址 [https://blog.csdn.net/u012577474/article/details/92849764][https_blog.csdn.net_u012577474_article_details_92849764] \***Electron的安装** \#采用npm的方法安装Electron cnpm install -g electron ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70] 查看electron是否安装成功可通过命令 electron -v 查看。 **安装electron-packager打包工具** cnpm install -g electron-packager ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1] ## 二、学习Electron 的Hello world 程序 ## git clone https://github.com/electron/electron-quick-start #下载hello world程序 cd electron-quick-start cnpm install //这里我用的是cnpm,npm太慢了 npm start npm start 之后就会出现electron的桌面端页面了。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2] **electron-quick-start目录结构** ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3] **main.js** 是应用程序入口文件 **index.html** 是目标web ## 三、把Hello world 网页程序打包成exe可执行桌面程序(打包) ## 在electron-quick-start目录下准备应用程序的图标 icon.ico(作为生成的exe程序图标), ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4] **1、使用命令打包方法:** electron-packager . 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1 ![在这里插入图片描述][2019062012524340.png] 打包完成后,目录下会多出out文件夹,exe程序就在out’HelloWorld’-win32-x64文件夹下。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 5] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 6] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 7] 点击’HelloWorld’.exe运行exe桌面程序如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 8] **2、使用package.json打包方法:** 首先编辑package.json,增加一行 "package":"electron-packager ./app 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1" 别忘了前面补逗号。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 9] 在app(electron-quick-start)根目录创建app文件夹,并把main.js, index.html 和 package.json拷贝进去(拷贝并非剪切),然后在electron-quick-start根目录执行命令: npm run-script package ![在这里插入图片描述][20190620131420436.png] 打包完成。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 10] [https_electronjs.org]: https://electronjs.org/ [https_blog.csdn.net_u012577474_article_details_92849764]: https://blog.csdn.net/u012577474/article/details/92849764 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]: /images/20210726/d71370d9c126442aae93e1d80ac19896.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]: /images/20210726/8eb1d3aab68a4bff81f33ef302921f23.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]: /images/20210726/8aef913daa9b4b608e31bed2214fce11.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]: /images/20210726/581f385060c840eebd4c06464cbd12aa.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]: /images/20210726/4fc87115d7704ea9a834f7ce48263830.png [2019062012524340.png]: /images/20210726/6dca373c7f154d2d86bd6e273c54ab31.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 5]: /images/20210726/9a6ca48922914aedaa547c9f537bad50.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 6]: /images/20210726/e9bf85fa1b484aad97a0afe8629232d0.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 7]: /images/20210726/8f3ac1d88a6c49e3871f4371eb5a8eab.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 8]: /images/20210726/dca17b9923614ed08a1ddfcdfa8b1b25.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 9]: /images/20210726/9fd937dd43804e83bc0f180d2d2cead2.png [20190620131420436.png]: /images/20210726/e6e12f14e2f8465eb6eacf662251a1d9.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 10]: /images/20210726/0710c89b12dc4b31a6fe23aea2e8ffe3.png
还没有评论,来说两句吧...