背景 以前只能远见,如今终于能操刀小试了。于是用 Electron 写了个百度不限速下载器 BND2,当然还用到了 React、golang。具体技术架构可参见百度不限速下载器 BND2 技术架构简介 概览 面对一个不熟悉的事物,当然是要先看文档喽。 https://electronjs.org/ 在阅读完目录后,还是 ..

小试 Electron

本贴最后更新于 351 天前,其中的信息可能已经东海扬尘

背景

以前只能远见,如今终于能操刀小试了。于是用 Electron 写了个百度不限速下载器 BND2,当然还用到了 Reactgolang。具体技术架构可参见百度不限速下载器 BND2 技术架构简介

概览

面对一个不熟悉的事物,当然是要先看文档喽。 https://electronjs.org/
在阅读完目录后,还是云里雾里的。算了,直接开始动手吧

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
    
# 进入这个仓库
$ cd electron-quick-start
    
# 安装依赖并运行
$ npm install && npm start

So easy,一个简单的 Demo 已经可以运行了

要点

环境变量

我们需要一个变量来标示出当前的环境,以便使用一套代码为调试、菜单、更新等做出开发环境和生产环境的区别,让我们方便调试、提高效率、注重安全。

方法:修改 package.json 的 start 为 cross-env NODE_ENV=development electron --inspect=5858 . 然后在代码中通过调用以下方法进行区分。

const isDev = () => {  
  return process.env.NODE_ENV === 'development'  
}

调试

** 调试 Electron 主进程 **

  1. 打开 chrome, 在地址栏中输入 chrome://inspect/#devices
  2. 点击 Open dedicated DevTools for Node
  3. 修改 package.json 的 start 为 cross-env NODE_ENV=development electron --inspect=5858 .
  4. 添加 localhost:5858 端口
    imagepng

:不知道为什么偶尔打断点不起作用,还是只能依靠写日志来进行调试。

** 调试 Electron 渲染器进程 **

const mainWindow = new BrowserWindow(...)
mainWindow.webContents.openDevTools()

** 调试 Electron 中 webview 页面 **

const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {  
  webview.openDevTools()  
})

菜单

看了下菜单文档,貌似很方便的样子,但我没有深入研究(项目不需要)。

:开发环境不要把默认的 View 菜单删除,否则开启调试工具,刷新的快捷键都无法使用。

通信

我觉得这应该是最最最重要的了

** 主进程和渲染进程通信 **

// 渲染进程发送消息给主进程
ipcRenderer.send('asynchronous-message', data)

// 主进程监听渲染进程发送的消息
ipcMain.on('asynchronous-message', (event, arg) => {
  // 主进程发送消息给渲染进程
  event.sender.send('asynchronous-reply', {   
    data,  
  })
})

// 渲染进程监听主进程发送的消息
ipcRenderer.on('asynchronous-reply', (event, arg) => {
})

** 主进程和 webview 通信 **

  1. 为 webview 添加 nodeintegration 属性,使其能访问系统底层资源
  2. 在 webview 的 html 中引入 ipcRenderer window.ipcRenderer = require('electron').ipcRenderer
  3. 将 webview 看为一个渲染进程,同 ** 主进程和渲染进程通信 **

** 渲染进程和 webview 通信 **

// webview 发送消息给渲染进程
window.ipcRenderer.sendToHost('clearCookie')

// 渲染进程监听 webview 发送的消息
webview.addEventListener('ipc-message', (event) => {  
  // event.channel === 'clearCookie'
  ...
})

// 渲染进程发送消息给 webview
webview.send('start')

// webview 监听渲染进程发送的消息
ipcRenderer.on('start', (ev) => {
  ...
})

更新

没有采用 Electron 推荐的更新机制,自己 YY 了一个。

打包

最后选择了 electron-builder,真的很方便。

  1. 完善 package.json 中的 name,version,description,productName,author,build 等信息。因为这些信息会在打包的时候填充到运行程序中。
  2. 在 scripts 中添加 dist 脚本 "dist": "electron-builder"
  3. 根目录上新建 build 目录,把 logo 图片放到该目录中,重命名为 icon.png
  4. 运行 npm run dist 就可以在对应的系统中打出该系统的安装包、压缩包、免安装包
    免安装包中会根据 icon.png 生成 icon.icns,把 icon.icns 放到 build 目录下,删除 icon.png

试用

BND2是一款图形界面的百度不限速下载器,支持 64 位 Windows 和 Mac,仅提供给黑客派会员使用,下载地址: https://share.weiyun.com/5Z32JP8

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:PipeSoloSymWide 等,欢迎大家加入,贡献开源。

    1887 引用 • 3627 回帖 • 589 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    9 引用 • 113 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac。下载地址请看这里

    95 引用 • 1192 回帖 • 17 关注
20 回帖   
请输入回帖内容...
  • amorist  

    https://github.com/amorist Electron 成员到此一游

    1 回复
  • Vanessa        

    我才初用。请多多指教

    1 回复
  • amorist        

    用起来基本没啥难点 就一个壳 主要还是业务上的问题

    2 回复
  • leifeng        

    厉害了,你开发的哪部分?

  • Vanessa        

    就是包太大了。有什么优化么?

    1 回复
  • amorist        

    这个木有办法,要兼容系统层面 壳本身就很大

  • mainlove  

    可以只有返回刷新和 tab 这三个菜单吗

    1 回复
  • Vanessa        

    可以,需要自己定义,自己写对应的事件

  • mainlove  

    这么麻烦啊 。。。。。。
    我还以为可以配置那个工具栏元素显示呢。。。

    1 回复
  • Vanessa        

    他有一些默认的,你可以配置。

    1 回复
  • mainlove        

    我开始搞了 有问题问你 啊哈哈哈哈哈

    1 回复
  • Vanessa        

    OK

    1 回复
  • mainlove        

    我要代理我的网站 我试了下用 webview 那个标签,新窗口貌似不会打开?

    <webview  
      
      id="foo" style="display:inline-flex; width:100%; height:100%"  
      src="http://172.172.20.17:7070/modules/web/" allowpopups>  
      
    </webview>
    

    首页都没有问题,但是打不开新页面。。。

    有没有自带 tab 页的标签?

    1 回复
  • mainlove  

    发现一个叫 electron-navigation 的东西
    哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊

  • Vanessa        

    新页面要用主进程的 api 吧。electron-navigation 没用过

    1 回复
  • mainlove        

    我发现 electron 对于 png 的渲染有问题。。
    同样的页面在 chrome 没问题 在 electron 里花掉了。 不知道是不是 png 的问题,我还在研究。。。

    1 回复
  • Vanessa        

    这个没注意。webview 里面用了倒是没发现花

    1 回复
  • mainlove        

    我们的网站 有下载 excle 功能,时间比较长, 用了 electron 后,就没有 chrome 那个下载界面了

    4GXP964AI3CGV5FKY6YZVK5png

    怎么样在不改网站的代码情况下实现这个功能

    1 回复
  • Vanessa        

    直接用 shell.openExternal 打开浏览器?

  • vinasis API  

    厉害啊

请输入回帖内容 ...