初识Electron开发桌面应用

Electron是什么？

Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript
构建跨平台（mac/window/linux）桌面应用。

Electron开发环境的搭建

首先安装node环境
（点击跳转到老张的另外一个文章，这里推荐使用nvm更好的管理node版本）

接下来新建文件夹并拖入编辑器

–全局安装则直接win+r输入cmd

npm install -g electron全局安装运行项目
electron .
项目内安装运行项目
npx electron .

–这里演示项目内安装

–首先 npm init 初始化一个package文件

–然后安装electron

npm install electron --save-dev

这里有一个小坑，创建文件夹名字时，千万不要与要安装的依赖包名重复
否则就会提示：
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name “electron” under a package
npm ERR! also called “electron”. Did you name your project the same
npm ERR! as the dependency you’re installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm

npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\zyb\AppData\Roaming\npm-cache_logs\2022-10-27T06_06_51_534Z-debug.log

–安装完之后检验是否安装成功

npx  electron -v
出版本号就代表安装成功
./node_modules/.bin/electron
如果弹出electron页面则成功
没有则卸载重新安装

注意：这里使用的npx只有在node版本5.0以上才可以使用

弹出的electron界面

Electron基本例子的搭建

–安装完成之后在新建一个index,html文件

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><button id="btn">小姐姐请进来</button><div id="mybaby"></div></body><script src="./render/index.js"></script></html>

–随后新建index,js文件

var electron = require('electron')//引入electron
var app = electron.app //引用app
var BrowserWindow = electron.BrowserWindow//控制窗口引用
var mainWindow = null //声明要打开的主窗口
app.on('ready',()=>{mainWindow = new BrowserWindow({width:800,height:800,webPreferences:{nodeIntegration:true,contextIsolation:false}//启用node下面的东西})//设置主窗口mainWindow.loadFile("index.html")//加载哪个html页面mainWindow.on('closed',()=>{mainWindow = null})
})

–新建xiaojiejie.txt
输入小红小花

–新建render文件夹并新建index,js

var fs = require("fs")
window.onload = function(){var btn = document.querySelector('#btn')var mybaby = document.querySelector('#mybaby')btn.onclick = function(){fs.readFile('xiaojiejie.txt',(err,data)=>{mybaby.innerHTML = data})}
}

–最后运行项目

electron .
中间有空格
如果你没有全局安装则使用
npx electron .

–启动成功

补充:点击toggle用来调试

初识Electron开发桌面应用相关推荐

送你一份用Electron开发桌面应用的避坑指南【送3本书，含犀牛书】
大家好,我是若川.持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,新年第一次送3本书.抽奖规则见文末. 如今,Electron 领域发生了重大的变革,Electro ...
Electron开发桌面应用
由 Bazzzinga威同学翻译自 Medium.https://medium.com/developers-writing/building-a-desktop-application-with- ...
记一次electron开发桌面英语(自用，类歌词）
记一次electron开发桌面英语(自用,类歌词) 晒一下自己的考试成绩单,不感兴趣可以跳过制作初心进入正题功能安装(略) 项目结构目录 package.json main.js index. ...
采用electron开发桌面应用
什么是electron,能做什么? 1.electron是搭载谷歌v8内核的高性能的node环境 ,所有node能用的东西.这里都能用. 2.前端做桌面应用. 前端做桌面应用(electron, nw ...
JS是世界上最好的语言—— 使用Electron开发桌面应用(一)
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个专注于桌面应用的 Node. js 的变体,而不是 Web 服务器. ...
electron 托盘图标闪烁_从零到一，用 Electron 开发桌面效率工具
Electron 已经不算新技术,最早是 github 从 Atom 编辑器衍生出来的框架.通过编写 Javascript, HTML, CSS 能快速编译出跨系统的桌面 app.Electron 的 ...
electron forge 好用吗_在优麒麟上使用 Electron 开发桌面应用
使用 Web 标准来创建桌面 GUI,上手快.成本低.跨平台.自适应分辨率,这些都是 Electron 的优势.
【Electron】 Electron 开发桌面应用（一）编写→运行→打包
一. 准备工作 1. 首先,我们要安装electron-prebuilt,它是一个npm模块,因此我们可以使用Npm来进行安装,它是一个electron的预编译版本. npm install -g e ...
使用electron开发桌面音乐播放器
一:主要技术栈前端:electron-vue+vue-router+axios+es6+pouchDB+node js+nsis; 二:目前已完成的功能音乐播放:包括播放进度条.歌曲切换.缓存条. ...

初识Electron开发桌面应用

Electron是什么？

Electron开发环境的搭建

Electron基本例子的搭建

初识Electron开发桌面应用相关推荐

最新文章

热门文章