Electron

[hhstore]

related:

• 思维导图: https://naotu.baidu.com/file/bf3b03d80752c44e8c991372ba865d12
• Nodejs #201 : Nodejs
• TypeScript: Tutorial #268
• Web Frontend: React.js Tutorial #269
• App Development Plan: UI Layout #121 : App UI

[hhstore]

Electron:

• https://www.electronjs.org/
• https://github.com/electron
• 跨平台桌面版 App 开发

About 作者:

• http://cheng.guru
• http://cheng.guru/about/
• https://twitter.com/zcbenz
• https://github.com/zcbenz
• 华人, Cheng Zhao, 现在居住日本名古屋市, 为 MicroSoft - Github工作.
• 关于 Electron 项目的前世今生: http://cheng.guru/blog/2016/11/13/evolution-of-electron.html
• https://www.zhihu.com/question/36292298/answer/102418523

书单:

electron-in-action:

• https://github.com/electron-in-action

可使用资源:

• 自身 API
• nodejs API + 库

原生Node.js模块 (即指，需要编译源码过后才能被使用的模块) 需要在编译后才能和Electron一起使用。
绝大多数的Node.js模块都不是原生的， 在650000个模块中只有400是原生的

• 前端 js 各种库: vue.js /react.js 已经其他
• HTML5/CSS3 + ES6/TypeScript

docs:

• https://www.electronjs.org/docs
• https://www.electronjs.org/docs/tutorial/development-environment#setting-up-macos
  • 开发环境搭建

API:

• https://www.electronjs.org/docs/api
• https://www.electronjs.org/docs/api/structures

awesome 列表:

• https://github.com/sindresorhus/awesome-electron#boilerplates
• https://github.com/sindresorhus/awesome-electron#tools

工具&组件&库:

• https://www.electronjs.org/community
• 资源列表

客户端打包工具:

• https://github.com/electron/electron-packager
• https://github.com/electron-userland/electron-builder
  • 支持自动更新
• https://github.com/electron-userland/electron-forge

[hhstore]

官方搜集开源案例项目:

• https://www.electronjs.org/apps
• https://github.com/sindresorhus/awesome-electron#apps

音乐播放器:

• https://www.electronjs.org/apps?category=music
• https://github.com/trazyn/ieaseMusic
  • 网易云音乐
• https://github.com/SmallRuralDog/electron-vue-music
  • 仿QQ 音乐, electron-vue+vue+vuex+vue-router+element- UI

股票类:

• https://www.electronjs.org/apps?category=finance

• https://github.com/jainsamyak/Stockifier

阅读器:

• https://www.electronjs.org/apps?category=books
• 漫画: https://github.com/ollm/OpenComic

资讯类:

• https://www.electronjs.org/apps?category=news
• RSS 阅读器: https://github.com/hello-efficiency-inc/raven-reader

工具类:

• https://github.com/bl00mber/alarm-cron
• https://github.com/CyanSalt/todu
• https://github.com/willyb321/electron-menubar-timetable

[hhstore]

libs:

• https://www.electronjs.org/community

模板:

• https://github.com/SimulatedGREG/electron-vue
• https://github.com/PanJiaChen/electron-vue-admin
• https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

组件:

• 工具栏: https://github.com/maxogden/menubar
• 浏览器标签类: https://github.com/adamschwartz/chrome-tabs

[hhstore]

性能分析:

• https://www.electronjs.org/docs/tutorial/performance

Debug 调试:

• https://www.electronjs.org/docs/tutorial/application-debugging
• https://www.electronjs.org/docs/development/debugging-instructions-macos

打包分发:

• https://www.electronjs.org/docs/tutorial/application-distribution

签名:

• https://www.electronjs.org/docs/tutorial/code-signing

app 自动更新:

• https://www.electronjs.org/docs/tutorial/updates#applying-updates

[hhstore]

electron-vue

• 搜索: https://github.com/topics/electron-vue

