用 ReactJs 創建Mac版的 keep

01-24

序

我很喜歡keep這個應用，也很喜歡使用它；但是自己不大喜歡喜歡用手機，所以當在手機上看到有些應用只能在手機上使用時覺得好彆扭，但我本身也不是寫移動App的，只是會寫點 js，都說js啥都能幹，那我就用它干！

關於 Keep

"Keep 是一個熱愛運動的年輕團隊，同時也是一群追求極致體驗的 Geek。我們專註移動體育領域的應用開發，倡導開放共享的精神，不模仿，不跟風，只做酷的產品。
在我們生活的這個年代裡，健身運動文化正在覺醒，應該有更專業的工具，更純粹的社區，讓好身材來得更容易些。這就是 Keep 正在做的事情，我們希望通過科技驅動，讓更多的人熱愛健身，喜歡運動。"
[以上內容節選自keep官網](Keep | 移動健身教練)

然而我只是一個喜歡運動的程序員，但是我比較懶~

所以身材嘛~就不告訴你們！哈哈~~~

技術棧

悄悄的留下Github地址
wodewone/keepForMac: keep for mac
喜歡的朋友請點個start~ 謝謝！

技術棧採用

electron + webpack + babel + react + es6 + sass + cssModules

Electron

The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium and is used by the Atom editor and many other apps.
[節選自electron 官網](Electron)

使用 electron 創建的最典型的應用 Atom(更多應用請點擊查看)

Main

運行效果圖

下載體驗

[最新體驗版本泄露]由於目前功能還沒有達到我理想中的可用版本，所以暫時為測試版，如發現有嚴重問題歡迎來 push issues
關於項目進度以及在開發中遇到的問題我會在[**我的博客**](使用js創建macOS應用)內持續更新，也歡迎大家留言！~

項目結構

結構圖

.├── ./Doc-api-keep.md # 已知api介面├── ./app # webapck 編譯打包壓縮生成的文件├── ./build # electron-builder生成安裝包配置目錄│ ├── ./build/background.png # (macOS DMG background)│ ├── ./build/icon.icns # (macOS app icon)│ └── ./build/icon.ico # (Windows app icon)├── ./dev-server.js├── ./json # 部分Api介面數據├── ./main.js # electron 初始化文件├── ./package.json├── ./preview # 項目運行預覽圖├── ./src│ ├── ./src/assets # 靜態資源文件│ ├── ./src/components # 項目組件文件│ ├── ./src/js # 主模塊文件│ ├── ./src/main.js # render 進程入口文件│ └── ./src/sass # 樣式文件└── ./webpack.config.js # webpack 配置文件

提供兩個在線將`png`轉`icns`的工具地址
[easyicon](PNG轉ICO,PNG轉ICNS | 圖標格式在線轉換 - EASYICON.NET)
[iconverticons](Convert PNG to ICO and ICNS icons online)

Electron Main process

electron` 分為兩個進程去管理一個是**主進程**由`Node`提供服務，負責和系統進行操作與GUI親密接觸，一個是**渲染進程**也就是我們平常寫的web頁面。但是`electron`提供了一系列介面可以讓你在兩個進程間隨時通信（詳細內容請渲染進程[可用模塊](electron/docs-translations/zh-CN at master · electron/electron · GitHub在渲染進程網頁內可用的模塊)）
這裡我只簡單的介紹下，有興趣的同學可以參考下這兩片文章，入門很不錯！
1. [使用 Electron 構建桌面應用](知乎專欄)
2. [[譯文] 通過 Electron 開發一個簡單地桌面應用]([譯文] 通過 Electron 開發一個簡單地桌面應用)
另外官網還有很多 [優秀的App](Apps)
然後 [這裡](sindresorhus/awesome-electron: Useful resources for creating apps with Electron) 也收集了很多不錯的示例，都是在`Github`上開源的，大家可以下載體驗
最後這個是[官方文檔](Documentation)，以及[中文文檔](electron/docs-translations/zh-CN at master · electron/electron · GitHub)

這個是我的主進程代碼

./main.js

const {app, BrowserWindow} = require("electron")const path = require("path")let keepconst createWindow = () =>{ keep = new BrowserWindow({ "width": 999, "minWidth": 999, "height": 666, "minHeight": 666, //"resizable": false, "title": "Keep", "center": true, "titleBarStyle": "hidden", "zoomToPageWidth": true, "frame": false, "show": false }) keep.loadURL(`file://${__dirname}/app/index.html`) //keep.webContents.openDevTools() keep.webContents.on( "did-finish-load", function () { keep.show(); }) keep.on("close", (e) => { keep = null })};app.on("ready", createWindow)app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit() }})app.on("activate",() => { if (app == null) createWindow() app.show()})

Electron Render process

渲染進程

./src/main.js 部分代碼

react 路由配置

ReactDOM.render( <Router history={hashHistory}> <Route path="/" onEnter={RequireAuth} component={App}> <IndexRoute component={AppTraining}></IndexRoute> <Route path="training" component={AppTraining}></Route> <Route path="plan/:plan_id" component={AppWorkout}> <Route path=":desc_id" component={WorkoutDescription}></Route> </Route> <Route path="explore" component={AppExplore}></Route> <Route path="record" component={AppRecord}></Route> <Route path="user-center" component={AppUserCenter}></Route> </Route> <Route path="/login" component={AppLogin}></Route> </Router>, document.getElementById("app"))