メインコンテンツへ移動
黯羽軽揚毎日少しずつ

Electron 入門ガイド

無料2017-09-17#Tool#electron系统托盘#electron状态栏icon#electron桌面通知#electron ETIMEDOUT#electron mac

Electron を 0.2 から始める

一.概要

位置付け

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.

実装

Electron = Node + Chromium + V8

これらは Electron の依存関係に過ぎません。クロスプラットフォームで最も重要なのはアダプテーションレイヤーであり、node から呼び出される C++ モジュールによってプラットフォーム適応が完了し、システムレベルのプラットフォームインターフェースを提供します

適用シナリオ

デスクトップ環境では差異を完全に埋めるのは難しいかもしれません。Electron の大多数の API はプラットフォーム別です。例えば quick start の：

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X 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()
  }
})

Electron で完璧なクロスプラットフォームの一貫した体験を実現したい場合、かなりの労力が必要です。場合によっては一致させることが不可能な側面もあります（自分で C++ モジュールを作成して適応させる必要があるかもしれません）。API 体験から見ると、ionic のモバイルクロスプラットフォームよりも手間がかかります。プラットフォームの差異が多すぎます

しかし、「JS で Mac/Win ツールを書いて、もしかしたらクロスプラットフォームできるかもしれない」というだけであれば、つまりプラットフォームの差異を考慮しない場合、Electron はまあまあ良いです

二.開発環境

quick start

公式が quick-start を提供しており、基本的な試用環境と言えます：

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

npm install で ETIMEDOUT に遭遇する可能性があります。electron パッケージは非常に大きいため（120M）：

node install.js

.../node_modules/electron/install.js:48
  throw err
  ^

Error: connect ETIMEDOUT 52.216.66.16:443
    at Object.exports._errnoException (util.js:1034:11)
    at exports._exceptionWithHostPort (util.js:1057:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1096:14)

taobao ミラーを使用してダウンロードすることをお勧めします：

# 删除还没下载完成的
rm -rf node_modules/electron
# 指定 taobao 镜像
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron

すべて正常であれば、hello world ウィンドウが表示されます。API ドキュメント を見て、システムトレイ、デスクトップ通知などのシステムネイティブ API をいくつか体験して、試用終了です

本格的に始めるつもりであれば、quick start から始めることは強くお勧めしません。多くのものが不足しています：

  • モジュール化方案

  • ビルド方案（開発 - パッケージ - リリース）

  • コンポーネントライブラリ（UI ライブラリ）

  • ルート管理

  • 永続化方案

react、webpack、antd、react-router、xxx-storage など、多くのものが必要になるかもしれません。手動で行う場合、webpack ビルド方案だけで半日かかります。そのため、より強力なテンプレートプロジェクトが必要です

boilerplate

react ファミリーについては、2 つのプロジェクトテンプレートをお勧めします：

  • electron-react-boilerplate：yarn で依存関係を管理、webpack で構築

     React
 Redux
 React Router
 Webpack
 React Transform HMR

  • electron-react-redux-boilerplate：npm で依存関係を管理、npm scripts で構築

     React Router
 Redux Thunk
 Redux Actions
 Redux Local Storage
 Electron Packager
 Electron DevTools Installer
 Electron Mocha
 Browsersync

webpack 設定は構築の拡張性がより良いですが、実際に使用してみると electron-react-boilerplate の構築設定は非常に複雑で、ローカルで実行できませんでした。解決を試みた後、electron-react-redux-boilerplate に切り替えました

2 つのテンプレートはどちらもUI コンポーネントライブラリを提供していません。antd を導入した後、npm scripts 構築スクリプトでは CSS の自動導入の問題を解決するのが難しいことがわかりました（webpack は loader を追加して解決できます）。一時的に cp で凌いで、後で webpack に切り替えることを検討します：

"private:style": "cp -f node_modules/antd/dist/antd.css build/antd.css; cp -rf app/css build/css"

P.S. 依存関係のインストール時にも、electron のダウンロードタイムアウト問題に遭遇します。同様に、環境変数を taobao ミラーに指向させます：

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ yarn

三.よくある問題

1.ウィンドウをシステムトレイアイコンの真下に密着させる

既存のモジュールがあり、非常に使いやすいです：

まずシステムトレイアイコンの位置を取得し、次にウィンドウサイズに基づいて中央揃えを計算します

2.システムトレイアイコンのサイズ

For OS X, create icons:

icon.png (for best results aim 16x16px)

icon @2x.png (32x32px)

For Windows, create single icon:

icon.ico

ICO format will work better than classic PNG. If you want PNG, make it 32x32px.

摘自：Proper tray icon

Mac 上部メニューバーの高さは 22px です。22px または 16px の png 形式アイコンを使用できます

P.S.gif 形式の画像はアイコンとして使用できません

3.Mac システム通知の中国語文字化け

HTML で meta を通じて charset を設定する必要があります：

<meta charset="utf-8">

そうしないと、HTML で導入された外部 JS リソース内のリテラル中国語文字列が文字化けします

4.永続化ストレージ

electron-store の使用をお勧めします

JSON ファイルで保存し、アプリケーションインストールディレクトリに配置します。API はあまり科学的ではありません：

// set() 只能存基本值
store.set('unicorn', 'ma');
console.log(store.get('unicorn'));
//=> 'ma'

// 存对象路径不方便
store.set('foo.bar', true);
console.log(store.get('foo'));
//=> {bar: true}

// store 只能整个替换所有数据
store.store = data

使用にはあまり影響しません��読み書きは同期です。シンプルなユーザー設定の保存に適しています。大量データの場合、パフォーマンス問題が存在する可能性があります

P.S. より多くの Electron データストレージ方式については [How to store user data in Electron](https://medium.com/ @ccnokes/how-to-store-user-data-in-electron-3ba6bf66bc1e) を参照してください

5.IPC

Electron には 2 つのプロセスがあります。Main と Renderer です。前者はすべてを管理し、プラットフォームと対話します。後者はブラウザ環境を提供し、ページをレンダリングします

プロセス間通信のサポート度は比較的良好で、同期と非同期の 2 つの方式があります。イベントメッセージを通じて通信します

非同期通信（event.sender.send()）：

// In main process.
const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg)  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong')
})

// In renderer process (web page).
const {ipcRenderer} = require('electron')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

同期通信（event.returnValue）：

// In main process.
const {ipcMain} = require('electron')
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg)  // prints "ping"
  event.returnValue = 'pong'
})

// In renderer process (web page).
const {ipcRenderer} = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

P.S. renderer から送信されたパラメータが undefined の場合、直接システムインターフェースに渡すと、エラーに遭遇する可能性があります：

ERROR:v8_value_converter.cc(374)] Unexpected v8 value type encountered.

システムインターフェースに渡すパラメータは、厳密に検証して、このような問題を回避する必要があります

6.起動時自動起動

既存のモジュールがあります：node-auto-launch

npm install --save auto-launch

P.S. Mac では確かに起動項目が 1 つ追加されましたが、チェックされていません。アプリケーションパスを指定する必要があるかもしれません。詳しく理解する必要があります

最後に書く

実際、システムレベル API への依存は想像よりもはるかに少ないです。学習コストのほとんどはフロントエンドエコシステム（React ファミリー）から来ています。完全に気に入ったコンポーネントライブラリは存在しません

ものはまだ形になっていません。来週続けます

コメント

コメントはまだありません

コメントを書く