先奉上node.js的文档链接:
node.js的中文api文档
安装
electron的使用首先需要安装node.js。
node.js官网下载地址
然后使用npm安装electron
# 全局安装 electron 模块
npm install electron -g
可能会安装失败,安装失败的话,可能是网络问题,可以尝试如下解决办法:
使用cnpm进行安装
# 使用淘宝镜像 全局安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 使用cnpm全局安装electron
cnpm install -g electron
检查是否安装成功
npx electron -v
输入该命令,然后回车,若出现版本号,则表示安装成功。
demo
1. 项目结构
2.运行效果
3.具体实现
-
创建文件夹
我这里的项目文件夹名字叫做:1.helloworld
-
创建html文件,我这里叫做
index.html
说明:html中要展示的内容,其实就是界面要展示的内容。其中可以直接引用css
、js
文件。跟正常的web中的html
是一样的。代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <link rel="stylesheet" href="index.css"> </head> <body> <div> Hello World! </div> </body> </html>
-
css代码
div { width: 200px; height: 200px; background-color: aquamarine; }
-
主进程代码 main.js
说明:这里的js
文件与普通的js
文件就不太一样了。因为这个文件要作为项目的主进程使用。// 依赖的模块 let electron = require('electron') // 窗口程序主程序 let app = electron.app // 窗口 let BrowserWindow = electron.BrowserWindow // 声明窗体 let mainWindow = null // 监听主程序准备就绪 app.on('ready', () => { // 新建窗口,声明窗口初始属性 mainWindow = new BrowserWindow({ width: 500, height: 300 }) // 加载要显示的页面 mainWindow.loadFile('index.html') // 监听关闭按钮,当关闭时,删除窗体 mainWindow.on('closed', () => { mainWindow = null; }) })
-
写完之后,现在还不能运行,需要初始化该项目
在建好的文件夹里打开cmd
窗口,使用如下命令npm init
可以直接全部回车。或使用:
npm init --yes
-
初始化之后,使用如下命令启动
electron .
这样就Hello World的demo就完成了。