Electron 常見問題

導讀：

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

一、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-一、使用 Electron 官方論壇提供的方法，改變require的寫法。下面的代碼各個框架通用：

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

1-二、禁用Node.js的require模塊化引入（若是你不想使用 Node.js 模塊）：

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

1-三、爲使 web 項目正常瀏覽，在引入 jquery 後進行判斷：

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

二、關於頁面跳轉 的問題

剛開始看到頁面跳轉，你們通常會想到用 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 })) })

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

爲了使窗口無邊框，使得在某些時候讓項目看起來更美觀，因此在建立窗口的時候經過設置 frame 屬性的值爲 false 來建立無邊框窗口。可是無邊框窗口會產生沒法移動的問題，對於這個問題咱們能夠在渲染進程中經過編輯 css 文件來解決。

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

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

 

如今拖動的問題解決了，可是原來全部的點擊事件卻失效了，爲此咱們經過設置部分的這個屬性值爲 no-drag 來解決：

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