Electron 自学笔记(一)
程序员文章站
2022-07-01 23:45:55
...
目录
一,Electron 简单了解
-
Electron
是一个跨平台的桌面应用开发框架,用html
css
js
的技术开发桌面上面可以安装的
软件。Electron
又为前端开发者谋得了一份好的差事”。
想起在网路里流传很广的一句话“不要和老夫说什么C++
,Java
,老夫行走江湖就靠一把JS
,遇到需求撸起袖子就是干”。 -
Electron
由Github
开发 -
Electron
是一个用HTML
,CSS
和JavaScript
来构建跨平台桌面应用程序的一个开源库 -
Electron
通过将Chromium
和Node.js
合并到同一个运行时环境中,并
将其打包为Mac
,Windows
和Linux
系统下的应用来实现这一目的。 -
Electron
最新版本为4.0.4
当前时间为(2019-02-08
)
二,学前准备
环境安装
-
电脑需要安装
Node.JS
,点击node中文网
选择对应的版本node.js
安装:npm
使用国内淘宝镜像安装方法(单次有效):
如果想替换全局的npm install [模块名] --registry=https://registry.npm.taobao.org
npm
安装源,执行下边命令设置配置文件:
查看npm config set registry https://registry.npm.taobao.org
npm
配置信息;npm config list
-
电脑需要安装Git :
Git
官网 下载对应版本安装,或者去各大软件平台搜索安装 - 需要有
HTML
CSS
javascript
以及node.js
基础; -
安装 Electron
命令行执行以下命令 全局 安装:npm install -g electron
-g
表示全局安装
5.开发工具 Visual Studio Code
建议下载对应版本的Visual Studio Code
进行开发,个人觉得比较好用
三,克隆一个仓库,快速启动一个项目
# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start
体验一下 electron
四,手动搭建一个 electron 项目
方法一:
-
新建一个项目目录 例如:
electrondemo01
-
在
electrondemo01
目录下面新建三个文件:index.html
、main.js
、package.json
-
index.html
里面用css
进行布局(以前怎么写现在还是怎么写) -
在
main.js
中写如下代码:var electron =require('electron'); //electron 对象的引用 const app=electron.app; //BrowserWindow 类的引用 const BrowserWindow=electron.BrowserWindow; //创建全局mainWindow的引用 let mainWindow=null; //监听应用准备完成的事件 app.on('ready',function(){ //创建窗口 mainWindow=new BrowserWindow({width: 800, height: 600});//定义宽,高 mainWindow.loadFile('index.html');//加载页面index.html mainWindow.on('closed', function () { mainWindow = null; }) }) //监听所有窗口关闭的事件 app.on('window-all-closed', function () { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit(); } })
方法二:使用 electron-forge 搭建一个electron 项目
electron-forge
相当于 electron
的一个脚手架,可以让我们更方便的创建、运行、打包electron
项目。
#全局安装 electron-gorge
npm install -g electron-forge
# my-new-app 是指要生成的项目文件夹
electron-forge init my-new-app
#切换到 项目文件夹"my-new-app"
cd my-new-app
#启动项目
npm start
五, Electron 程序目录结构
Electron application 本质上是一个 Node. js
应用程序。 与 Node.js
模块相同,应用的入口是 package.json
文件。 一个最基本 的 Electron 应用一般来说会有如下的目录结构:
your-app/
├── package.json
├── main.js
└── index.html
-
为你的新Electron应用创建一个新的空文件夹。 打开你的命令行工具,然后从该文件夹运行
npm init
-
npm
会帮助你创建一个基本的package.json
文件。 其中的main
字段所表示的脚本为应用的启动脚本,它将会在主进程中执行。 如下片段是一个package.json
的示例:{ "name": "your-app", "version": "0.1.0", "main": "main.js" }
-
链接:
Electron文档
更多细节参考官方文档 -
(2019-2-10 学习中…)
上一篇: 自动驾驶这个“小孩子”有多大了?