如何用electron(vue)搜索电脑本地wifi

最新推荐文章于 2024-07-18 17:31:20 发布

小黄编程快乐屋

最新推荐文章于 2024-07-18 17:31:20 发布

阅读量527

点赞数 7

文章标签： electron vue.js 电脑

本文链接：https://blog.csdn.net/beishang_1/article/details/137594900

版权

对于搜索本地 WiFi 网络，可以使用 Electron 结合 Node.js 来编写一个简单的应用程序。
以下是一个基本的示例，它使用 Node.js 的 wifi 模块来搜索并列出附近的 WiFi 网络：

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

然后，创建一个新的目录，并在该目录下创建以下文件：

package.json - 包含 Electron 的依赖。
main.js - Electron 应用的主进程代码。
index.html - Electron 应用的渲染进程代码。
下面是这些文件的基本内容：
package.json:

{
  "name": "wifi-search",
  "version": "1.0.0",
  "description": "Search local WiFi networks using Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "electron": "^13.0.0",
    "wifi": "^4.0.7"
  }
}

main.js:

const { app, BrowserWindow } = require('electron');
const wifi = require('wifi');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

// Function to fetch and send WiFi networks to renderer process
function getWiFiNetworks() {
  return new Promise((resolve, reject) => {
    wifi.scan((error, networks) => {
      if (error) {
        reject(error);
      } else {
        resolve(networks);
      }
    });
  });
}

// Expose getWiFiNetworks function to renderer process
const { ipcMain } = require('electron');
ipcMain.handle('getWiFiNetworks', async (event, args) => {
  try {
    const networks = await getWiFiNetworks();
    return networks;
  } catch (error) {
    throw new Error('Error fetching WiFi networks');
  }
});

index.html

<!DOCTYPE html>
<html>
<head>
  <title>WiFi Networks</title>
</head>
<body>
  <h1>WiFi Networks</h1>
  <ul id="wifiList"></ul>

  <script>
    const { ipcRenderer } = require('electron');

    // Fetch WiFi networks from main process
    async function fetchWiFiNetworks() {
      try {
        const networks = await ipcRenderer.invoke('getWiFiNetworks');
        return networks;
      } catch (error) {
        console.error(error);
      }
    }

    // Display WiFi networks in the UI
    async function displayWiFiNetworks() {
      const wifiList = document.getElementById('wifiList');
      wifiList.innerHTML = '';

      const networks = await fetchWiFiNetworks();
      networks.forEach(network => {
        const listItem = document.createElement('li');
        listItem.textContent = `${network.ssid} (${network.signal_level})`;
        wifiList.appendChild(listItem);
      });
    }

    // Refresh WiFi networks every 5 seconds
    setInterval(displayWiFiNetworks, 5000);

    // Initial display of WiFi networks
    displayWiFiNetworks();
  </script>
</body>
</html>

在完成这些文件的编写后，打开终端，进入项目目录，然后运行以下命令来安装依赖：

npm install

安装完成后，运行以下命令启动 Electron 应用：
npm start

作者介绍

一个热爱编程，无背景最底层的程序员。没人领路遇到过很多坑，希望能分享一下经验，让后续的小伙伴们少走弯路！希望大家可以多多支持关注！您的肯定是我最大的动力。
在这里插入图片描述

小黄编程快乐屋

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
如何用electron(vue)搜索电脑本地wifi

一个热爱编程，无背景最底层的程序员。没人领路遇到过很多坑，希望能分享一下经验，让后续的小伙伴们少走弯路！希望大家可以多多支持关注！您的肯定是我最大的动力。对于搜索本地 WiFi 网络，可以使用 Electron 结合 Node.js 来编写一个简单的应用程序。index.html - Electron 应用的渲染进程代码。首先，确保你已经安装了 Node.js 和 Electron。package.json - 包含 Electron 的依赖。main.js - Electron 应用的主进程代码。
复制链接

扫一扫