梅子酱~-CSDN博客

Electron-vue 系列之自动更新与手动更新文章目录Electron-vue 系列之自动更新与手动更新一、主要插件1. electron-builder2. electron-updater二、各项配置1. package.json中publish配置2. 升级包配置3. 本地http服务器启动三、关键代码编写1. autoUpdate.js 文件2、前端页面 update.vue3. 在主进程中引入自动升级4. 实现效果五、注意事项六、额外配置项详解1. 控制流程的 api2. 一些配置项一、

2023-01-30 14:41:34 4665 13

原创 Electron-vue 链接网络与服务器

Electrob-vue 链接网络与服务器Electron-vue 探测是否连接到网络、与服务器的链接是否通畅文章目录Electrob-vue 链接网络与服务器一、Electron-vue 检测与网络连接1. 引入库2. 代码实现二、连接服务器1. 页面编写2. 服务器参数配置：3. 连接测试4. 实现效果三、调取exe格式的后台服务1. 代码2. 实现效果总结一、Electron-vue 检测与网络连接使用 Node.js 模块 is-online 对网络连接进行检测，在网络断开和连接网络时，

2022-12-27 09:47:51 957

原创 Electron-vue dialog.messageBox 组件使用

dialog.messageBox组件 dialog.messageBox 组件是 electron 的原生组件，在不同系统中的样式不同，本文主要介绍在 win10 下的显示效果文章目录dialog.messageBox组件一、dialog.messageBox组件调用二、使用1. 基本样式2. 自定义样式总结一、dialog.messageBox组件调用const{dialog} = require("electron")或import {dialog} from "electron"

2022-08-10 16:30:21 2094

原创 Electron系列之，启动后台服务

通过cmd命令行启动后台服务在electron窗体启动时调取后台服务exe文件文章目录通过cmd命令行启动后台服务一、通过start命令启动服务端exe文件1. 代码2. 服务端文件3. 效果二、直接使用exe文件名启动服务1. 代码总结一、通过start命令启动服务端exe文件1. 代码代码如下（示例）：// 启动后台服务// 方案1，不需要查看输出日志// const {exec} = require("child_process")// function runExec()

2022-06-07 08:48:58 6149 1

原创 Electron-Vue 系列之页面路由配置

