Electron笔记(一)

Electron 是由 Github开发的开源框架,它允许开发者使用Web技术构建跨平台的桌面应用; Electron = Chromium + Node.js + Native API;

第一部分开发环境搭建

1.下载并安装nodejs

官网地址：https://nodejs.org/zh-cn/ 直接全部下一步安装

安装完后测试一下:

出版本号证明安装成功

2.安装Electron

①.在合适位置建立一个文件夹

②.打开命令行,跳转到对应目录

初始化npm

npm init

下面的内容直接回车

此时会生成json文件

③. 天朝老问题:墙!采用cnpm 阿里私服代替.

先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

image

④.cnpm安装 Eletron

cnpm install -g electron

⑤.检查安装

npx electron -v

终于完成了!每次搭建环境都如此费劲,怎么赶超欧美???

⑥.顺便安装打包工具

npm install -g electron-packager

第二部分 hello world

1.新建一个工程文件,并在vscode中打开

2.新建index.html,并写入如下内容:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello world!</title>
</head>
<body>
    hello world!
</body>
</html>

3.再建一个main.js写如下内容

var electron = require('electron')

var app = electron.app //引用APP
var BrowserWindow = electron.BrowserWindow //窗口引用

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

app.on('ready', () => {
    mainWindow = new BrowserWindow({ width: 800, height: 600 }) //新建主窗口为宽300高300的electron.BrowserWindow类型窗口
    mainWindow.loadFile('index.html')
    mainWindow.on('closed', () => {
        mainWindow = null  //当窗口关闭时,将主窗口设为null
    })
})

4. 写完后初始化包文件

$ npm init --yes

这里要注意,编辑软件用的是VS, 终端用的是bush

5.执行程序

electron .

6.如何调试?

ctrl+shift +I 打开调试框. 是不是很熟悉??

7. 如何热重载

ctrl+R

第三部分 Electorn的运行流程

1.会在配置文件中找main方法的文件 //主进程

2.执行main.js会load index.html //启动渲染进程

第四部分:功能使用

一. 读取文件

1.开启node(main.js中)

webPreferences:{ nodeIntegration:true}//启用node功能

2.读取文件(index.js中)

fs.readFile('文件名',function(err,data){//处理读取的数据 })

举例如下:(读取四大美女)

工程目录如下:

我们要读取的是这个文件:

首先再main.js中开启node功能

var electron = require('electron')

var app = electron.app

var BrowserWindow = electron.BrowserWindow;

var mainWindow = null;
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 500,
        height: 500,
        webPreferences: { nodeIntegration: true }//启用node功能
    })

    mainWindow.loadFile('index.html')

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

})

其次在index.html中做好布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, idivnitial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <Button id="btn">点一下送你四大美女</Button><br/>
    <div  id="mybaby"></div>
    <script src="render/index.js"></script>

</body>
</html>

最后写一个index.js处理页面表现

var fs = require('fs');
window.onload = function () {
    var btn = this.document.querySelector('#btn')//查询按钮
    var mybaby = this.document.querySelector('#mybaby')//查询div
    btn.onclick = function () {  //按钮单击事件
        fs.readFile('xiaojiejie.txt', function(err, data) {//读取文件`       
            if (!err) {
                mybaby.innerHTML = data  //修改div
            }else{
                console.log(err);
            }
        })
    }
}

附:解决代码提示问题