electron编写我们第一个hello world程序和文件引入

最新推荐文章于 2024-05-01 17:55:35 发布

结城明日奈是我老婆

最新推荐文章于 2024-05-01 17:55:35 发布

阅读量447

点赞数

分类专栏： electron 文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/122298255

版权

electron 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

electron编写我们第一个hello world程序

1.新建一个index.html

<!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>Hello World</title>
    </head>
    <body>
        
    </body>
</html>

这就相当于我们的皮肤
在新建一个主进程main.js里面要写打开页面的业务逻辑都要写在这

main.js

var electron = require('electron')///声明一个electron，从require进行引入

var app = electron.app//引入app

var BrowserWindow = electron.BrowserWindow  //窗口引用(控制窗口的一个引用)

var mainWindow = null   //声明要打开的主窗口

//有了app、BrowserWindow、BrowserWindow这三个就可以创建应用了

app.on('ready',()=>{
    mainWindow = new BrowserWindow({width:300,height:300})
    mainWindow.loadFile('index.html')//加载我们的html页面
    //mainWindow设置为null不然会占有内存越来越多
    mainWindow.on('closed',()=>{
        mainWindow = null
    })
})

最后一步:需要我们的package.json文件
终端控制台:

npm init --yes

package.json

{
  "name": "electrondemo01",
  "version": "1.0.0",
  "description": "1.新建一个`index.html`\r ```html\r <!DOCTYPE html>\r <html lang=\"en\">\r     <head>\r         <meta charset=\"UTF-8\">\r         <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r         <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r         <title>Hello World</title>\r     </head>\r     <body>",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

为什么要后生成package.json，如果先生成"main.js"里可能就是index.js

自己写的main.js它就会自动识别

因为全局安装了所以可以

electron .

main.js

以ktv模拟为例:
app:可以看作是主管
BrowserWindow:可以看作是包间,包间有大小(new BrowserWindow({width:300,height:300}))
mainWindow:选择歌曲,离开时关闭音乐(mainWindow = null)

顺序先找主管开房间,选择包间大小,再选择歌,里面的内容就是index.html

从外读取数据

ouxiang.txt

1.户松遥
2.内田真礼
3.高桥李依

main.js(我们要在窗口里添加一句话才可以读取)

mainWindow = new BrowserWindow({
    width:300,
    height:300,
    webPreferences: {nodeIntegration: true}//node下面所有的东西都可以在我们的渲染进程中使用
})

修改index.html:添加一个按钮

index.html

<!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>Hello World</title>
    </head>
    <body>
        <div>Hello World</div>
        <div>
            <button id="Btn">显示偶像</button>
            <div id="myOuXiang">显示区域</div>
        </div>
        <script src="render/index.js"></script><!--引入index.js-->
    </body>
</html>

IPC执行任务和获取信息

在整个项目下创建一个render目录,业务逻辑都写在这里

index.js

//如果不写webPreferences: {nodeIntegration: true}是没办法进行引入的
var fs = require('fs')
window.onload = function(){
    var btn = this.document.querySelector('#btn')
    var myOuXiang = this.document.querySelector('#myOuXiang')
    btn.onclick=function(){
        fs.readFile('ouxiang.txt',(err,data)=>{
            myOuXiang.innerHTML = data
        })
    }
}

调试一下:

electron .

view -> Toggle Developer Tools(进行调试)

如果报错,请尝试:

main.js

mainWindow = new BrowserWindow({
    width:300,
    height:300,
    webPreferences: {nodeIntegration: true,contextIsolation: false}//node下面所有的东西都可以在我们的渲染进程中使用    
})