Electron-Vue loadURL 路由配置文章目录Electron-Vue loadURL 路由配置一、loadURL使用1、引用本地文件2、引用接口路径二、配置路由1.vue2 示例2. vue3 示例一、loadURL使用win.loadURL(url[, options])url：stringoptions(可选)使用方式如下（示例）：1、引用本地文件win.loadURL("file://${__dirname}/index.html")win.loadURL("ap

2022-05-20 08:51:51 5603 6

原创 Electron-vue 日志输出到指定文件夹下

Electron-vue 日志electron-vue项目开发过程中，日志信息可以帮助我们快速的定位错误，因此快速的找到日志位置，能提高我们的开发效率文章目录Electron-vue 日志一、默认日志保存位置二、输出格式化的日志1.引入库2. 创建日志文件3. 指定日志文件夹位置4. 对日志进行分类总结一、默认日志保存位置electron-vue 日志信息默认保存在 userData文件中，没有具体的位置与文件命名规律，文件内容也是未转换格式的，查看起来较为麻烦。Windows系统中的位置如下

2022-05-05 14:10:00 4928 4

原创 Electron-vue 关于图标的修改

electron-vue 图标提示：图标包括：启动项目时桌面主题图标，窗口左上角图标，菜单栏图标，系统托盘图标，打包安装图标、开始菜单图标、快捷方式图标等。文章目录electron-vue 图标1. 启动项目默认图标与窗口左上角图标2. 菜单栏图标3. 系统托盘图标4. 打包安装包图标5. 开始菜单图标和快捷方式图标总结1. 启动项目默认图标与窗口左上角图标这两个图标均由 mainWindow 的 icon 属性决定：代码如下（示例）：mainWindow = new BrowserWi

2022-04-28 10:45:31 7497

原创 Electron-vue获取本机相关

Electron-vue 获取本地ip地址、MAC地址、版本号文章目录Electron-vue 获取本地ip地址、MAC地址、版本号一、本地信息包含二、具体使用1. IP地址2. MAC地址3. 版本 version4. 效果如下总结一、本地信息包含IP地址、MAC地址、版本信息二、具体使用1. IP地址代码如下（示例）：安装ip模块npm install ip在主进程或渲染进程（页面中）使用// 引入模块const ip = require("ip")// 调用consol

2022-04-08 15:41:19 4993 24

原创 Electron Notification动态消息通知

Notification通知使用 Notification通知的使用方法有多种，在此介绍三种使用方式文章目录Notification通知使用一、Notification是什么？二、使用步骤1.引入Notification模块2. 第一种使用方式3. 第二种使用方式4. 第三种使用方式5. 实现效果一、Notification是什么？对于渲染进程，Electron 方便地允许开发者使用 HTML5 通知 API 发送通知，然后使用当前运行中的系统的原生通知 API 来进行显示。二、使用步骤1.

2022-03-07 16:09:41 4761 2

原创 Electron 自定义顶部菜单和上下文菜单

自定义顶部菜单文章目录自定义顶部菜单1. 主进程2. 渲染进程定义顶部菜单3. 实现效果4. 渲染进程定义上下文菜单5. 实现效果1. 主进程main.js 代码如下（示例）：// main.jsconst electron = require("electron")const app = electron.appconst BrowserWindow = electron.BrowserWindow// 声明要打开的窗口let mainWindow = nullapp.on

2022-03-02 10:05:09 1361

原创 Electron系统托盘

系统托盘 Tray文章目录系统托盘 Tray1. 主进程2. 实现效果1. 主进程代码如下（示例）：const{ app, BrowserWindow,Tray, Menu } require'electron'let mainWindowlet appTray = null; // 在外面创建 tray ，防止被自动删除，导致图标消失function createWindow () { /** * Initial window options */ mainWindow

2022-02-22 14:27:05 2116 3

原创 Electron学习第十一章 dialog对话框

dialog对话框的使用文章目录dialog对话框的使用一、打开文件对话框1. html页面2、主进程3. 渲染进程4.实现效果二、告警dialog对话框1. 渲染进程2. 实现效果三、dialog 打开图片1. 渲染进程2. 实现效果一、打开文件对话框1. html页面代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h

2022-02-17 10:05:49 1032 2

原创 Electron学习第十章通过链接打开浏览器

electron通过链接打开默认浏览器文章目录electron通过链接打开默认浏览器一、项目编写1. html页面2. 主进程代码3. 渲染进程代码二、实现效果一、项目编写1. html页面index.html 代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"

2022-02-11 14:39:02 2337

原创 Electron学习第九章嵌入网页

electron嵌入网页文章目录electron嵌入网页一、创建项目1. 创建mian.js2. 创建页面 html二、验证代码1. 运行项目一、创建项目1. 创建mian.js代码如下（示例）：// main.jsconst electron = require("electron")const app = electron.appconst BrowserWindow = electron.BrowserWindowconst globalShortcut = electr

2022-02-10 15:28:32 2713 7

原创 Electron-vue 成功打包全流程

electron-vue打包仅适用于windows系统文章目录electron-vue打包前言一、打包流程1. 安装electron自带打包插件2. 修改package.json文件3. 执行打包命令二、遇到的错误及解决方案1. electron包下载错误2. WinCodeSign下载3. nsis相关下载4. 再次执行打包操作4. 本地安装总结前言一、打包流程1. 安装electron自带打包插件代码如下（示例）：npm install electron-builder2. 修改p

2022-02-09 08:58:00 5116 5

原创 Electron 底部系统消息通知

系统消息通知Notification 模块使用文章目录系统消息通知一、代码实现1.html页面2. 渲染进程3. 主进程4. 实现效果一、代码实现1.html页面index.html 代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

2022-02-08 16:47:26 1838

原创 electron-vue 打包

electron-vue 配置文件详解提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录electron-vue 配置文件详解一、配置文件一、配置文件{ "name": "test-demo", // 项目名称 "version": "0.0.1", // 版本号，打包后setup版本号同此 "author": "mingmei <

2022-02-08 16:45:48 2842 11

原创 Electron学习第八章

系列文章目录创建子窗口，并通过子窗口向父窗口传递信息文章目录系列文章目录一、创建窗口页面二、实现效果1. 打开子窗口2. 子窗口向父窗口传递信息一、创建窗口页面1、主窗口页面 index.html代码如下（示例）：通过连接打开浏览器百度点击打开子窗口 div <script src="../js/demo03.js"></script&

2022-01-27 14:45:57 885

原创 Electron学习第七章读取文件内容

electron 读取文件内容点击获取文件内容，并显示在页面中文章目录electron 读取文件内容一、代码实现1.main.js2. html 页面3. render.js二、实现效果一、代码实现1.main.js主进程 main.js代码如下（示例）：let electron = require("electron")const app = electron.appconst BrowserWindow = electron.BrowserWindowlet mainWin

2022-01-27 11:34:23 2553 2

原创 Electron学习第六章BrowserWindow

BrowserWindow打开新窗口remote模块的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录BrowserWindow打开新窗口一、remote模块1.引入BrowserWindow模块2.初始化remote模块3.在渲染进程中调用二、完整代码实现1.html页面2. 主进程 main.js3. 渲染进程 render.js三、实现效果总结一、remote模块最新的electron版本中，remote的模块已被废弃，但在渲染进程中使用BrowserWin

2022-01-27 11:13:45 2559

原创 Electron学习第五章网络请求

electron 网络请求文章目录electron 网络请求一、electron请求网络服务1. 引入net模块2. 代码实现总结一、electron请求网络服务1. 引入net模块const {net} = require('electron');2. 代码实现const { app, BrowserWindow ,net} = require('electron');const fs = require('fs');const path = require('path');

2022-01-27 10:50:26 5087 11

原创 Electron学习第四章 Dialog弹框

系列文章目录dialog弹框的使用主页出现2s后出现文件夹弹框文章目录系列文章目录一、dialog弹框的引入二、项目编写1.html页面2.读入数据3.读入数据2.读入数据总结一、dialog弹框的引入const {dialog} = require('electron');示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、项目编写1.html页面代码如下（示例）：<!DOCTYPE html><html>

2022-01-27 10:40:42 6626

原创 Electron学习第三章 ipcMain

系列文章目录ipcMain模块的使用文章目录系列文章目录前言一、ipcMain 引入二、使用步骤1.html页面2.main.js代码3. render.js代码4. 实现效果总结前言使用 ipcMain 模块进行主进程与渲染进程间通信一、ipcMain 引入在主进程中引入 ipcMain 模块const {ipcMain} = require('electron');在渲染进程中引入 ipcRenderer 模块let {ipcRenderer} = require("elect

2022-01-27 10:21:32 4146 7

原创 Electron学习第二章

webview标签的使用使用webview标签在页面中打开网站页面文章目录webview标签的使用前言一、编写html页面二、main.js编写三、渲染进程 render.js编写总结前言实现效果一、编写html页面在 html 页面中引入 webview 标签<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Hello World!&l

2022-01-27 10:01:23 441

原创 Electron学习第一章

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档创建第一个electron项目创建electron项目一、读取文件内容二、实现效果1.页面总结创建electron项目第一步：创建项目文件夹1、创建文件夹mkdir electron-app2、进入文件夹cd electron-app3、初始化项目npm init --save4、安装electron依赖npm install electron或yarn add electron5、启动项目采用此种方式

2022-01-27 09:44:55 1417

原创 Electron学习第二章

Electron学习创建Electron项目第一步：创建项目文件夹第二步：进入文件夹目录第三步：启动项目四、错误类型及解决方案创建Electron项目第一步：创建项目文件夹1、Electron官方文档：Electron官方文档2、创建项目文件npx create electron-app my-new-app或 yarn create electron-app my-new-app第二步：进入文件夹目录cd my-new-app第三步：启动项目npm start四、错误类型及解

2022-01-27 09:13:40 140

空空如也

空空如也