Electron构建一个混合本地应用

        一直以来CG行业都是以python作为主要平台语言,所有的资源都是使用python为主要枢纽,来分配。近些年来,互联网理念的切入,信息中心化的需求越来越大。python+pyside的组合已经显得承重了,B/S架构越来越多的得到应用。


        Electron官方的介绍是跨平台的桌面应用,可以使用JavaScript,HTML。白话点就是浏览器加个壳变成本地应用程序,测试下来还是很方便的,里面的坑很多。先从安装说起吧。

        https://www.electronjs.org/docs/api/synopsis

        1.Node.js

        官网:http://nodejs.cn/

         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:(,忽略我的格式吧

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345