快捷搜索:  汽车  科技

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)在当前窗口打开命令行,输入如下命令:electron .前面我们全局安装了Electron,如何运行App呢?首先,我们跟着Electron社区的快速入门程序创建我的第一个Electron App(HelloWorld)参照入门程序,App创建完成,包结构如下:electron示例

Windows安装Electron环境

在命令行里安装全局electron:
npm install -g electron

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(1)

安装命令

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(2)

安装成功

Ps:在这之前你需要安装nodejs,npm。

创建入门程序

首先,我们跟着Electron社区的快速入门程序
创建我的第一个Electron App(HelloWorld)

参照入门程序,App创建完成,包结构如下:

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(3)

electron示例

前面我们全局安装了Electron,如何运行App呢?

在当前窗口打开命令行,输入如下命令:
electron .

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(4)

示例页面

App创建成功!不要着急,本讲的重点是介绍如何打包成exe。

安装打包工具

我是使用的electron-packager,首先全局安装一下:
npm install electron-packager -g

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(5)

安装

打包之前需要在当前App里安装依赖

上面运行是利用Electron的全局命令,打包需要App里安装自己的依赖,后面且称做局部依赖,当前App的依赖只有Electron,在命令行执行:
electron -v

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(6)

查看版本

Ps:获取当前Electron全局安装的版本号。

编辑package.json,npm安装局部依赖

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(7)

调整打包内容


npm install

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(8)

输入npm安装命令


electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(9)

测试局部依赖是否安装成功,在app根目录执行命令行

npm start

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(10)

启动服务


electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(11)

安装成功iframe示例页面

Ps:程序运行,局部依赖安装成功。

打包显示应用图标

打包前为当前app制作icon:icon.ico,256*256。制作好放入app根目录

打包方式

electron-packager打包:electron-packager打包有两种方式,一是直接在命令行编辑命令,直接进行打包。另一种是在package.json里编辑package,执行npm run-script package。

  • 在app根目录执行命令行:
    electron-packager app/ 学为先教育云平台 --platform=win32 --arch=x64 --icon=logo.svg --out=./out --asar --app-version=1.0.0

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(12)

打包网站


electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(13)

  • 首先编辑package.json

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(14)

调整标题logo

在app(electron-quick-start)根目录创建app文件夹,并把main.js, index.html 和 package.json拷贝进去(拷贝并非剪切),然后在electron-quick-start根目录打开命令行:
npm run-script package

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(15)

打包

Ps:打包成成功。

  • 忽略不安全域名设置
    打开main.js文件,修改如下:
命令行打包参数

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

参数说明:

  • location of project:项目所在路径
  • name of project:打包的项目名字
  • platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
  • architecture:决定了使用 x86 还是 x64 还是两个架构都用
  • electron version:electron 的版本
  • optional options:可选选项

electron 开发远程桌面(Electron构建跨平台的桌面应用程序)(16)

electron简介

猜您喜欢: