标签 electron 下的文章

Electron内调用网页出现 $ is not defined 或者 jQuery is not defined

2024-08-15

报错解释：

这两个错误通常表示在Electron应用的渲染进程中尝试使用jQuery库，但是jQuery没有被正确加载或者没有在当前的作用域中定义。$是jQuery的全局变量，如果没有定义，则会出现$ is not defined错误。

解决方法：

确保在渲染进程的HTML文件中正确地引入了jQuery库。可以通过在HTML文件的<head>标签中添加如下代码来引入：




<script src="path/to/jquery.min.js"></script>

确保替换path/to/为jQuery库实际的路径。

如果你是通过Electron的preload脚本引入jQuery，确保你使用的是window.jQuery或window.$来定义全局变量。例如，在preload脚本中：




window.$ = window.jQuery = require('jquery');

如果你使用的是模块化的打包工具（如Webpack），确保jQuery被正确打包并且在渲染进程的入口文件中被引入。
检查你的网络环境，确保没有网络问题导致jQuery文件无法加载。
如果你在渲染进程中使用了模块化的打包工具，比如Webpack，确保jQuery被正确地加入到了外部依赖中，并在渲染进程的入口文件中被引入。
如果你在渲染进程中使用了Vue或React等现代前端框架，确保jQuery与这些框架的兼容性，可能需要使用特定的方法来引入jQuery。

- 阅读更多 -

1.electron之纯原生js/jquery的桌面应用程序（基础篇）

System

2024-08-15

所有,jquery

创建一个简单的Electron应用，使用纯原生的JavaScript或者jQuery来构建用户界面。

首先，确保你已经安装了Node.js和npm。

创建一个新的项目文件夹，并在命令行中运行以下命令来初始化一个新的npm项目：




mkdir electron-quick-start
cd electron-quick-start
npm init -y

安装Electron作为开发依赖项：




npm install electron --save-dev

在项目根目录下创建一个名为main.js的文件，它将作为主进程的入口点：




const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);

在项目根目录下创建一个名为index.html的文件，它将作为你的应用程序的界面：




<!DOCTYPE html>
<html>
  <head>
    <title>Electron App</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
    <!-- 这里可以添加纯JavaScript或jQuery代码 -->
  </body>
</html>

在package.json中添加一个启动脚本：




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

最后，在命令行中运行你的应用：




npm start

这个简单的应用程序将启动一个Electron窗口，加载index.html文件。你可以在index.html文件的<body>标签中添加更多的JavaScript或jQuery代码来增强应用程序的功能。

- 阅读更多 -

用 Addon 增强 Node.js 和 Electron 应用的原生能力

System

2024-08-15

所有,nodejs




const { app, BrowserWindow } = require('electron');
const path = require('path');
 
// 保持一个对于 window 对象的全局引用，不然的话，当 JavaScript 被垃圾收集时，窗口会被自动关闭
let win;
 
// 创建窗口函数
function createWindow() {
  // 创建浏览器窗口
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 加载预设的插件目录
      preload: path.join(__dirname, 'preload.js')
    }
  });
 
  // 加载应用的 index.html 文件
  win.loadFile('index.html');
 
  // 打开开发者工具（可选）
  // win.webContents.openDevTools();
}
 
// 当 Electron 完成初始化并准备创建浏览器窗口时调用这个函数
app.whenReady().then(createWindow);
 
// 所有窗口关闭时退出应用（不适用于 macOS）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
// 应用被激活时调用（仅在 macOS 上）
app.on('activate', () => {
  // 在 macOS 上，点击 Dock 图标并且没有其他窗口打开时通常会重新创建一个窗口
  if (win === null) {
    createWindow();
  }
});

这段代码是一个 Electron 应用程序的主进程入口文件示例。它展示了如何使用 Electron API 来创建一个新的浏览器窗口，并加载一个 index.html 文件。同时，它还处理了窗口的生命周期事件，确保应用在所有窗口关闭时可以正确退出，并在 macOS 上正确处理应用激活事件。这个示例为开发者提供了一个良好的起点，来构建他们自己的 Electron 应用程序。

- 阅读更多 -

银河麒麟v10安装前端环境（Node、vue、Electron+vite）

System

2024-08-15

所有,vue.js

在银河麒麟（Kylin）V10系统上安装Node.js、Vue.js以及Electron和Vite，可以按照以下步骤进行：

