給vue+Electron的項目加一個加載頁面loadpage

前言：

請確定已搭建好vue+electron的一個項目，詳情參考：用vue-cli+Electron開發桌面應用（搭建vue項目、安裝electron），更多相關資訊，參考作者往期部落格

具體描述

将 loadpage.html 作為加載頁面，該頁面主要是無邊視窗 loading 的頁面布局和樣式，存在項目的public檔案夾下
webContents.loadURL(url[, options]),在視窗中加載url, url必須包含協定字首,比如http://或file://.如果加載想要忽略http緩存，可以使用pragma頭來達到目的.

background.js設定如下:

import { app, protocol, BrowserWindow, ipcMain, Menu} from 'electron'
import {
  createProtocol
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'

let win
let loading
protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true }}])

function createWindow() {
  win = new BrowserWindow({
    width: 1122,
    height: 670,
    show: false, // 一開始是false,loadpage加載完畢的時候為true
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false // 允許跨域
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    setTimeout(() => { // 關閉loadpage的時候，将win, show true
      loading.hide()
      loading.close()
      win.show()
      win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    }, 5000)
    win.webContents.closeDevTools() 
  } else {
    setTimeout(() => {
      loading.hide()
      loading.close()
      win.show()
      createProtocol('app')
      win.loadURL('app://./index.html')
    }, 5000)
    win.webContents.closeDevTools() // 關閉調試模式
  }

  win.on('closed', () => {
    win = null
    app.quit();
  })

  win.on('close', function(_event) {
   app.quit();
  })
}

function showLoading(callback) {
  loading = new BrowserWindow({
    show: false,
    frame: false,
    width: 360,
    height: 360,
    resizable: false
  })
  loading.once('show', callback)
  loading.loadURL(`file://${__static}/loadpage.html`) // 将loadpage作為加載頁面，該頁面存在項目的public檔案夾下
  loading.show()
}

function initApp() {
  showLoading(createWindow)
}

app.on('activate', () => {
  if (win === null) {
    initApp()
  }
})

app.on('ready', async() => {
    initApp()
  })

給vue+Electron的項目加一個加載頁面loadpage

更多資訊參考：項目中的background.js檔案。