UDN-企业互联网技术人气社区

板块导航

浏览  : 671
回复  : 2

[原生js] Electron Angular 开发小记

[复制链接]
白青青的头像 楼主
发表于 2017-1-3 15:43:56 | 显示全部楼层 |阅读模式
  一介绍

  electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等。

  渲染进程就是普通网页。主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信

  quick-start中main.js为主进程入口文件

  index.html为渲染进程入口文件

  另外很重要的一点使用electron没有跨域限制!!!

  二 打包

  1.快速运行quick-start(开发时启动)
  1. git clone https://github.com/electron/electron-quick-start
  2. cd electron-quick-start
  3. npm install && npm start
复制代码

  2.打包为用户可用文件(mac为.app win.exe)使用 electron-packager
  1. npm install electron-packager --save-dev
  2. npm install electron-packager -g
复制代码

  打包命令(在项目跟目录中)
  1. electron-packager ./ --platform=darwin --asar --arch=x64 --overwrite --icon=imgs/logo.icns --version=1.2.4
  2. --platform=darwin(打包mac系统)
  3. --asar(将代码压缩为二进制文件防止代码泄漏)
  4. --overwrite(替换原来存在的包)
  5. --icon=imgs/logo.icns(包的图标地址)
  6. --ignore node_modules(忽略文件,不打到包内)
  7. --version=1.2.4(打包electron为1.2.4版本的包)
复制代码

  三.模块介绍

  1.渲染进程与主进程通信

  渲染进程引入ipcRenderer模块 主进程引入ipcMain模块,渲染进程通过自定义事件调用主进程的方法如下
  1. //渲染进程
  2. //其中create-folder是事件名,1111是传给主进程的数据
  3. var  ipcRenderer  = require('electron').ipcRenderer;
  4. ipcRenderer.send('create-folder', '1111');

  5. //渲染进程发送完事件后需要监听住进程回的事件
  6. ipcRenderer.on('create-folder-result', function(event, data) {
  7.   console.log(data)//222
  8. }

  9. //主进程
  10. const { ipcMain} = require('electron');//es6结构赋值写法
  11. //主进程监听事件
  12. ipcMain.on('create-folder', function(event, data) {
  13.         ...//主进程干的活
  14. console.log(data)//1111
  15.   event.sender.send('create-folder-result','222');//主进程干完活后告诉渲染进程
  16. });
复制代码

  2.菜单

  首先制定菜单模版
  1. let template = [{
  2.         label: '编辑',
  3.         submenu: [{
  4.             label: '撤销',
  5.             accelerator: 'CmdOrCtrl+Z',
  6.             role: 'undo'
  7.         }, {
  8.             label: '剪切',
  9.             accelerator: 'CmdOrCtrl+X',
  10.             role: 'cut'
  11.         }, {
  12.             label: '复制',
  13.             accelerator: 'CmdOrCtrl+C',
  14.             role: 'copy'
  15.         }, {
  16.             label: '粘贴',
  17.             accelerator: 'CmdOrCtrl+V',
  18.             role: 'paste'
  19.         }]
  20.     }, {
  21.         label: '显示',
  22.         submenu: [{
  23.             label: '进入全屏幕',
  24.             accelerator: (function() {
  25.                 if (process.platform === 'darwin') {
  26.                     return 'Ctrl+Command+F'
  27.                 } else {
  28.                     return 'F11'
  29.                 }
  30.             })(),
  31.             click: function(item, focusedWindow) {
  32.                 if (focusedWindow) {
  33.                     focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
  34.                 }
  35.             }
  36.         }, {
  37.             label: '开发者工具',
  38.             accelerator: (function() {
  39.                 if (process.platform === 'darwin') {
  40.                     return 'Alt+Command+I'
  41.                 } else {
  42.                     return 'Ctrl+Shift+I'
  43.                 }
  44.             })(),
  45.             click: function(item, focusedWindow) {
  46.                 if (focusedWindow) {
  47.                     focusedWindow.toggleDevTools()
  48.                 }
  49.             }
  50.         }, {
  51.             type: 'separator'
  52.         }]
  53.     }, {
  54.         label: '窗口',
  55.         role: 'window',
  56.         submenu: [{
  57.                 label: '最小化',
  58.                 accelerator: 'CmdOrCtrl+M',
  59.                 role: 'minimize'
  60.             }

  61.         ]
  62.     }

  63. ]

  64. //然后在ready中调用以下两个API

  65. app.on('ready', function() {
  66.     const menu = Menu.buildFromTemplate(template)
  67.     Menu.setApplicationMenu(menu)
  68. })
复制代码

  四.调试

  1.渲染进程调试

  打开谷歌开发者工具,剩下的和谷歌调试一样一样的。

  mainWindow.webContents.openDevTools();

  2.主进程node调试

  用 electron-inspector
  1. .npm install electron-rebuild --save-dev
  2. .npm install electron-inspector --save-dev
复制代码

  3.启动electron  
  1. electron --debug=5858 ./app(app路径)
复制代码

  4.根路径启动electron-inspector(注:第一次使用或更改electron 版本会先编译一下)
  1. node_modules/.bin/electron-inspector(mac)
  2. node_modules\\.bin\\electron-inspector(win)
复制代码

  启动完成后命令行中打印如下
  1. Visit http://127.0.0.1:8080/?port=5858 to start debugging.
复制代码

  5.谷歌浏览器起中访问http://127.0.0.1:8080/?port=5858 就可以愉快的调试了
1.png

相关帖子

发表于 2017-1-3 15:44:33 来自手机 | 显示全部楼层
Very Good!
使用道具 举报

回复

发表于 2017-1-10 18:24:33 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老会员的份上回复一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部