electron学习笔记

electron学习笔记

新建目录

mkdir d:/test

cd test

初始化项目的命令:

npm init

一路回车,完成之后,在package.json文件中:

author 要补全

description 要补全,否则后面无法打包。

接下来,安装electron,使用下面的命令:

npm install --save-dev electron

上面的命令简化为:

npm i electron -D

把package.json文件中的

"test": "echo \"Error: no test specified\" && exit 1" 这一行删除,

修改为:

"start":"electron ."

  "scripts": {
    "start":"electron ."
  },

新建个main.js

使用下面的命令,运行程序:

npm start

打开浏览器调试窗口:

ctrl+shift+i

ctrl+r刷新网页

在Chromium-based浏览器中(如Google Chrome、Brave、Edge等),你可以使用以下快捷键来调整浏览器窗口的缩放级别:

放大页面内容:Ctrl + + (Ctrl和加号)

缩小页面内容:Ctrl + - (Ctrl和减号)

复原到默认缩放比例(通常是100%):Ctrl + 0

最小化然后还原窗口(使用Windows + Down Arrow 或者Windows + Up Arrow 如果你在Windows系统上)

vue用于electron的网址:

https://cn-evite.netlify.app

完整的程序代码:

目录结构, 见下图:

在html文件夹下面,有2个文件:index.html和render.js

package.json文件:

javascript 复制代码
{
  "name": "etest",
  "version": "1.0.0",
  "description": "electron-learning",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "xuexi",
  "license": "ISC",
  "devDependencies": {
    "electron": "^31.2.1"
  }
}

main.js文件:

javascript 复制代码
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs');
const { log } = require('console');

function writefile(event, data) {
  //console.log(event);

  console.log(data);
  fs.writeFileSync('d:/hello.txt', data)

}

function readFile() {
  const res = fs.readFileSync('d:/hello.txt').toString()
  console.log(res);
  return res
}

function createHTMLWindow() {
  const htmlWin = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      enableRemoteModule: false,
      preload: path.resolve(__dirname, './preload.js')
    }
  }
  );

  ipcMain.on("file-save", writefile)
  ipcMain.handle('file-read', readFile)

  htmlWin.loadFile(path.join(__dirname, 'html', 'index.html'));
}

app.whenReady().then(() => {
  createHTMLWindow();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createHTMLWindow();
  }
});

preload.js文件:

javascript 复制代码
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  version: process.version,
  saveFile: (data) => {
    ipcRenderer.send('file-save', data)
  },
  readFile() {
    return ipcRenderer.invoke('file-read')
  }
})

render.js文件:

javascript 复制代码
const btn1 = document.getElementById('btn1')

const btn2 = document.getElementById('btn2')
const input = document.getElementById('input')

const btn3 = document.getElementById('btn3')


btn1.onclick = () => {
  console.log(myAPI.version);
  alert(myAPI.version)
}

btn2.onclick = () => {
  myAPI.saveFile(input.value)
}

btn3.onclick = async () => {
  let data = await myAPI.readFile()
  alert(data)
}

index.html文件:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Stream Viewer Counter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 20%;
        }
    </style>
</head>
<body>

   
    <button id="btn1">点击我查看Node软件版本号</button>
    <br>

    <hr>    
    <input id="input" type="text">
    <br>
    <br>
    <button id="btn2">向D盘写入hello.txt</button>
    <br>
    <br>
    <button id="btn3">读取D盘hello.txt文件的内容</button>
    <hr>

    <script type="text/javascript" src="./render.js">      
    </script>
</body>
</html>

打包源代码为应用程序,exe格式的安装程序

有4种方法,本文采用最复杂的一种方式。

安装打包程序,下面的这行命令,必须在存放程序源代码的目录下执行:

npm install electron-builder -D

在package.json中进行相关配置,具体配置如下:

javascript 复制代码
{
  "name": "etest",
  "version": "1.0.0",
  "description": "electron-learning",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "FFFFFFFFXXXXXXXX",
    "win": {
      "icon": "./logo.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true       
    }
  },
  "author": "xuexi",
  "license": "ISC",
  "devDependencies": {
    "electron": "^31.2.1",
    "electron-builder": "^24.13.3"
  }
}

开始打包的命令:

npm run build

此种方式,因为要下载github上的程序包太慢,导致打包失败,慎用!

打包完成后,在源代码目录下,会自动生成dist文件夹,exe文件就在该文件夹里面。


另外的打包方式:

javascript 复制代码
npm install --global electron-packager
javascript 复制代码
electron-packager . etest --overwrite --asar=true --platform=win32 --arch=x64 --version=31.2.1

electron学习的视频链接:

禹神:一小时快速上手Electron,前端Electron开发教程_哔哩哔哩_bilibili

相关推荐
sinat_3842410942 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
GIS 数据栈2 小时前
每日一书 《基于ArcGIS的Python编程秘笈》
开发语言·python·arcgis
GIS思维17 小时前
ArcGIS定义投影与投影的区别(数据和底图不套合的原因和解决办法)
arcgis·gis·地理信息·arcgis坐标系·动态投影
阮少年、20 小时前
ArcGIS Pro的arpx项目在ArcGIS Server中发布要素服务(FeatureServer)
arcgis·arcgis server·gis服务发布·要素服务
圆弧YH1 天前
Arcgis 地图制作
arcgis
sinat_384241091 天前
使用 cnpm 安装 Electron,才是正确快速的方法
arcgis
中科GIS地理信息培训2 天前
ArcGIS Pro 3.4新功能1:唯一值符号化增加复选框,可在内容窗格和布局视图中控制类别的可见性。
arcgis·arcgis pro
黄鹂绿柳2 天前
学了Arcgis的水文分析——捕捉倾泻点,河流提取与河网分级,3D图层转要素失败的解决方法,测量学综合实习网站存着
arcgis
科研online2 天前
ArcGIS计算水库库容量
arcgis·学习方法
WineMonk2 天前
ArcGIS Pro ADGeoProcessing DAML
arcgis·gis·arcgis pro sdk·daml