官方文档:

• cn: https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
• 列举使用项目

教程 list:

• https://molunerfinn.com/tags/Electron-vue/
• https://my.oschina.net/u/3667677/blog/3035515

related:

ui:

• https://vuetifyjs.com/zh-Hans/

db:

• https://github.com/typicode/lowdb

项目:

• https://github.com/SmallRuralDog/electron-vue-music
• https://github.com/dockeron/dockeron
• https://github.com/xiandanin/magnetW
• https://github.com/pixeldesu/surfbird
  • twitter 客户端, UI 布局不错.
• https://github.com/Molunerfinn/PicGo
  • 高质量项目
  • https://molunerfinn.com/electron-vue-2/
• https://github.com/CaanDoll/easy-invoices

记账 app:

• https://github.com/hilanmiao/LanMiaoDesktop
• 记账 app + 开发教程

教程:

• https://my.oschina.net/u/3667677/blog/3040223

[hhstore]

electron + vue.js + typescript 教程:

require:

• 安装 nodejs: Nodejs #201 (comment)
• node 版本: v10.x
• 安装 yarn: Nodejs #201 (comment)

npm install -g yarn

• vue-cli: https://cli.vuejs.org/guide/installation.html

# 使用 npm:
npm install -g @vue/cli

# 使用 yarn 安装2个包:
yarn global add @vue/cli
yarn global add @vue/cli-init

vue --version

npm update -g @vue/cli

# OR
yarn global upgrade --latest @vue/cli

创建项目目录:

• 基于脚手架模板创建: https://github.com/SimulatedGREG/electron-vue

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli

# 创建项目目录: 
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project

# 安装依赖包:
yarn 

# or 
npm install

# 启动开发环境: 
yarn run dev 

# or
npm run dev

启动报错解决:

• Webpack ReferenceError: process is not defined SimulatedGREG/electron-vue#871
• 几种解决办法:
  • ⭐ 改掉有问题的 webpack 配置: Webpack ReferenceError: process is not defined SimulatedGREG/electron-vue#871 (comment)
    • 亲测有效
  • 改掉有问题的代码
  • nodejs 版本切换: v12.13.1 改为稳定版: 10.16.0
  • 可以确定与 electron-vue 无关, 是 nodejs API 变更导致的.

-> % node -v
v12.13.1

[hhstore]

其他替代方案:

• 搜集列表: https://github.com/go-graphics/go-gui-projects
• https://stackoverflow.com/questions/36961252/electron-ui-for-golang-program
• https://github.com/sudhakar3697/electron-alternatives
• https://github.com/ImVexed/muon
• https://github.com/asticode/go-astilectron
• https://github.com/Equanox/gotron
• https://github.com/zserge/lorca
• https://github.com/maxence-charriere/go-app
• https://github.com/google/gxui
  • 已停止维护
• https://github.com/ying32/govcl
  • https://www.lazarus-ide.org/
• https://github.com/AllenDang/giu
  • https://github.com/ocornut/imgui
  • https://github.com/inkyblackness/imgui-go
  • 基于 c++ 的 binding
• https://github.com/andlabs/ui
  • 基于 c 的 binding
• https://github.com/mjl-/duit
• https://github.com/lxn/walk
• https://zhuanlan.zhihu.com/p/74526301

精选方案:

golang cross platform gui github

go + PWA:

• https://github.com/maxence-charriere/go-app
• 还是基于 web 浏览器.
• 示例: https://github.com/maxence-charriere/go-app-demo

go + flutter:

• Flutter: Index #202

therecipe/qt:

• https://github.com/therecipe/qt
  • qt binding 方案

fyne:

• https://github.com/fyne-io/fyne
  • 坑非常多.

robotgo:

• https://github.com/go-vgo/robotgo
  • 非 gui 框架, 只是 gui 捕捉屏幕.
• 有坑, mac 下一些 API 有问题.