Electron 基础学习 第一天

Electron 基础学习(1)

背景
  • Electron是由Github开发的开源框架;

  • 允许开发者使用Web技术构建跨平台的桌面应用。

  • 构成:

    Chromium +Node.js+Native Api

    • ChromiumElectron提供强大的UI,并且不必考虑兼容性;
    • Node.jsElectron有了底层的操作能力,比如文件读写等。还可以使用大量的npm包进行开发;
    • Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。
环境构建
  1. 下载并安装Node.js,官网下载链接

  2. 安装electron,这里可能要采取科学上网的方式进行下载

    npm install electron
    
  3. 校验

    // 查看版本
    npx electron -v
    
    // 启动试试
    ./node_modules/.bin/electron
    
创建应用
  • 目录结构(基本内容)

    index.html

    main.js

    package.json

  • main.js:入口

    const {app, BrowserWindow} = require('electron') // 引入electron
    var mainWindow = null // 主窗口
    
    app.on('ready', () => { // 设置应用启动事件
        mainWindow = new BrowserWindow({width: 800, height: 800}) // 设置窗口大小
        mainWindow.loadFile('./index.html') // 设置窗口显示HTML路径
        mainWindow.on('closed', () => { // 设置窗口关闭后事件
            mainWindow = null
        })
    })
    
    
  • index.html:显示任意内容的网页

  • pageage.json:(配置启动方式)

    {
      "name": "code",
      "version": "1.0.0",
      "description": "study Electron",
      "main": "main.js", // 这里需要配置成你的程序入口,不然默认启动index.js
       "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron ." // 这里需要添加这句,使用electron启动该应用,. 是对入口文件的简述
      }
    }
    

    最后使用npm start启动,就可以看到窗口程序了!

使用node.js
  • 配置BrowserWindow,核心代码如下

    // main.js
    // 修改BrowserWindow参数选项
    app.on('ready', () => {
        mainWindow = new BrowserWindow({
            width: 600,
            height: 400,
            webPreferences: {
                nodeIntegration: true, // 是否集成node.js,默认为false。
                contextIsolation: false // 也需要配置,这个暂时不知道什么原因,12.0.0版本的问题
            }
        })
        mainWindow.loadFile('./index.html')
        mainWindow.on('closed', () => {
            mainWindow = null
        })
    })
    
  • 修改index.html,核心代码如下

    <html>
        <body>
        	<button id="btn">点我啊button>
        	<div id="box">div>
       	    <script src="./readFile.js">script>
    	body>
    html>
    
  • 创建test.txt,内容随意填写

  • 创建readFile.js,代码如下

    // 引入node.js的fs模块
    const { readFile } = require('fs')
    
    window.onload = function() {
        let btn = this.document.querySelector('#btn')
        let box = this.document.querySelector('#box')
        
        btn.onclick = () => {
           // 需要注意的是,这里的路径是相对于入口文件(main.js)
           readFile('./test.txt', (err, data) => {
                if (err) {
                    box.innerHTML = err
                } else {
                    box.innerHTML = data
                }
            })
        }
    }
    
  • 最后启动项目,点击按钮,就会看见在test.txt中的内容被填充到窗口上了。

Remote

类似于打开新窗口的功能(不关闭主进程窗口)。

  • 配置BrowserWindow,核心代码如下

    // main.js
    // 修改BrowserWindow参数选项
    app.on('ready', () => {
        mainWindow = new BrowserWindow({
            width: 600,
            height: 400,
            webPreferences: {
                // 这句必须要有,否则无法创建新窗口对象
                enableRemoteModule: true
            }
        })
        mainWindow.loadFile('./index.html')
        mainWindow.on('closed', () => {
            mainWindow = null
        })
    })
    
  • 创建remote.html,核心代码如下

    <html>
        <body>
        	<p>
                这里是使用remote开启的新窗口
            p>
    	body>
    html>
    
  • 创建remote.js,代码如下

    const btn = this.document.querySelector('#btn')
    const BrowserWindow = require('electron').remote.BrowserWindow
    
    window.onload = function() {
        btn.onclick = () => {
            let win = new BrowserWindow({width: 300, height: 200})
            win.loadFile('.remote.html')
            win.on('closed', () => {
                win = null
            })
        }
    }
    
  • 修改index.html,核心代码如下

    <html>
        <body>
        	<button id="btn">点我啊button>
        	<div id="box">div>
            
       	    <script src="./readFile.js">script>
    	body>
    html>
    
  • 在启动主进程后,点击按钮就能打开新的窗口了。

菜单创建与事件绑定
  • 创建menu.js,代码如下

    const { Menu, BrowserWindow } = require('electron')
    
    // 创建菜单对应结构数组
    // 数组每一项对应一个菜单项
    const menuList = [
        {
            // label是菜单项名
            label: '文件',
            // submenu是菜单项子项
            submenu: [
                {
                    label: '新建文件',
                    // 绑定快捷键
                    accelerator: 'ctrl+n',
                    // 设置子项click事件
                    click: () => {
                        let win = new BrowserWindow({
                            width: 300,
                            height: 200
                        })
                        // 这里的menu.html纯测试用,随便创建一个页面就ok
                        win.loadFile('./menu.html')
                        win.on('closed', () => {
                			win = null
            			})
                    }
                },
                {
                    label: '新建窗口'
                }
            ]
        }
    ]
    
  • 修改main.js,核心代码如下

    const menu = require('./static/js/menu.js')
    
    app.on('ready', () => {
          // 引入meun,这里其实可以不写,只要引入该js文件就ok
        menu
        mainWindow = new BrowserWindow({
            width: 600,
            height: 400,
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
                enableRemoteModule: true 
            }
        })
        mainWindow.loadFile('./static/html/index.html')
        mainWindow.on('closed', () => {
            mainWindow = null
        })
    })
    
  • 启动之后就能看到菜单项变化了,并且可以点击

今日总结

今天也是我第一天学习electron,文章之后将会陆续更新。文章可能还有什么不足或者错误的地方,望大家指出,共勉,加油!!!

你可能感兴趣的:(electron,javascript,node.js)