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的使用方法有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！