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

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//引入appvar 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下面所有的东西都可以在我们的渲染进程中使用
})

contextIsolation:contextI(大写i)sol(小写l)ation

最终效果:

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

抖音小程序Tiktok教程之 01 编写您第一个hello world程序(含视频教程)
什么字节跳动小程序字节跳动小程序依托字节系全生态产品,为用户提供更智能.高效的链接内容与服务的方式.开发者能够利用字节跳动小程序丰富的基础能力,快速接入并完成小程序服务搭建. 在正式开发小程序之前, ...
如何运行编好的Android程序,3. 编写的第一个android HelloWorld程序如何在手机上面调试运行...
以前有用自己的手机开发过Android的小程序玩玩,现在又想学习下 opencv + android的开发,按照网上的教程配置了两天的环境了, 发现编写的HelloWorld程序在 avd4.2的设备 ...
0001 手工构建第一个C#应用程序
前提工作:.Net Framework 4.5以上的版本或安装了VS2015 1. 手动编写与运行一个C#控制台程序添加Path环境变量:"我的电脑-属性-高级系统设置-环境变量-系统变量 ...
python如何运行一个python程序_python如何运行？第一个python小程序示范
我们想要用python编程首先要做的就是安装一些工具,随后学会应用.那么问题来了,我们需要安装什么?python又是怎样运行的呢? 安装什么工具? 1.Python 3.6.5(我安装的,还有很多版本 ...
python如何运行？第一个python小程序示范
我们想要用python编程首先要做的就是安装一些工具,随后学会应用.那么问题来了,我们需要安装什么?python又是怎样运行的呢? 安装什么工具? 1.Python 3.6.5(我安装的,还有很多版本 ...
开始使用-编写你的第一个Flutter应用程序
2019独角兽企业重金招聘Python工程师标准>>> 这是创建您的第一个Flutter应用程序的指南. 如果您熟悉面向对象的代码和基本编程概念(如变量,循环和条件),则可以完成本教 ...
iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序
iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序程序是为了实现特定目标或解决特定问题而用计算机语言编写的命令序列的集合.本章将以编写第一个Sprite Kit程序为 ...
Xamarin iOS开发实战第1章使用C#编写第一个iOS应用程序
Xamarin iOS开发实战第1章使用C#编写第一个iOS应用程序 C#原本是用来编写Windows以及Windows Phone的应用程序.自从Xamarin问世后,C#的作用就发生了很大的变化. ...
ROS学习笔记三：编写第一个ROS节点程序
在编写第一个ROS节点程序之前需要创建工作空间(workspace)和功能包(package). 一.创建工作空间(workspace) 创建一个catkin_ws: #注意:如果使用sudo一次性创 ...
Python 入门篇-用Notepad++编写出第一个python程序
首先我们要安装Notepad++ Notepad++获取方式如下: 官网获取小蓝枣的资源仓库获取,提取码:cu89 安装简单,选择简体中文安装就好了,中间会有个配置安装路径,想改的话可以改. 接下来 ...

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

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

从外读取数据

IPC执行任务和获取信息

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

最新文章

热门文章