一直以来CG行业都是以python作为主要平台语言，所有的资源都是使用python为主要枢纽，来分配。近些年来，互联网理念的切入，信息中心化的需求越来越大。python+pyside的组合已经显得承重了，B/S架构越来越多的得到应用。
Electron官方的介绍是跨平台的桌面应用，可以使用JavaScript，HTML。白话点就是浏览器加个壳变成本地应用程序，测试下来还是很方便的，里面的坑很多。先从安装说起吧。
https://www.electronjs.org/docs/api/synopsis
1.Node.js
Node.js 是运行在服务端的 JavaScript，在现代的Web应用中起着很大的作用，通过Node.js可以方便的建立前后端分离的Web应用，使得前端开发过程不再像以往那样，严重依赖后端环境。
nodejs的安装很简单，去官网下载安装程序安装就可以。
下载对应的安装包
安装完成后运行：
$ node -v
v4.4.3
安装完成后，有个重要的事情就是换源，换源，换源：
临时使用
npm --registry [https://registry.npm.taobao.org](https://link.jianshu.com/?t=https://registry.npm.taobao.org)
持久使用
npm config set registry [https://registry.npm.taobao.org](https://link.jianshu.com/?t=https://registry.npm.taobao.org)
通过cnpm使用
npm install -g cnpm --registry=[https://registry.npm.taobao.org](https://link.jianshu.com/?t=https://registry.npm.taobao.org)
#### 使用官方镜像
npm config set registry [https://registry.npmjs.org/](https://link.jianshu.com/?t=https://registry.npmjs.org/)
#### 查看npm源地址
npm config get registry
2.Electron安装
npm命令安装electron库
npm install electron--save-dev --save-exact
或
cnpm install electron--save-dev --save-exact
3.创建工程
cmd进入目录顺序执行下面命令
// 全局安装webpack了的话 生成package.json
npm init
// 1.本地开发环境安装electron库
npm i -D electron
// 主进程 渲染进程入口文件 main.js为主进程入口 index.html 为渲染进程入口页面
---main.js---
const {app,BrowserWindow,ipcMain} =require('electron')
const path =require('path')
const exec =require('child_process').exec
let cmdStr ='houdinifx.exe'
let cmdPath ='C:\\Program Files\\Side Effects Software\\Houdini 17.5.173\\bin'
let workerProcess
let mainWindow
function createWindow () {
// Create the browser window.
mainWindow =new BrowserWindow({
width:800,
height:600,
webPreferences: {
preload:path.join(__dirname,'preload.js'),
nodeIntegration:true //这里面必须为true，5.0以后默认为false
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// mainWindow.setAutoHideMenuBar(true);//自动隐藏菜单
// mainWindow.loadURL(mainWindowURL);
mainWindow.show();
}
//关闭浏览器cache
app.commandLine.appendSwitch("--disable-http-cache");
app.on('ready',createWindow)
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
//app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed',function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !=='darwin')app.quit()
})
app.on('activate',function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length ===0)createWindow()
})
ipcMain.on('exec',function (event, arg) {
console.log(arg)
// 执行命令行，如果命令不需要路径，或就是项目根目录，则不需要cwd参数：
workerProcess =exec(cmdStr, {cwd:cmdPath})
// 不受child_process默认的缓冲区大小的使用方法，没参数也要写上{}：workerProcess = exec(cmdStr, {})
// 打印正常的后台可执行程序输出
workerProcess.stdout.on('data',function (data) {
console.log('stdout: ' + data);
});
// 打印错误的后台可执行程序输出
workerProcess.stderr.on('data',function (data) {
console.log('stderr: ' + data);
});
// 退出之后的输出
workerProcess.on('close',function (code) {
console.log('out code：' + code);
})
//调整窗口尺寸
mainWindow.setSize(1024,512);
})
---package.js---
{
"name":"electron-quick-start",
"version":"1.0.0",
"description":"A minimal Electron application",
"main":"main.js",
"scripts": {
"start":"electron .",
"package":"electron-packager . BBS --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"
},
"repository":"https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author":"GitHub",
"license":"CC0-1.0",
"devDependencies": {
"electron":"^8.2.5"
},
"dependencies": {
"electron":"^8.2.5"
}
}
--index.html--
富文本编辑直接就显示了，上截图了，哈哈
应用场景：B/S架构开发起来比较轻便，但是直接启动应用程序有困难，使用electron可以方便的构建一个壳，包裹web，让应用方便的适配本地功能，促成一个集中的入口。现在的各大pc端的视频app，比如爱奇艺，都采用类似的架构，基本上让你感觉不到那些地方是嵌入web。
这个小实例演示了如何用html打开houdini（前提是你装好了），作为CG项目管理入口有一定的意义，此例当中使用mainWindow.loadFile('index.html')打开了当前目录下的index.html，也可以使用mainWindow.loadURL(url)请求一个远程页面。
工程可以打包成exe。package.json中的
"package":"electron-packager . heheda --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"部分就是打包命令，直接打在cmd里面也可以。
里面有几个坑，主进程到渲染进程通信的时候报错，“Uncaught ReferenceError: require is not defined”，nodeIntegration:true需要手动设置为true，官方是说有安全性问题，这里先忽略。
打包的时候，需要下载一个包文件，已经换过源了，还是慢，后来换了个时间打包就快了，我也是醉了。
实在不想用markdown：（，忽略我的格式吧
网友评论