从零开始学习Electron(一),安装展示HelloWorld
2018-01-05 10:54
288 查看
从零开始学习Electron(一),安装展示HellowWorld
首先贴一下官网ELECTRONJS,这里面对应的是文档,有需要的朋友可以点击学习。1.首先安装node
这里默认安装好node 可以运行node -v查看是否安装成功
2.安装Electron
使用npm安装(这里是全局安装,图片显示的是二次安装的结果 安装成功应该是一大段的目录文件)npm install --g electron-prebuilt
查看版本号 是否安装成功
electron -v
3.HelloWorld
首先在E盘或者其他盘创建一个文件夹 我这里就叫electron_test打开命令文件 cd到该文件目录下
npm init
这时候打开你cd 文件就会看见package.json这个文件
创建
app文件夹,在
app/下创建main.js内容如下
const {app, BrowserWindow} = require('electron') const path = require('path') const url = require('url') // 保持一个对于 window 对象的全局引用,如果你不这样做, // 当 JavaScript 对象被垃圾回收, window 会被自动地关闭 let win function createWindow () { // 创建浏览器窗口。 win = new BrowserWindow({width: 800, height: 600, frame: false}) // 然后加载应用的 index.html。 win.loadURL(url.format({ pathname: path.join(__dirname, '/html/index.html'), protocol: 'file:', slashes: true })) // 打开开发者工具。 win.webContents.openDevTools() // 当 window 被关闭,这个事件会被触发。 win.on('closed', () => { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 与此同时,你应该删除相应的元素。 win = null }) } // Electron 会在初始化后并准备 // 创建浏览器窗口时,调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上,当单击dock图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow() } }) // 在这文件,你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件,然后用 require 导入。
然后在
app/html下创建index.html文件,内容如下
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Hello World</title> </head> <body> <span>Hello World</span> </body> </html>
接下来运行你的项目 要注意需要在你的
package.json中配置
"scripts":{"start": "electron ."}
大概就是这个样子package.json 具体对应的名称可以看下这个网址package.json字段全解析
{ "name": "electron_test", "version": "1.0.0", "description": "electron_app", "main": "app/main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." }, "author": "niutao", "license": "ISC" }
接下来在你的项目文件目录下
npm start
至此 安装并成功打开了Electron HelloWrold
相关文章推荐
- VMware从零开始学习之01 ESXI 5.5基础安装与网络配置
- 从零开始学习Java编程(二)--从HelloWorld说起
- VMware从零开始学习之11 Horizon View 5.2 Connection Server安装
- Struts2 - Form Tags_HelloWorld升级版(从零开始学习Strust2_02)
- 从零开始学习Hadoop--第1章 Hadoop的安装
- VMware从零开始学习之14 Horizon View Agent 5.2安装
- VMware从零开始学习之09 vCenter Server安装
- golang学习笔记(1):安装&helloworld
- VMware从零开始学习之10 VMware vSphere Client 5.5安装
- OpenCL学习笔记(三):OpenCL安装,编程简介与helloworld
- Struts2 - HelloWorld(从零开始学习Strust2_01)
- Windows下从零开始学习nodejs4.X+express4.X开发--(1)nodejs安装
- Memcached 学习笔记(一)安装 & helloworld
- Android 学习(1)——AndroidStudio安装以及Helloworld
- Hibernate3 - HelloWorld(hibernate-mapping和Annotation) 【从零开始学习Hibernate_01】
- OpenCL学习笔记(三):OpenCL安装,编程简介与helloworld
- Wix学习整理(2)——HelloWorld安装添加UI
- VMware从零开始学习之13 Horizon View 5.2 Viewcomposer安装
- OpenCL学习笔记(三):OpenCL安装,编程简介与helloworld
- QT学习1-下载安装HelloWorld