electron入门

来源：互联网发布：有效抵御网络黑客攻击编辑：程序博客网时间：2024/05/20 06:41

electron入门

1、electron简介

引用官网的一句话：Build cross platform desktop apps with JavaScript, HTML, and CSS，就是用前端的技术去构建桌面应用。在PC端混合app开发中，nwjs和electron都是可选的方案，它们都是基于Chromium和Node的结合体, electron是后起之秀，它相比于nwjs更好的结合了node，所以electron是一个更不错的选择。

2、开发环境搭建
配置安装

安装node
假设已经安装好node环境，高版本的node是自带npm的，所以无需另安装。
安装electron
win+r打开cmd窗口，执行如下代码。-g代表全局安装，不熟悉npm命令的童鞋可以去稍微了解一下。

    npm install -g electron-prebuilt

执行完成后使用electron -v 查看安装好的electron版本。
这里写图片描述
如果要安装特定版本的electron，在后面加上版本号就可以。npm install -g electron-prebuilt@v1.7.5

3、开发工具。
优秀的编译器有很多，当然根据个人的喜好程度去进行选择。
4、构建一个简单的hello word项目
准备

 - `package.json` - 处理应用的以来和说明性信息. - `main.js` - 入口页面和渲染html页面. 这个文件是应用的 **main process**.--主进程 - `index.html` - 要渲染的页面,这个页面是应用的 **renderer process**--渲染进程.

electron启动一个应用，会创建一个主进程。这个主进程负责与你系统原生的GUI进行交互并为你的应用创建GUI（在你的应用窗口）。
构建项目目录

这里写图片描述
各个文件内容如下
index.html

 <!DOCTYPE html>   <html>   <head>       <meta charset="UTF-8">       <title>Hello World!</title>   </head>   <body>   <h1>Hello World!</h1>   my app   </body>   </html>

main.js的内容
这里的index.html是放在src文件夹下面的，所以入口文件的路径为./src/index.html，如果在其他地方就要注意修改路径

const electron = require('electron')   const app = electron.app   const BrowserWindow = electron.BrowserWindow      let mainWindow   function createWindow () {       mainWindow = new BrowserWindow({width: 800, height: 600})          mainWindow.loadURL(url.format({           pathname: path.join(__dirname, './src/index.html'),           protocol: 'file:',           slashes: true       }))          // 打开调试工具DevTools.       mainWindow.webContents.openDevTools()          mainWindow.on('closed', function () {           mainWindow = null       })   }   app.on('ready', createWindow)   app.on('window-all-closed', function () {       if (process.platform !== 'darwin') {           app.quit()       }   })      app.on('activate', function () {       if (mainWindow === null) {           createWindow()       }   })

package.json
package.json文件可以在项目文件夹建立好之后使用npm init生成。

{  "name": "work01",  "version": "1.0.0",  "main": "main.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "electron ."  },  "author": "",  "license": "ISC",  "devDependencies": {    "electron": "^1.7.5",    "electron-prebuilt": "^1.4.13",  },  "dependencies": {},  "description": ""}

上面进行完成之后我们运行

npm install

进行依赖文件的安装，它所依据的配置文件就是package.json
安装之后运行electron . 就能看见我们要的结果
这里写图片描述

5、将项目打包成一个桌面应用
本地安装打包工具

npm install electron-packager --save-dev

安装好之后package.json文件的依赖包处会多出一条，如下

  "devDependencies": {    "electron": "^1.7.5",    "electron-packager": "^9.0.0",    "electron-prebuilt": "^1.4.13",  },

安装好后,我们执行下面命令 ,打包一个windows文件包。
electron-packager . 可执行文件的文件名 –win –out 打包成的文件夹名 –arch=x64（或者32） –ignore=node_modules

electron-packager . app --win --out myapp --arch=x64--overwrite --ignore=node_modules

当要再次打包覆盖时，在后面加上–overwrite就可。

阅读全文

0 0