electron开发
来源:互联网 发布:淘宝卖家真实名字 编辑:程序博客网 时间:2024/05/18 22:45
安装NodeJS
目前支持的最新版本为NodeJS 7.4.0,因为安装过程比较简单所以这里省略了。
安装Electron
npm install -g electron
创建项目工程
使用WebStorm创建一个Empty Project.
用npm init初始化这个项目。初始化后,package.json内容如下
{ "name": "facerecognition_test", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron .", "pack": "electron-packager --electron-version=16.11 .", "build": "build " }, "author": "Chen Haifeng", "license": "ISC"}
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>人脸识别测试程序</title></head><body><button id="CAMOpen" name="CAMOpen">调用人脸识别DLL</button></body></html>
添加文件main.js
const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')//import url from "url"// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () { console.log('createWindow') // Create the browser window. win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // Open the DevTools. win.webContents.openDevTools() // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null })}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() }})app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { console.log('activate') createWindow() }})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.
测试项目
如果electron是采用全局安装的,使用electron .来运行项目。
如果electron是安装在项目的node_modules目录,使用.\node_modules\.bin\electron .来运行项目。
因为在package.json文件中做了配置,所以这里可以使用npm start运行项目。
打包项目
安装electron-packager
npm install -g electron-packager
electron-packager --electron-version=1.6.11 .
生成结果如下
运行一下打包后的exe程序
制作平台安装包
npm install -g electron-builder
执行命令build, 整个过程比较漫长。
自动更新下次补充。
阅读全文
0 0
- 【Electron】Electron开发入门
- electron开发
- Electron-使用Electron开发第一个应用
- Electron开发入门
- 搭建electron开发环境
- electron开发windows驱动程序
- 【Electron】Electron开发入门(一):开发环境搭建
- Electron
- electron
- Electron实战:创建ELectron开发的window应用安装包
- 【Electron】Electron开发入门(二):创建项目Hello Word
- 【Electron】Electron开发入门(四):操作PC端文件系统
- 【Electron】Electron开发入门(五):项目打包
- electron开发记录(四):electron中组件的一些用法
- Electron实战:创建ELectron开发的window应用安装包
- Electron开发桌面应用(2):VSCODE调试Electron项目
- 【Electron】Electron开发入门(八):自定义electron框架外壳(shell)的菜单(Menu)
- Electron: HTML + Javascript 开发桌面应用程序
- java web学习中遇见的问题
- 第6章 BOM
- 【Vue.js】-Vue.js组件
- 埋点进化论:从埋点到无埋点
- Nginx+Tomcat 配置负载均衡集群
- electron开发
- SOLR+爬虫
- STM32常用管脚重定义外设
- unity中的web player与webGL
- SpringMVC 解决跨域问题
- MOOC清华《程序设计基础》第5章:分书问题-代码一
- Xcode添加静态库以及编译选项配置常见问题
- 正则表达式(待定)--------更新版
- 开发者遇到的典型美术相关问题回顾