본문으로 건너뛰기
黯羽轻扬매일 조금씩

Electron 입문 가이드

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

0.2 부터 Electron 시작하기

일.인식

포지셔닝

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 패밀리에 대해, 두 가지 프로젝트 템플릿을 권장합니다:

  • 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 로 전환했습니다

두 템플릿 모두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 에는 두 가지 프로세스가 있습니다. Main 과 Renderer 입니다. 전자는 모든 것을 관리하고 플랫폼과 상호작용합니다. 후자는 브라우저 환경을 제공하고 페이지를 렌더링합니다

프로세스 간 통신 지원 정도는 비교적 좋으며, 동기화와 비동기 두 가지 방식이 있습니다. 이벤트 메시지를 통해 통신합니다

비동기 통신（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 에서는 확실히 시작 항목이 하나 추가되었지만, 체크되지 않았습니다. 애플리케이션 경로를 지정해야 할 수도 있습니다. 더 자세히 이해해야 합니다

마지막에 쓰는 말

실제로, 시스템 레벨 API 에 대한 의존은 상상보다 훨씬 적습니다. 학습 비용의 대부분은 프론트엔드 생태계 (React 패밀리) 에서 옵니다. 완전히 마음에 드는 컴포넌트 라이브러리는 존재하지 않습니다

아직 제대로 된 형태가 아닙니다. 다음 주에 계속합니다

댓글

아직 댓글이 없습니다

댓글 작성