Electron跨平台开发笔记

Electron跨平台桌面APP开发

Electron开发文档

Electron-API-github文档 (opens new window) Electron-API-官方文档 (opens new window)

下载Electron开发模板

Electron模板

# 下载Electron模板
git clone https://github.com/electron/electron-quick-start

# 进入项目
cd electron-quick-start

# 安装依赖
npm install

# 启动运行
npm start

Electron模板目录结构

# Electron模板目录结构
.
├── LICENSE.md
├── README.md
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── preload.js
├── renderer.js
└── styles.css

0 directories, 9 files

Electron入口程序

入口程序: main.js

// 示例演示：

// 用于控制应用程序寿命和创建本机浏览器窗口的模块
const {app, BrowserWindow, screen} = require('electron')
const path = require('path')


// 创建浏览器窗口
function createWindow() {

    // 获取窗口大小
    let size = screen.getPrimaryDisplay().workAreaSize;
    let posX = size.width - 1200;
    // console.log(posX)
    
    // 设置游览器默认参数
    const mainWindow = new BrowserWindow({
        width: 1200,
        height: 800,
        x: posX,
        y: 0,
        webPreferences: {
            webSecurity: false,
            webviewTag: true,
            allowRunningInsecureContent: true,
            preload: path.join(__dirname, 'preload.js')
        }
    })

    // 加载 index.html
    mainWindow.loadFile('index.html')
    // 开启开发者模式 DevTools.
    mainWindow.webContents.openDevTools()
}




// 此方法将在Electron完成后调用
// 初始化并准备创建浏览器窗口
// 某些API只能在此事件发生后使用
app.whenReady().then(() => {
    
    createWindow()

    // 监听激活时、触发
    app.on('activate', function () {

        // 已单击停靠图标，并且没有打开其他窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})




// 关闭所有窗口（macOS上除外）时退出。这很常见
// 使应用程序及其菜单栏保持活动状态，直到用户退出
// 使用Cmd+Q快捷键退出。
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})


// 设置游览器参数: 开启跨越
// app.commandLine.appendSwitch('disable-web-security', true)
app.commandLine.appendSwitch('trace-warnings', true)

Electron跨域

开启跨域的两种方法

在入口：main.js设置跨越、看上面示例演示

// 开启跨域的两种方法

// 1. iframe标签跨越使用这个: 设置游览器参数: 开启跨越
app.commandLine.appendSwitch('disable-web-security', true)

// 2. iframe和webview标签都可以使用这个:
app.commandLine.appendSwitch('trace-warnings', true)

跨域操作DOM节点两种方法

跨域操作第三方或者嵌入网页的DOM节点等等 目前主流嵌入第三方资源的方法有两种：iframe标签、webview标签

iframe标签

// 第一种：使用iframe标签嵌入第三方网站资源操作DOM
// iframe缺点：js只能操作自己嵌入网页DOM节点、无法操作第三方网页DOM节点

// 示例: 找到iframe标签通过contentWindow对象操作嵌入的网页DOM

// iframe标签的DOM节点
<iframe id="docs_html" src="./html/git.html" frameborder="0" scrolling="no"></iframe>

// JS操作DOM节点
document.querySelector('#docs_html').contentWindow.document.querySelector('html')

webview标签

// 第二种：使用Electron下的webview标签嵌入第三方网站资源操作DOM

// 使用webview标签替换iframe标签，并开启webviewTag: true
// webview事件无法返回：对象数据

// webview标签的DOM节点
<webview id="docs_html" src="http://baidu.com"></webview>

// 使用webview标签最好是在头部加入这个标签解决一些不必要的报错问题
<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-inline' 'unsafe-eval';worker-src blob:">


// JS操作DOM节点
const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {
    // alert('加载成功了')
   
    // 通过executeJavaScript对象操作第三方DOM节点
    // 注意：executeJavaScript对象无法输出返回获取的DOM对象、

    // 例如：错误做法: 无法返回获取的DOM对象、报错
    webview.executeJavaScript(`
        var printData = document.querySelector('html')
        printData
        
    `).then(function(ret){
        // 获取返回的结果
        console.log(ret);
    });

    // 例如：正确做法: 
    webview.executeJavaScript(`
        var printData = document.querySelector('html').innerText;
        printData
        
    `).then(function(ret){
        // 获取返回的结果
        console.log(ret);
    });

    
})