打开终端。
更新系统包索引：
```
sudo apt update
```

安装Node.js（推荐使用NodeSource PPA安装最新版本）：




curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

安装Vue.js CLI：
```
sudo npm install -g @vue/cli
```

安装Electron和Vite：




sudo npm install -g electron
sudo npm install -g vite

请注意，在安装软件包时，可能需要等待几分钟，具体取决于网络速度。如果遇到权限问题，请确保终端以sudo权限运行或使用其他方式配置合适的权限。

以上步骤中，我们使用了sudo npm install -g命令来全局安装Node.js、Vue CLI、Electron和Vite。务必确保网络连接稳定，以便顺利下载和安装软件包。

System

2024-08-15

所有,javascript

由于篇幅限制，这里我将提供一个简化的Electron应用程序的核心函数示例，展示如何创建一个简单的桌面应用程序。




// 导入Electron和其他必要的Node.js模块
const { app, BrowserWindow } = require('electron');
const path = require('path');
 
// 保持一个对于窗口对象的全局引用，不然的话，窗口对象可能会被JavaScript垃圾回收
let mainWindow;
 
function createWindow() {
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true // 允许在渲染进程中使用Node.js
    }
  });
 
  // 加载应用的index.html文件
  mainWindow.loadFile('index.html');
 
  // 打开开发者工具
  // mainWindow.webContents.openDevTools();
 
  // 当窗口关闭时触发
  mainWindow.on('closed', () => {
    // 取消引用window对象，通常你会在应用程序的所有窗口都关闭时退出
    mainWindow = null;
  });
}
 
// Electron应用初始化完毕并准备创建浏览器窗口时触发
app.on('ready', createWindow);
 
// 所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  // 在macOS上，除非用户用Cmd + Q确定地退出，否则通常不会退出应用程序
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
app.on('activate', () => {
  // 在macOS上，点击Dock图标并且没有其他窗口打开时，通常会重新创建一个窗口
  if (mainWindow === null) {
    createWindow();
  }
});

这段代码展示了如何使用Electron创建一个简单的桌面应用程序。它包括了创建窗口、加载页面、处理窗口关闭事件等基本步骤。这是开发Electron应用的一个基本模板，可以根据具体需求进行扩展和修改。

- 阅读更多 -

将web项目打包成electron桌面端教程vue3+vite+js

System

2024-08-15

所有,javascript

在这个教程中，我们将使用Vue 3、Vite和JavaScript来创建一个可以打包成Electron桌面应用程序的Web项目。

创建一个Vue 3项目：




npm create vue@latest
# 然后按照提示进行操作，选择Vue 3和使用Vite

安装Electron依赖：




npm install electron --save-dev

在项目根目录下创建一个electron-builder.yml配置文件，用于Electron的构建配置：




# electron-builder.yml
directories:
  output: build
  buildResources: buildResources
files:
  extra:
    - README.md
    - LICENSE
    - .electron-vue/electron.js
    - build/icons/*
asar: true

在package.json中添加Electron的脚本：




{
  "scripts": {
    "electron:build": "vue-tsc --noEmit && vite build",
    "electron:dev": "vue-tsc --noEmit && electron .",
    "electron:pack": "vue-tsc --noEmit && vite build && electron-builder --dir",
    "electron:dist": "vue-tsc --noEmit && vite build && electron-builder"
  }
}

创建Electron的主进程文件.electron-vue/electron.js：




const { app, BrowserWindow } = require('electron')
const path = require('path')
 
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true
    }
  })
 
  win.loadURL('http://localhost:3000')
  // 如果你想要加载打包后的web应用，可以使用：
  // win.loadFile('dist/index.html')
}
 
app.whenReady().then(createWindow)

创建预加载脚本.electron-vue/preload.js（可选，根据需要使用）：




// 你可以在这里做一些Electron的预加载工作，例如：
// const { contextBridge, ipcRenderer } = require('electron')

最后，运行以下命令来启动Electron应用：




npm run electron:dev

这个教程提供了一个基本框架来将Web项目打包成Electron桌面应用程序。根据你的具体需求，你可能需要进一步配置Electron的主进程和预加载脚本。

- 阅读更多 -

Electron-Builder 打包 Vue 项目避坑指南

System

2024-08-15

所有,vue.js




{
  "name": "your-app",
  "version": "1.0.0",
  "description": "Your Vue.js Desktop App",
  "main": "index.js",
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "com.yourapp.id",
    "productName": "YourAppName",
    "directories": {
      "output": "dist"
    },
    "files": [
      "dist/**/*",
      "node_modules/**/*",
      "main.js"
    ],
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": [
        "AppImage",
        "deb"
      ]
    }
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.1.3",
    // ...其他依赖
  },
  "devDependencies": {
    "electron": "^7.1.11",
    "electron-builder": "^20.43.0",
    // ...其他开发依赖
  }
}

