ps怎么做网站界面设计,c 网站开发代码,greentree wordpress,青岛工程建设管理信息网站下载由于最近需要做一款跨平台的桌面应用#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执行即可
