Electron 实现百度快搜

简介

main.js

const { app,BrowserWindow,ipcMain,shell} = require("electron")
const remote = require("@electron/remote/main") //1 
remote.initialize()//2

let mainWindow = null

app.on("ready",()=>{
    mainWindow = new BrowserWindow({
        width:300,
        height:300,
        webPreferences:{
            nodeIntegration:true,//允许渲染进程使用nodejs
            contextIsolation:false//允许渲染进程使用nodejs
        }
    })
    mainWindow.loadFile("index.html")
    mainWindow.on("closed",()=>{
        mainWindow = null
    })
    remote.enable(mainWindow.webContents)//3
})

index.html

主要是添加文本框和按钮。并引用"baidu.js"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度快搜</title>
</head>
<body>
<input type="text" id = "txt">
<input type="button" value="百度快搜" id = "btn1">
<script src="baidu.js"></script>
</body>
</html>

baidu.js

主要是调用BrowserWindow.loadURL()方法，打开远程网站。

const { shell, ipcRender } = require('electron')
const {BrowserWindow} = require("@electron/remote")

const btn1 = document.querySelector("#btn1")
const txt = document.querySelector("#txt")

const baidu_site = "https://www.baidu.com/s?wd="

window.onload = ()=>{
    btn1.onclick = ()=>{
        win = new BrowserWindow({
            width:500,
            height:500,
        })
        win.loadURL(baidu_site + txt.value) //打开远程网址
    }
}

运行后效果

在这里插入图片描述

0 条评论