electron-新手入门体验

官网地址：Electron

electron是用Web 技术构建桌面应用程序的框架，他是多进程模型，最主要的就是主进程和渲染进程

安装

1. 生成pageage.json：npm init y（注意里面的index,js要改成你的主文件比如main.js）
2. 安装electron：npm i electron -D
3. 创建文件：main.js，index.html

运行

        1、下载热更新插件：npm i nodemon -g

        2、main.js写入以下内容：

const { app, BrowserWindow, ipcMain } = require('electron');

// 创建一个窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800,
    })
    // 用百度运行测试一下
    win.loadURL("http://baidu.com/");
}
app.whenReady().then(() => {
    createWindow()
})

        3、配置命令

在pageage.json中添加运行命令，添加后运行npm run start就可以打开一个桌面窗口了

"start": "nodemon --exec electron ."

        4、体验百度内嵌到桌面窗口后，可以把加载的文件改成本地的index文件开始写自己的内容了

// 载入baidu
// win.loadURL("http://baidu.com/");
// 载入本地index文件
win.loadFile('index.html');

// 打开开发者调试工具
win.webContents.openDevTools();

        5、现在打开后控制台有一个警告，是资源安全的警告，这个配置csp就可以去掉了

配置CSP

网页安全政策，类似白名单制度，告诉客户端，哪些外部资源可以加载和执行，在index.html中head内加入以下代码，大概意思是图片、文件等都是本地的

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self';style-src 'self' 'unsafe-inline'">

想要使用node语法？

可以使用preload，preload是electron的预加载机制，可以理解为在electron创建时将nodejs模块加载到渲染进程中

写个小例子，我想要已运行就在本地新建一个文件：

        1、创建preload.js文件并写入内容：

// node的模块
const fs = require('fs');
// writeFile参数：文件地址，内容，回调
fs.writeFile('/Users/zyc/testFile.txt','abcdefg',()=>{
    console.log('done')
});

        2、在main.js中绑定到窗口

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

// 创建一个窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences:{
            // 当前main.js的绝对路径，后面参数为相对路径
            preload:path.resolve(__dirname,'./preload.js'),
            sandbox:false, // 不禁用 Node. js 引擎
        }
    })
}
app.whenReady().then(() => {
    createWindow()
})

体验进程间通信

        1、在main.js中定义方法：

ipcMain.handle('send-event',(msg)=>{
    console.log(msg)
})

        2、preload.js 

const { contextBridge,ipcRenderer} = require('electron');

const handleSend = ()=>{
    ipcRenderer.invoke('send-event','djsaiodjosa')
}
// 注入
contextBridge.exposeInMainWorld("myApi",{
    platform:process.platform,
    handleSend
})

     3、在index.html中写一个按钮

<button id="btn">按钮</button>

      4、创建一个renderer.js，写一个点击监听，并在index.html引入

document.querySelector("#btn").addEventListener('click',()=>{
    console.log('dianji');
    window.myApi.handleSend()
})

    现在在界面点击按钮就有反应了