Electron学习笔记(一)

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

第一部分 开发环境搭建

1.下载并安装nodejs

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

安装完后测试一下:

Electron学习笔记(一)_第1张图片

出版本号证明安装成功

2.安装Electron

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

v2-219e570d794d5b4549238505923b3c77_b.jpg

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

初始化npm

        npm init

      

Electron学习笔记(一)_第2张图片

下面的内容直接回车

Electron学习笔记(一)_第3张图片

此时会生成json文件

Electron学习笔记(一)_第4张图片

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

先安装cnpm

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

v2-ab4432ff5371b1600843cc79be4817f0_b.png

④.cnpm安装 Eletron

        cnpm install -g electron 
      

Electron学习笔记(一)_第5张图片

⑤.检查安装

        npx electron -v
      

v2-758957fbeeefa57b243208e9f1ce06dd_b.jpg

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

⑥.顺便安装打包工具

        npm install -g electron-packager
      

Electron学习笔记(一)_第6张图片

第二部分 hello world

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

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

v2-64cb3649f42dc1f7c70f339e1f5621f7_b.jpg
        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
      

Electron学习笔记(一)_第7张图片

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

5.执行程序

        electron .
      

v2-05b639def62c40e6a0b6ac6be578d84c_b.png

Electron学习笔记(一)_第8张图片

6.如何调试?

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

Electron学习笔记(一)_第9张图片

Electron学习笔记(一)_第10张图片

7. 如何热重载

ctrl+R

Electron学习笔记(一)_第11张图片

第三部分 Electorn的运行流程

v2-9359f89c0c44707ab4f1a1beeb331ca5_b.png

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

Electron学习笔记(一)_第12张图片

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

Electron学习笔记(一)_第13张图片

第四部分:功能使用

一. 读取文件

1.开启node(main.js中)

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

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

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

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

工程目录如下:

Electron学习笔记(一)_第14张图片

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

Electron学习笔记(一)_第15张图片

首先再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中做好布局

        
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, idivnitial-scale=1.0">
    <title>Documenttitle>
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);
            }
        })
    }
} 

      

Electron学习笔记(一)_第16张图片




附:解决代码提示问题

Electron学习笔记(一)_第17张图片

Electron学习笔记(一)_第18张图片

你可能感兴趣的:(Electron学习笔记(一))