electron学习笔记：electron入门

1.关于electron

electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将chromium和node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

 

2.最基础的electron程序

基础的Electron程序三个文件：package.json（元数据）,index.js（代码）和index.html。

 

3.什么是npm

npm（全称 Node Package Manager，即“node包管理器”）是node.js默认的、以javascript编写的软件包管理系统。

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

 

4.package.json文件

package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）

一个 package.json 文件可以有以下几点作用：

1.作为一个描述文件，描述了你的项目依赖哪些包

2.允许我们使用 “语义化版本规则”（后面介绍）指明你项目依赖包的版本

3.让你的构建更好地与其他开发者分享，便于重复使用

Package.json 属性说明

• name - 包名。
• version - 包的版本号。
• description - 包的描述。
• homepage - 包的官网 url 。
• author - 包的作者姓名。
• contributors - 包的其他贡献者姓名。
• dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
• devDependencies：在开发、测试环境中用到的依赖
• repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
• main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
• keywords - 关键字

 

5.helloworld

创建electron程序的基本步骤（Mac 环境）：

1.执行命令，安装electron， npm install -g electron

2.创建目录，helloworld，mkdir helloworld

3.创建package.json文件，执行命令，npm init

4.分别创建js，html文件。

package.json文件

{

"name": "helloworld",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC"

}

 

index.js文件

 

const { app, BrowserWindow } = require('electron')

const path = require('path')

const url = require('url')



let win



function createWindow() {

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



win.loadURL(url.format({

pathname: path.join(__dirname, 'index.html'),

protocol: 'file:',

slashes: true

}))



win.on('closed', () => {

win = null

})

}



app.on('ready', createWindow)



app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})



app.on('activate', () => {

if (win === null) {

createWindow()

}

})

index.html文件

hello world