Electron 常見問題

導讀：

以下記錄了作者在實踐中遇到的問題和最后的解決方法，如果有錯誤或者更新更完美的解決方案，歡迎留言指正、交流。

1、jQuery/RequireJS/Meteor/AngularJS 的問題

jQuery 等新版本的框架，在 Electron 中使用普通的引入的辦法會引發異常，原因是 Electron 默認啟用了 Node.js 的 require 模塊，而這些框架為了支持 commondJS 標准，當 Window 中存在 require 時，會啟用模塊引入的方式。分別有以下幾種解決方案：

1-0、去掉框架中的模塊引入判斷代碼。例如：

//比如 jQuery 中的第一行代碼中
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}
//改成：
!function(a,b){b(a)}

1-1、使用 Electron 官方論壇提供的方法，改變require的寫法。下面的代碼各個框架通用：

//在引入框架之前先輸入下面的代碼
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>

1-2、禁用Node.js的require模塊化引入（如果你不想使用 Node.js 模塊）：

// In the main process.
let win = new BrowserWindow({
webPreferences: {
 nodeIntegration: false
}
});

1-3、為使 web 項目正常瀏覽，在引入 jquery 后進行判斷：

//置於引入 jQuery 之后
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

2、關於頁面跳轉 的問題

剛開始看到頁面跳轉，大家一般會想到用 window.location.href = './index.html'; 這樣的代碼。結果是可以跳轉，但 DOM事件 基本都會失效。到最后還是使用的 electron 提供的 ipc 接口來創建新的窗口。

2-0、在接收到命令后創建下一個窗口（創建窗口需要時間，期間可能出現空白）：

//在main.js中：：
const ipc = require('electron').ipcMain;
//進行監控，如果有new-window 發送過來，則重新創建一個窗口，文件是list.html
ipc.on('new-window',function() {
         mainWindow.loadURL(url.format({
         pathname: path.join(__dirname, '/views/list.html'),
         protocol: 'file:',
         slashes: true
     }))
})

3、關於無邊框窗口 的問題

為了使窗口無邊框，使得在某些時候讓項目看起來更美觀，所以在創建窗口的時候通過設置 frame 屬性的值為 false 來創建無邊框窗口。但是無邊框窗口會產生無法移動的問題，對於這個問題我們可以在渲染進程中通過編輯 css 文件來解決。

設置 -webkit-app-region: drag 把整個文檔都變成了一個可拖拽的對象：

body,html {
    -webkit-app-region: drag;
}

 

現在拖動的問題解決了，但是原來所有的點擊事件卻失效了，為此我們通過設置部分的這個屬性值為 no-drag 來解決：

section {
    -webkit-app-region: no-drag
}