記一些Electron使用方法

記一些Electron使用方法

安裝

package.json 中添加electron 的依賴

"devDependencies": {
    "electron": "12.0.5"
  }

最好不要在前面添加 ^ ，因爲要使用國內鏡像下載electron包，同步不是很及時，會導致安裝報網絡404,想升級時去鏡像網站找對應版本

electron 鏡像

我使用的是這個 electron_mirror=https://mirrors.huaweicloud.com/electron/, 將這行代碼加入到 .npmrc中

擴展 window 對象的方法

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

function createWindow() {
    const appPath = app.getAppPath()
    const _win = new BrowserWindow({
        width: 800,
        height: 600,
        icon: path.join(appPath, 'assert/hqcs-mini.ico'),
        webPreferences: {
            contextIsolation:false, // 先記住這個，一會說這個
            nodeIntegration: true, // 先記住這個，一會說這個
            preload: path.join(app.getAppPath(), 'preload.js')  // 在這個 preload.js中擴展 window 對象
        },
        autoHideMenuBar: true
    })
        _win.loadURL(“www.your_page.com”).catch(function (e) {
            console.log(e)
        });
    return _win
}

preload.js

window.CustomApi = {} // 這樣就可以了

• 第一個重點

12.0.0 版本以後 contextIsolation 一定要設置爲false ，原因看這裏吧 , 否則即使你在 preload.js 中 擴展了 window 對象，也不可以在遠程頁面中訪問

• nodeIntegration 這個參數一定要爲 true ，要不擴展 window對象也沒什麼意思，失去了調用本地接口的能力（不知道這裏說的準確不）