用 ReactJs 建立Mac版的 keep - JavaShuo

序

由於本身不大喜歡喜歡用手機，因此當在手機上看到有些應用只能在手機上使用時以爲好彆扭，但我自己也不是寫移動App的，只是會寫點 js，都說js啥都能幹，那我就用它幹！javascript

關於 Keep

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

然而我只是一個喜歡運動的程序員，可是我比較懶~
因此身材嘛~就不告訴大家！哈哈~~~css

技術棧

悄悄的留下Github地址
// https://github.com/wodewone/keepForMac
喜歡的朋友請點個start~ 謝謝！html

技術棧 electron + webpack + babel + react + es6 + sass + cssModulesjava

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 官網react

使用 electron 建立的最典型的應用 Atomwebpack

更多應用請點擊查看git

main

運行效果圖

下載體驗

最新測試版本泄露因爲目前功能尚未達到我理想中的可用版本，因此暫時爲測試版，如發現有嚴重問題歡迎來 push issues程序員

關於項目進度以及在開發中遇到的問題我會在個人博客內持續更新，也歡迎你們留言！~es6

項目結構

結構圖

.
├── ./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
iconverticons

Main process

electron 分爲兩個進程去管理一個是主進程由Node提供服務，負責和系統進行操做與GUI親密接觸，一個是渲染進程也就是咱們日常寫的web頁面。可是electron提供了一系列接口可讓你在兩個進程間隨時通訊（詳細內容請渲染進程可用模塊）
這裏我只簡單的介紹下，有興趣的同窗能夠參考下這兩片文章，入門很不錯！

使用 Electron 構建桌面應用

[[譯文] 經過 Electron 開發一個簡單地桌面應用](https://gold.xitu.io/entry/56...
另外官網還有不少優秀的App

而後這裏也收集了不少不錯的示例，都是在Github上開源的，你們能夠下載體驗
最後這個是官方文檔，以及中文文檔

這個是個人主進程代碼
./main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')

let keep

const 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()
})

Render process

渲染進程

./src/main.js 部分代碼

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')
)

鑑賞圖

歡迎你們評鑑

後續

由於當前版本尚未徹底的能夠使用，只是完成了部分功能(雖然完成了核心的功能可是尚有不足，有興趣的能夠關注個人博客，Github將持續爲您導航~)