这个示例配置文件展示了如何为 Electron 应用使用 electron-builder 打包 Vue.js 项目。其中，pack 脚本使用 --dir 参数仅输出打包目录，而 dist 脚本则进行最终的打包，生成可分发的安装文件。配置中指定了应用程序的标识、输出目录、包含的文件、以及不同平台的打包目标。

- 阅读更多 -

Electron使用electron-log输出主进程和渲染进程日志到指定文件

System

2024-08-14

所有,typescript




// 引入electron-log库
const log = require('electron-log');
 
// 设置日志文件的名称
const logFile = 'main-process.log';
 
// 配置electron-log
log.transports.file.mainLogFile = logFile; // 设置主进程日志文件
log.transports.file.standardLogFile = logFile; // 设置渲染进程日志文件
log.transports.file.level = 'debug'; // 设置日志级别为debug
 
// 在主进程中使用electron-log记录日志
log.info('这是主进程的日志信息');
 
// 在渲染进程中使用electron-log记录日志
log.info('这是渲染进程的日志信息');
 
// 注意：渲染进程的日志会自动记录到与主进程相同的文件中，因为我们设置了standardLogFile属性。

这段代码演示了如何在Electron应用的主进程和渲染进程中使用electron-log库来记录日志。我们设置了日志文件的名称，并且配置了electron-log来将日志写入到该文件中。在主进程和渲染进程中，我们使用log.info()方法记录不同的日志信息，这些信息会被记录到同一个文件中，因为我们设置了它们写入到相同的日志文件。

System

2024-08-14

所有,javascript

报错原因可能是因为在预加载脚本（preload.js）中使用了ES模块的导入导出语法，但Electron的预加载脚本默认使用CommonJS模块系统。

解决方法：

如果你的Electron版本支持在预加载脚本中使用ES模块，你可以通过在package.json中配置Electron来启用对ES模块的支持。例如：




{
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^x.y.z"
  },
  "electron": {
    "renderer": {
      "preload": {
        "js": true
      }
    }
  }
}

将你的预加载脚本（preload.js）改为使用CommonJS的module.exports或exports来导出功能。例如：




// 使用CommonJS导出
module.exports = {
  someFunction: () => {
    // 你的预加载逻辑
  }
};

或者如果你想要继续使用ES模块语法，可以将预加载脚本放在一个单独的文件中，并通过require来导入所需的模块。例如：




// preload.js
const someModule = require('./some-module.js');
 
someModule.someFunction();

确保你的预加载脚本文件（如preload.js）与webPreferences中的preload选项相匹配，并且确保它们在同一目录下或者preload选项指向正确的路径。

- 阅读更多 -

electron打包Vue前端

System

2024-08-14

所有,vue.js

在使用Electron打包Vue前端应用时，你可以遵循以下步骤：

确保你的Vue项目可以在生产模式下构建。
安装Electron和electron-packager:




npm install electron electron-packager --save-dev

在你的项目根目录下创建一个主进程的入口文件，例如main.js，并配置Electron窗口和加载Vue应用的web页面。




const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  // 创建一个新的浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true // 允许在渲染进程中使用Node.js
    }
  });
 
  // 加载构建后的Vue应用
  win.loadFile('dist/index.html');
}
 
app.whenReady().then(createWindow);

在package.json中添加启动Electron的脚本:




"scripts": {
  "start": "electron .",
  "build": "vue-cli-service build",
  "packager": "electron-packager . MyApp --platform=win32 --arch=x64"
}

构建Vue应用并启动Electron:




npm run build
npm start

要打包应用，运行:




npm run packager

这将会在项目目录下生成一个MyApp-win32-x64文件夹，里面包含了可执行文件和其他资源，可以独立运行在对应平台上。

请注意，这只是一个基本的打包流程示例，具体情况可能需要根据项目的具体需求进行调整。

- 阅读更多 -