javascript中的Electron如何使用

這篇文章主要介紹“javascript中的Electron如何使用”，在日常操作中，相信很多人在javascript中的Electron如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript中的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對象也沒什么意思，失去了調用本地接口的能力（不知道這里說的準確不）

關于兩個進程通信的問題

12.0.0版本以后 要設置 e.returnValue 否則 有可能程序止住

到此，關于“javascript中的Electron如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！