记录一次使用 electron 套壳桌面端（一）

最近由于各种事情，好久都不曾写笔记，也逐渐淡忘了学习的心志，似乎在摆烂的路上渐行渐远，哎！就让我再摆一会吧~(*￣︶￣)。

好了，废话不多说，开始正文！

桌面端，属于c端的开发，现在有 electron 前端也可以搞，开发大致可以分为两种：一是直接 vue + electron 开发(当然也可以是其他前端框架)，还一种是直接利用类似 h5 中的 webview 方式，直接放入内嵌的网址。笔者这里由于已有网页端，对桌面端要求不是很高，于是采用第二种嵌入网页方案。

一、项目搭建

这里笔者使用官方提供的一个快速开始的项目模板

electron-quick-start地址
省去了搭建流程，项目拉下来，安装依赖，运行即可（安装过程中可能遇到很多问题，主要是electron的问题，网上也有很多解决方案，笔者试了很多，还是这个靠谱
// 设置下载地址
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/ ）

二、设置内嵌地址

首先是理解 BrowserWindow 和 BrowserView

BrowserWindow：
创建并控制浏览器窗口，electron 本身也是包一个浏览器的方式，实例化时可以传入一些参数，如：窗口大小、背景色、可见性等

BrowserView：
BrowserView 被用来让 BrowserWindow 嵌入更多的 web 内容。 它就像一个子窗口，除了它的位置是相对于父窗口。 这意味着可以替代webview标签.。也就是说，这个类是用来放置 内嵌网页的。当然 BrowserWindow 也是可以的

个人理解：
BrowserWindow 就是创建一个浏览器窗口，BrowserView 则是可以放置更多的web内容，好比一个项目中要放置一些第三方网页，网页端的做法则是 webview、iframe，electron中则是提供了 BrowserView 来放置其 url

三、放置内嵌地址

/**
 * 创建 window 窗口
 * **/ 
function createWindow() {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: initWindowSize.width,  // 笔者是将 宽高 列为配置
        height: initWindowSize.height,
        show: false,
        title: 'XXXX',
        icon: 'XXXX',
    })
    // and load the index.html of the app.
    mainWindow.loadFile('index.html')
    // 是否显示顶部菜单
    mainWindow.setMenu(null)
    return mainWindow
}
/**
 * 创建 pc 窗口
 * **/ 
function loadPC(BrowserWindow) {
    
    const view = new BrowserView({
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'), // 这个 js 后面讲
            devTools: true, // 调试面板
        },
    })
    BrowserWindow.setBrowserView(view)
    // 设置 网页初始大小
    view.setBounds({ x: 0, y: 0, width: initWindowSize.width, height: initWindowSize.height })
    // 宽高 自动变换
    view.setAutoResize({
        width: true,
        height: true
    })
    // 内嵌地址，可填本地地址
    view.webContents.loadURL('xxxxx')
    // 网页加载完毕 再显示窗口
    BrowserWindow.once('ready-to-show', function () {
        BrowserWindow.show()
        // 打开调试面板
        // view.webContents.openDevTools()
    })
    return view
}
app.whenReady().then(() => {
    let win = createWindow()
    // 加载 内嵌 网址
    loadPC(win)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

四、最后

初步尝试，只是简单使用一些类，实现桌面端内嵌网址，但还有一些问题亟待解决，例如如何通信问题等，后续再更新！