Electron是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架。下面记录开发过程中几个主要的关键步骤,希望对大家有帮助。
安装Electron
一般大家都是使用如下命令进行安装Elecron:npm install --save-dev electron,有时候是不是觉得electron安装包下载速度很慢,其实我们可以手动下载安装,首先在package.json文件中的devDependencies节点指定electron版本号:
{
"devDependencies": {
"electron": "6.0.1"
}
}
打开CMD,cd到当前目录执行npm install,在进行到下载的时候,按Ctrl+C结束安装。
然后到GitHub上下载Electron安装包,然后解压到你的工程node_modules/electron/dist目录下,并在electron目录下新增一个名称为path.txt的文件,打开文件输入内容:electron.exe。到这里electron就安装完成了
注入SDK
在创建BrowserWindow对象时,指定webPreferences.preload:
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, 'preload.js')
}
})
在preload.js中往window对象注入sdk:
const MySDK = {
hello: ()=>{
console.log('hello electron')
}
}
window.MySDK = MySDK
这样在html页面就可以直接使用MySDK如:MySDK.hello()。
SDK与页面进行交互
有时候我们需要将sdk处理的结果回传给页面,可以使用electron的webFrame对象的executeJavaScript方法:
const {webFrame} = require('electron')
const MySDK = {
hello: ()=>{
console.log('hello electron')
webFrame.executeJavaScript(`invokeFuncCallback('message from sdk.')`)
}
}
window.MySDK = MySDK
其中invokeFuncCallback为页面中定义的一个方法。
拦截HTTP请求
有时候为了提高页面加载速度,我们会将比较大的文件预先下载到本地,然后在请求的时候先判断本地文件是否存在,存在从本地加载,不存在时再从网络下载,并进行缓存,可以使用protocol.interceptHttpProtocol实现我们的需求:
const {protocol} = require('electron')
protocol.interceptHttpProtocol('http', (request, callback) => {
if(AssetsHelper.isCacheResource(request.url)){
if (!AssetsHelper.hasCacheResource(request.url)) {
AssetsHelper.cacheResource(request.url, function () {
let localURL = AssetsHelper.getCacheResourcePath(request.url)
callback({url: toLocalURL(localURL)})
})
} else {
let localURL = AssetsHelper.getCacheResourcePath(request.url)
callback({url: toLocalURL(localURL)})
}
}else {
callback({
url: request.url
})
}
}, (error) => {
if (error) console.error('无法注册协议')
})