文章目录
一、构建环境
git clone https://github.com/atom/electron-quick-start
mv electronic-quick-start g-snow
cd g-snow
npm install && npm start
hello world 出现
二、窗口透明化
修改main.js
mainWindow = new BrowserWindow({
alwaysOnTop: true, // 窗口始终置顶
frame: false, // 窗口无边框
transparent: true, // 窗体透明
resizable: false, // 窗口大小不可调
});
index.html中删掉多余内容后，添加样式：
...
<style> html, body {
width: 100%; height: 100%; overflow: hidden; background-color: #00000066; } </style>
</head>
<body>
<script src="./renderer.js"></script>
</body>
在main.js中引入electron
const electron = require('electron')
接着获取屏幕尺寸
function createWindow () {
let area = electron.screen.getPrimaryDisplay().workAreaSize;
...
并赋值给窗口
const mainWindow = new BrowserWindow({
width: area.width,
height: area.height,
x:0，
y:0,
...
此时窗口布满全屏
三、添加雪花
- 引入资源文件并通过img标签添加到index.html中
<img src="res/snowflower.png" width="10">
- 创建SnowFlower.js
class SnowFlower{
constructor() {
this._img = document.createElement('img')
this._img.src = 'res/SnowFlower.png'
}
get img(){
return this._img
}
}
module.exports = SnowFlower
```js 在renderer.js中引入SnowFlower类，并创建“雪花元素” ```js
const SnowFlower = require('./SnowFlower.js')
document.body.appendChild(new SnowFlower().img)
在main.js中添加允许使用node.js
const mainWindow = new BrowserWindow({
...
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true // 允许使用node.js
}
四、移动雪花
在SnowFlower类的构造方法中初始化雪花位置和速度
this.x = 0
this.y = 0
this.speedX = 1
this.speedY = 1
在类中创建move函数
move(){
this.x += this.speedX
this.y += this.speedY
this.img.style.transform = `translate(${
this.x}px,${
this.y}px)`
requestAnimationFrame(this.moveBindThis)
}
在构造方法里把move()函数绑定上下文对象，以确保move方法中可以通过this进行回调
this.moveBindThis = this.move.bind(this)
在构造方法里通过绑定方法执行move函数
this.moveBindThis()
此时运行就可以看到雪花移动了，附上SnowFlower.js目前全部代码
class SnowFlower{
constructor() {
this._img = document.createElement('img')
this._img.src = 'res/snowflower.png'
this.x = 0
this.y = 0
this.speedX = 1
this.speedY = 1
this.moveBindThis = this.move.bind(this)
this.moveBindThis()
}
get img(){
return this._img
}
move(){
this.x += this.speedX
this.y += this.speedY
this.img.style.transform = `translate(${
this.x}px,${
this.y}px)`
requestAnimationFrame(this.moveBindThis)
}
}
module.exports = SnowFlower
五、雪花旋转
在SnowFlower类的构造方法中初始化雪花旋转角度和速度
this.rotation = 0
this.speedRotation = 1
在move方法中添加
this.rotation += this.speedRotation
并修改
this.img.style.transform = `translate(${
this.x}px,${
this.y}px)`
=>
this.img.style.transform = `translate(${
this.x}px,${
this.y}px) rotate(${
this.rotation}deg)`
查看效果，现在雪花边旋转边移动，附上SnowFlower.js目前全部代码
class SnowFlower{
constructor() {
this._img = document.createElement('img')
this._img.src = 'res/snowflower.png'
this.x = 0
this.y = 0
this.speedX = 1
this.speedY = 1
this.rotation = 0
this.speedRotation = 1
this.moveBindThis = this.move.bind(this)
this.moveBindThis()
}
get img(){
return this._img
}
move(){
this.x += this.speedX
this.y += this.speedY
this.rotation += this.speedRotation
this.img.style.transform = `translate(${
this.x}px,${
this.y}px) rotate(${
this.rotation}deg)`
requestAnimationFrame(this.moveBindThis)
}
}
module.exports = SnowFlower
六、参数随机
在SnowFlower类的构造方法中修改雪花的旋转方向和速度为随机
this.speedRotation = (Math.random() + 1) * (Math.random() > 0.5 ? 1 : -1)
在renderer.js中，将引入雪花的语句嵌套进循环中，来增加雪花数量
for(let i=0;i<12;i++){
document.body.appendChild(new SnowFlower().img)
}
在index.html中使用css初始化雪花位置
img {
display: block;
position: fixed;
}
在SnowFlower类的构造方法中调整雪花速度随机
this.speedX = (Math.random() + 1)/5 * (Math.random() > 0.5 ? 1 : -1)
this.speedY = (Math.random() + 1)/2
雪花大小随机
this._img.width = Math.random() * 7 + 3
要想雪花初始位置随机需要先获取屏幕尺寸信息
在SnowFlower类文件中引入electron
const electron = require('electron')
const workAreaSize = electron.remote.screen.getPrimaryDisplay().workAreaSize
在SnowFlower类的构造方法中设置雪花初始位置随机
this.x = Math.random() * workAreaSize.width
在move()方法中设置雪花越界移除，并在不越界的情况下才继续移动
if(this.x > workAreaSize.width || this.x < 0 || this.y > workAreaSize.height){
if(this._img.parentNode){
this._img.parentNode.removeChild(this._img)
}
}else{
requestAnimationFrame(this.moveBindThis)
}
七、完成下雪特效
持续制造雪花：每隔1秒制造一次，将制造雪花代码嵌套进去
renderer.js
setInterval(()=>{
for(let i=0;i<10;i++){
document.body.appendChild(new SnowFlower().img)
}
},1000)
在SnowFlower类的构造方法中将“天空”抬高一些，显得更自然一些
this.y = -20
让雪花特效不影响正常电脑使用：忽略鼠标事件
main.js
function createWindow () {
...
mainWindow.setIgnoreMouseEvents(true) // 忽略鼠标事件
...
}
去掉背景色
完成！
八、打包成可执行文件
打包方法1
下载打包器
cnpm i -g electron-packager
直接打包
electron-packager . 'g-snow' --platform=win32 --arch=x64 --icon=snow.ico --out=./out --asar --app-version=0.0.1
或是配置package.json的scripts
"scripts": {
...
"pkg": "electron-packager . g-snow --platform=win32 --arch=x64 --icon=snow.ico --out=./out --asar --app-version=0.0.1"
},
在命令行中执行npm run pkg
尝试并没有成功，发现了第二种更好的方法，舍弃第一种。。。
打包方法2
在package.json中做如下配置
"build": {
"productName":"桌面雪花生成器",
"appId": "top.aimooc.app",
"mac": {
"target": ["dmg","zip"]
},
"win": {
"target": ["nsis","zip"]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true
},
"files": ["**/*","res/snowflower.png"]
},
"scripts": {
"start": "electron .",
"pkg": "electron-packager . g-snow --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1",
"dist": "electron-builder --win --x64"
},
在命令行中执行npm run dist
配置的详细解释参见：electron打包（electron-builder/electron-packager）及打包过程中的报错解决
打包过程中出现因网络原因导致的报错参见：electron-builder打包过程中报错——网络下载篇
九、全部代码展示
工程目录
.
|-- README.md
|-- SnowFlower.js
|-- icon.ico
|-- index.html
|-- main.js
|-- package.json
|-- preload.js
|-- renderer.js
`-- res
`-- snowflower.png
package.json
{
"name": "g-snow",
"version": "1.0.0",
"description": "下雪特效",
"main": "main.js",
"build": {
"productName":"桌面雪花生成器",
"appId": "top.aimooc.app",
"mac": {
"target": ["dmg","zip"]
},
"win": {
"target": ["nsis","zip"]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true
},
"files": ["**/*","res/snowflower.png"]
},
"scripts": {
"start": "electron .",
"pkg": "electron-packager . g-snow --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1",
"dist": "electron-builder --win --x64"
},
"repository": "https://gitee.com/OliverDaDa/g-snow",
"keywords": [
"Electron",
"quick",
"start",
"snow",
"demo"
],
"author": "AImooc-Oliver",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^8.2.0"
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>g-snow</title>
<style> html, body {
width: 100%; height: 100%; overflow: hidden; } img {
display: block; position: fixed; } </style>
</head>
<body>
<script src="./renderer.js"></script>
</body>
</html>
main.js
const {
app, BrowserWindow} = require('electron')
const path = require('path')
const electron = require('electron')
// var globalShortcut = electron.globalShortcut
function createWindow () {
let area = electron.screen.getPrimaryDisplay().workAreaSize;
// Create the browser window.
const mainWindow = new BrowserWindow({
width: area.width,
height: area.height,
x:0,
y:0,
alwaysOnTop: true, // 窗口始终置顶
frame: false, // 窗口无边框
transparent: true, // 窗体透明
resizable: false, // 窗口大小不可调
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true // 允许使用node.js
}
})
mainWindow.setIgnoreMouseEvents(true) // 忽略鼠标事件
mainWindow.loadFile('index.html')
// globalShortcut.register('ctrl+e',()=>{
// mainWindow.webContents.openDevTools()
// })
}
app.whenReady().then(createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
SnowFlower.js
const electron = require('electron')
const workAreaSize = electron.remote.screen.getPrimaryDisplay().workAreaSize
class SnowFlower{
constructor() {
this._img = document.createElement('img')
this._img.src = 'res/snowflower.png'
this._img.width = Math.random() * 7 + 3
this.x = Math.random() * workAreaSize.width
this.y = -20
this.speedX = (Math.random() + 1)/7 * (Math.random() > 0.5 ? 1 : -1)
this.speedY = (Math.random() + 1)
this.rotation = 0
this.speedRotation = (Math.random() + 1) * (Math.random() > 0.5 ? 1 : -1)
this.moveBindThis = this.move.bind(this)
this.moveBindThis()
}
get img(){
return this._img
}
move(){
this.x += this.speedX
this.y += this.speedY
this.rotation += this.speedRotation
this.img.style.transform = `translate(${
this.x}px,${
this.y}px) rotate(${
this.rotation}deg)`
if(this.x > workAreaSize.width || this.x < 0 || this.y > workAreaSize.height){
if(this._img.parentNode){
this._img.parentNode.removeChild(this._img)
}
}else{
requestAnimationFrame(this.moveBindThis)
}
}
}
module.exports = SnowFlower
renderer.js
const SnowFlower = require('./SnowFlower.js')
setInterval(()=>{
for(let i=0;i<12;i++){
document.body.appendChild(new SnowFlower().img)
}
},1000)
PS：打包后以及编写过程中可在main.js中写如下代码创建打开DevTools的快捷键ctrl+e来快速debug（记得注释掉 忽略鼠标事件 的代码）
// var globalShortcut = electron.globalShortcut
function createWindow () {
...
// globalShortcut.register('ctrl+e',()=>{
// mainWindow.webContents.openDevTools()
// })
}
完整项目地址：g-snow
成品下载地址：桌面雪花生成器 Setup 1.0.0.exe
制作过程中使用到的网站，在此感谢！！
特别感谢视频作者，侵权立删！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/37536.html
