前端开发_5.Electron和Nw.js学习总结
目录
一、Electron学习总结
前言
其实用心就够了
学习链接
electronjs官网文档、electron教程、技术胖b站快速入门$$$原代码
electron 基本使用
构建一个简单的electron桌面。
一、查看node.js是否正确安装。
node -v
npm -v
二、使用脚手架创建
>首先创建一个文件夹并初始化 npm 包
>entry point 应为 main.js.
>author 与 description 可为任意值，但对于应用打包是必填项。
mkdir my-electron-app
cd my-electron-app
npm init -y
npm init --yes
>然后，将 electron 包安装到应用的开发依赖中。
npm install -g electron 全局安装
npm install --save-dev electron
npx electron -v
./node_modules/.bin/electron -v
./node_modules/.bin/electron 出现界面安装ok
>在您的 package.json配置文件中的scripts字段下增加一条start命令：
"scripts": {
"start": "electron ."
}
若不配置，则electron .
>start命令能让您在开发模式下打开您的应用
npm start
四、打包分发应用程序。
>最快捷的打包方式是使用 Electron Forge。
npm install --save-dev @electron-forge/cli
npx electron-forge import
>使用 Forge 的 make 命令来创建可分发的应用程序：
npm run make
>Electron-forge 会创建 out 文件夹，您的软件包将在那里找到
三、添加页面
>main.js
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
mainWindow.loadFile('index.html')
// 打开开发工具
// mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
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 (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。
>index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
>preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
electron参考代码
1. 值得参考的代码
>const {app, BrowserWindow} = require('electron');//解构
>var window = null;
app.on('ready', function() {
window = new BrowserWindow({width: 800, height: 600});
window.loadURL('https://www.bootwiki.com');
window.loadFile('index.html');
window.openDevTools();//打开开发工具
window.on('closed',function(){//window关闭时触发。
window=null;
})
});
2. 菜单Menu
一、
const { app, BrowserWindow, Menu, MenuItem } = require('electron')
const menu = new Menu()
menu.append(new MenuItem({
label: 'Electron',
submenu: [{
role: 'help',
accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
click: () => { console.log('Electron rocks!') }
}]
}))
Menu.setApplicationMenu(menu)
二、
const { Menu, BrowserWindow } = require('electron')
const template = [
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' }
]
}
]
var m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)
3. 全局快捷键 globalShortcon 模块、addEventListener() API来监听 kepup 和 keydown DOM事件。
globalShortcut.register('Alt+CommandOrControl+I', () => {
console.log('Electron loves global shortcuts!')
})
function handleKeyPress (event) {
// You can put code here to handle the keypress.
document.getElementById("last-keypress").innerText = event.key
console.log(`You pressed ${event.key}`)
}
window.addEventListener('keyup', handleKeyPress, true)
一、NW.js学习总结
前言
桌面开发的。
参考链接
官网、官网中文网、官网翻译网、https://github.com/popcorn-official/popcorn-desktop
https://github.com/streamlink/streamlink-twitch-gui、https://www.cnblogs.com/sexintercourse/p/14378477.html
初识、介绍Nw.js
- NW.js 让您可以使用WEB(html5、css3、javascript)技术，包括Node.js及其所有modules来开发桌面应用的一种新方式。她的前身是 “node-webkit” 项目。
- NW.js 基于Chromium内核与Node.js。
1.简单的Nw.js应用
Nw.js的hello world应用
第一步 检查环境，创目录
node -v
npm i -g cnpm
cnpm i nw
npm init -y
mkdir app
cd app
第一步 创建 package.json配置文件
npm init -y
{
"name": "helloworld",
"main": "index.html"//main.js
}
//如果是main.js
nw.Window.open('index.html', {}, function(win) {});
第二步 创建首页 index.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
第三步 运行您的应用
npm install --save-dev nwjs-builder-phoenix
"start": "run -x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
npm run start
第四步 应用打包
"dist": "build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
npm run dist
//在使用windows系统时，您可以拖拽package.json文件到nw.exe文件之上来运行应用。
2. 值得参考的代码
Nw.js的右键菜单应用
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Context Menu</title>
</head>
<body style="width: 100%; height: 100%;">
<p>'Right click' to show context menu.</p>
<script>
// 创建一个空菜单
var menu = new nw.Menu();
// 添加一些文本选项
menu.append(new nw.MenuItem({
label: 'Item A',
click: function(){
alert('You have clicked at "Item A"');
}
}));
menu.append(new nw.MenuItem({ label: 'Item B' }));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({ label: 'Item C' }));
// 绑定"contextmenu"事件
document.body.addEventListener('contextmenu', function(ev) {
// 阻止弹出默认菜单
ev.preventDefault();
// 在你点击的位置弹出自定义菜单
menu.popup(ev.x, ev.y);
return false;
}, false);
</script>
</body>
</html>
3.使用 Node.js API
// 使用node.js取得系统接口
var os = require('os');
document.write('You are running on ', os.platform());
4. ESC键退出全屏模式
nw.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
nw.Window.get().leaveFullscreen();
}
}));
nw.App.registerGlobalHotKey(
new nw.Shortcut({
key: "Z",
active: function () {
window.close();
},
})
);
5.创建透明窗体(window)
第一步：
<body style="background-color:rgba(0,0,0,0);">
第二步package.json:
"window": {
"frame": false,
"transparent": true
}
第三步：运行
nw --disable-gpu --force-cpu-draw
