Electron学习笔记（技术胖）

最新推荐文章于 2022-04-07 08:43:38 发布

VIP文章 qq_40640737

最新推荐文章于 2022-04-07 08:43:38 发布

阅读量717

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_40640737/article/details/107902519

版权

Electron学习笔记（技术胖）

标签（空格分隔）：前端桌面技术胖 Electron

安装

前提：已经安装node，并且是10以上的版本

cnpm install electron --save-dev //仅安装在当前项目
cnpm install -g electron // 全局安装
npx electron -v // 查看版本
npx electron // 打开Electron界面
npx electron . // 运行该程序

打包成exe文件

cnpm install electron-packager --save-dev //安装electron-packager

“packager”: “electron-packager ./ HelloWorld --all --out ./outApp --overwrite --icon=./app/img/icon/icon.ico” // 在package.json添加这个脚本

在项目中新建outAPP文件夹。

cnpm run-script packager // 打包

其它资源

官方网站
https://www.electronjs.org/

Demo

Demo1：Hello World

效果：

- 打开一个普通应用程序的界面，主界面只有Hello World

var electron = require('electron');

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', ()=>{
   
    mainWindow = new BrowserWindow({
   width: 800, height: 800})
    mainWindow.loadFile('index.html') // 加载html界面，也就是渲染进程
    mainWindow.on('close', ()=>{
   
        mainWindow = null
    })
})

Demo2：读取xiaojiejie.txt文件的内容

html

<button id="btn">小姐姐请进来</button>
<div id="mybaby"></div>
<script src="./render/index.js"></script>

index.js如下

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

main.js 如下

var electron = require('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} // 让node下的所有东西都可以在渲染进程中使用
    })
    mainWindow.loadFile('index.html') // 加载html界面，也就是渲染进程
    mainWindow.on('close', ()=>{
   
        mainWindow = null
    })
})

Demo3：点击打开新窗口

demo.html

<button id="btn">
    打开新的窗口
</button>
<script src="./render/demo.js"></script>

yellow.html

<body style="background-color: yellow;">
    <h1>我是黄色页面</h1>
</body>

demo.js

const btn = this.document.querySelector('#btn')
const BrowserWindow = require('electron').remote.BrowserWindow

window.onload = function(){
   
    btn.onclick = ()=>{
   
        newWin = new BrowserWindow({
   
            width: 500,
            height: 500
        })
        newWin.loadFile('yellow.html')
        newWin.on('close',()=>{
   
            newWin = null
        })
    }
}

main.js

var electron = require('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} // 让node下的所有东西都可以在渲染进程中使用
    })
    mainWindow.loadFile('demo.html') // 加载html界面，也就是渲染进程
    mainWindow.on('close', ()=>{
   
        mainWindow = null
    })
})

Demo4：顶部菜单栏

demo.html

<button id="btn">
    打开新的窗口
</button>
<script src="./render/demo.js"></script>

menu.js

const {
   Menu, BrowserWindow} = require('electron');
var template = [
    {
   
        label: '凤来仪洗浴会所',
        submenu: [
            {

最低0.47元/天解锁文章

qq_40640737

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Electron学习笔记（技术胖）

Electron学习笔记（技术胖）标签（空格分隔）：前端桌面技术胖 Electron安装前提：已经安装node，并且是10以上的版本cnpm install electron --save-dev //仅安装在当前项目cnpm install -g electron // 全局安装npx electron -v // 查看版本npx electron // 打开Electron界面npx electron . // 运行该程序打包成exe文件cnpm install ele
复制链接

扫一扫