皮具网站建设服装网站,外包加工网会员,建立网站ppt,专题网页设计流程由于最近需要做一款跨平台的桌面应用#xff0c;所以选择使用electron来作为开发的框架#xff0c;下面说一下如何搭建一个简单的electron项目: 一、准备工作
安装git#xff1a;下载git | 官网
安装node#xff1a;下载 | Node.js 中文网
安装npm/cnpm#xff1a;npm … 由于最近需要做一款跨平台的桌面应用所以选择使用electron来作为开发的框架下面说一下如何搭建一个简单的electron项目: 一、准备工作
安装git下载git | 官网
安装node下载 | Node.js 中文网
安装npm/cnpmnpm install -g cnpm --registryhttps://registry.npm.taobao.org
安装electroncnpm install -g electron
验证安装是否完成electron -v / node -v
二、新建工程
1. 新建目录命名为electronDemo使用npm init -y 新建一个前端工程在package.json中增加一行main: “main.js”这行代表应用程序的入口是main.js文件。
{name: electron-quick-start,version: 1.0.0,description: A minimal Electron application,main: main.js,scripts: {start: electron .},repository: https://github.com/electron/electron-quick-start,keywords: [Electron,quick,start,tutorial,demo],author: GitHub,license: CC0-1.0,devDependencies: {electron: ^25.4.0}
}2. 在electronDemo目录中新建index.html文件在body中增加了hello, electron!这行文本。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyhello, electron!
/body
/html3. 在electronDemo目录中新建main.js文件在main.js文件增加内容
const { app, BrowserWindow } require(electron)
const path require(path)function createWindow () {const win new BrowserWindow({width: 800,height: 600})win.loadFile(index.html)
}app.whenReady().then(() {createWindow()app.on(activate, () {if (BrowserWindow.getAllWindows().length 0) {createWindow()}})
})app.on(window-all-closed, () {if (process.platform ! darwin) {app.quit()}
})app.whenReady()是app启动后的Promise使用then可以监听对应的状态在这个回调里面增加createWindow函数createWindow新建了一个浏览器窗口设置宽高并且使用浏览器窗口加载index.html文件。
在终端运行npm run start命令electron应用的窗口可以正常弹出。
4. 测试electron项目
调试main.js中代码需要使用VSCode打开工程点击左侧debug菜单创建launch.json文件。
{version: 0.2.0,configurations: [{name: Debug Main Process,type: node,request: launch,cwd: ${workspaceFolder},runtimeExecutable: ${workspaceFolder}/node_modules/.bin/electron,windows: {runtimeExecutable: ${workspaceFolder}/node_modules/.bin/electron.cmd},args : [.]}]
}在main.js文件app.whenReady()的回调中增加一个断点点击debug区域的启动程序按钮断点可以正常执行。
三、克隆实例代码案例
git地址git clone https://github.com/electron/electron-quick-start.git
安装完成通过npm start执行即可
