????????一直以來CG行業(yè)都是以python作為主要平臺(tái)語言，所有的資源都是使用python為主要樞紐，來分配鳄乏。近些年來，互聯(lián)網(wǎng)理念的切入棘利，信息中心化的需求越來越大橱野。python+pyside的組合已經(jīng)顯得承重了，B/S架構(gòu)越來越多的得到應(yīng)用善玫。
????????Electron官方的介紹是跨平臺(tái)的桌面應(yīng)用水援，可以使用JavaScript，HTML茅郎。白話點(diǎn)就是瀏覽器加個(gè)殼變成本地應(yīng)用程序蜗元，測(cè)試下來還是很方便的，里面的坑很多系冗。先從安裝說起吧奕扣。
? ??????https://www.electronjs.org/docs/api/synopsis
? ? ? ? 1.Node.js
? ? ? ? 官網(wǎng):http://nodejs.cn/
? ???????Node.js 是運(yùn)行在服務(wù)端的 JavaScript，在現(xiàn)代的Web應(yīng)用中起著很大的作用掌敬，通過Node.js可以方便的建立前后端分離的Web應(yīng)用惯豆，使得前端開發(fā)過程不再像以往那樣，嚴(yán)重依賴后端環(huán)境奔害。
? ? ? ? nodejs的安裝很簡(jiǎn)單楷兽，去官網(wǎng)下載安裝程序安裝就可以。
安裝完成后運(yùn)行：
$ node -v
v4.4.3
安裝完成后华临，有個(gè)重要的事情就是換源芯杀，換源，換源：
臨時(shí)使用
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.創(chuàng)建工程
cmd進(jìn)入目錄順序執(zhí)行下面命令
// 全局安裝webpack了的話 生成package.json
npm init
// 1.本地開發(fā)環(huán)境安裝electron庫
npm i -D electron
//? 主進(jìn)程 渲染進(jìn)程入口文件 main.js為主進(jìn)程入口? index.html 為渲染進(jìn)程入口頁面
---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以后默認(rèn)為false
? ? ? ? }
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
?// mainWindow.setAutoHideMenuBar(true);//自動(dòng)隱藏菜單
?// mainWindow.loadURL(mainWindowURL);
?mainWindow.show();
}
//關(guān)閉瀏覽器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)
// 執(zhí)行命令行瘪匿，如果命令不需要路徑跛梗，或就是項(xiàng)目根目錄，則不需要cwd參數(shù)：
? ? workerProcess =exec(cmdStr, {cwd:cmdPath})
// 不受child_process默認(rèn)的緩沖區(qū)大小的使用方法棋弥，沒參數(shù)也要寫上{}：workerProcess = exec(cmdStr, {})
? ? // 打印正常的后臺(tái)可執(zhí)行程序輸出
? ? workerProcess.stdout.on('data',function (data) {
console.log('stdout: ' + data);
});
// 打印錯(cuò)誤的后臺(tái)可執(zhí)行程序輸出
? ? workerProcess.stderr.on('data',function (data) {
console.log('stderr: ' + data);
});
// 退出之后的輸出
? ? workerProcess.on('close',function (code) {
console.log('out code：' + code);
})
//調(diào)整窗口尺寸
? ? 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--
富文本編輯直接就顯示了核偿，上截圖了，哈哈
應(yīng)用場(chǎng)景：B/S架構(gòu)開發(fā)起來比較輕便顽染，但是直接啟動(dòng)應(yīng)用程序有困難漾岳，使用electron可以方便的構(gòu)建一個(gè)殼，包裹web粉寞，讓應(yīng)用方便的適配本地功能尼荆，促成一個(gè)集中的入口。現(xiàn)在的各大pc端的視頻app唧垦，比如愛奇藝捅儒，都采用類似的架構(gòu)，基本上讓你感覺不到那些地方是嵌入web振亮。
????這個(gè)小實(shí)例演示了如何用html打開houdini（前提是你裝好了）巧还，作為CG項(xiàng)目管理入口有一定的意義，此例當(dāng)中使用mainWindow.loadFile('index.html')打開了當(dāng)前目錄下的index.html坊秸，也可以使用mainWindow.loadURL(url)請(qǐng)求一個(gè)遠(yuǎn)程頁面麸祷。
????工程可以打包成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里面也可以阶牍。
????????里面有幾個(gè)坑，主進(jìn)程到渲染進(jìn)程通信的時(shí)候報(bào)錯(cuò)星瘾，“Uncaught ReferenceError: require is not defined”走孽，nodeIntegration:true需要手動(dòng)設(shè)置為true，官方是說有安全性問題死相，這里先忽略融求。
? ? ? ? 打包的時(shí)候咬像，需要下載一個(gè)包文件算撮，已經(jīng)換過源了，還是慢县昂，后來換了個(gè)時(shí)間打包就快了肮柜，我也是醉了。
? ? ? ? 實(shí)在不想用markdown：（倒彰，忽略我的格式吧
