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





hello world

electron学习笔记:electron入门_第1张图片

 

你可能感兴趣的:(electron学习笔记)