使用electron開發桌面應用

/*
一、新建項目,cd到項目目錄npm init完成package.json的初始化
二、編輯package.json,修改script配置爲{"start": "electron"}
三、npm i electron安裝electron,安裝不成功能夠用cnpm
四、新建index.js做爲主入口js,與package.json設置保持一致
五、編輯index.js,參考官方demo
六、npm start啓動,默認打開官方界面,具體功能研究文檔
 
使用應用圖標啓動,找到node_modules\_electron@4.0.1@electron\dist
一、在dist\resources新建app文件夾
二、將項目文件除了node_modules之外拷貝到dist\resources\app
三、點擊dist\electron.exe啓動
*/

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

// 保持對window對象的全局引用,若是不這麼作的話,當JavaScript對象被
// 垃圾回收的時候,window對象將會自動的關閉
let win

function createWindow () {
  // 建立瀏覽器窗口。
  win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    
    // 修改窗口和任務欄圖標
    icon: __dirname + '/index.png'
  })

  // 而後加載應用的 index.html。
  // win.loadFile('index.html')
  
  // 或者引入外部連接 
  win.loadURL('https://www.amap.com/')

  // 打開開發者工具
  // win.webContents.openDevTools()

  // 當 window 被關閉,這個事件會被觸發。
  win.on('closed', () => {
    // 取消引用 window 對象,若是你的應用支持多窗口的話,
    // 一般會把多個 window 對象存放在一個數組裏面,
    // 與此同時,你應該刪除相應的元素。
    win = null
  })
}

// Electron 會在初始化後並準備
// 建立瀏覽器窗口時,調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow)

// 當所有窗口關閉時退出。
app.on('window-all-closed', () => {
  // 在 macOS 上,除非用戶用 Cmd + Q 肯定地退出,
  // 不然絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上,當單擊dock圖標而且沒有其餘窗口打開時,
  // 一般在應用程序中從新建立一個窗口。
  if (win === null) {
    createWindow()
  }
})

// 在這個文件中,你能夠續寫應用剩下主進程代碼。
// 也能夠拆分紅幾個文件,而後用 require 導入。
相關文章
相關標籤/搜索