页面 动态显示cmd执行结果_Electron注入SDK、SDK与页面进行交互、请求拦截

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('无法注册协议')

})