electron调用python_Electron as GUI of Python

最近准备做一个离线升级工具，想起前几天刚接触的Electron 决定用它与python相结合来完成

开始准备环境搭建

几经折腾各种zerorpc，zerormq各种报错

历经一天多的网上折腾终于找到一篇实践成功

先看整个流程搭建:

start

|

V

+------------+

| | start

| +-------------> +-------------------+

| electron | sub process | |

| | | python web server |

| (basically | http | |

| browser) | <-----------> | (business logic) |

| | communication | |

| | | (all html/css/js) |

| | | |

+------------+ +-------------------+

start

|

V

+--------------------+

| | start

| electron +-------------> +------------------+

| | sub process | |

| (browser) | | python server |

| | | |

| (all html/css/js) | | (business logic) |

| | zerorpc | |

| (node.js runtime, | <-----------> | (zeromq server) |

| zeromq client) | communication | |

| | | |

+--------------------+ +------------------+

下来安装步骤（windows）：

Remove-Item "$($env:USERPROFILE)\.node-gyp" -Force -Recurse -ErrorAction Ignore

Remove-Item "$($env:USERPROFILE)\.electron-gyp" -Force -Recurse -ErrorAction Ignore

Remove-Item .\node_modules -Force -Recurse -ErrorAction Ignore

npm install --runtime=electron --target=1.7.6（版本很重要）

这里我直接远程连接的同事的python环境，修改下面文件：

//main.js

let mainWindow = null

const createWindow = () => {

mainWindow = new BrowserWindow({width: 800, height: 600})

mainWindow.loadURL(require('url').format({

pathname: path.join(__dirname, 'index.html'),

protocol: 'file:',

slashes: true

}))

mainWindow.webContents.openDevTools()

mainWindow.on('closed', () => {

mainWindow = null

})

}

app.on('ready', createWindow)

app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})

const zerorpc = require("zerorpc")

let client = new zerorpc.Client()

client.connect("tcp://192.168.200.51:4242")

client.invoke("echo", "server ready", (error, res) => {

if(error || res !== 'server ready') {

console.error(error)

} else {

console.log(res)

}

})

let formula = document.querySelector('#formula')

let result = document.querySelector('#result')

formula.addEventListener('input', () => {

client.invoke("calc", formula.value, (error, res) => {

if(error) {

console.error(error)

} else {

result.textContent = res

}

})

})

formula.dispatchEvent(new Event('input'))