99热这里只有精品二,久干AV在线

序

因為自己不大喜歡喜歡用手機，所以當(dāng)在手機上看到有些應(yīng)用只能在手機上使用時覺得好別扭，但我本身也不是寫移動App的，只是會寫點 js，都說js啥都能干，那我就用它干！

關(guān)于 Keep

"Keep 是一個熱愛運動的年輕團隊，同時也是一群追求極致體驗的 Geek。我們專注移動體育領(lǐng)域的應(yīng)用開發(fā)，倡導(dǎo)開放共享的精神，不模仿，不跟風(fēng)，只做酷的產(chǎn)品。
在我們生活的這個年代里，健身運動文化正在覺醒，應(yīng)該有更專業(yè)的工具，更純粹的社區(qū)，讓好身材來得更容易些。這就是 Keep 正在做的事情，我們希望通過科技驅(qū)動，讓更多的人熱愛健身，喜歡運動。"
以上內(nèi)容節(jié)選自keep官網(wǎng)

preview-1

然而我只是一個喜歡運動的程序員，但是我比較懶~
所以身材嘛~就不告訴你們！哈哈~~~

技術(shù)棧

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

技術(shù)棧 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.
節(jié)選自electron 官網(wǎng)

使用 electron 創(chuàng)建的最典型的應(yīng)用 Atom

Atom

更多應(yīng)用請點擊查看

main

運行效果圖

preview-10

下載體驗

最新體驗版本泄露由于目前功能還沒有達到我理想中的可用版本，所以暫時為測試版，如發(fā)現(xiàn)有嚴重問題歡迎來 push issues

關(guān)于項目進度以及在開發(fā)中遇到的問題我會在我的博客內(nèi)持續(xù)更新，也歡迎大家留言！~

項目結(jié)構(gòu)

結(jié)構(gòu)圖

.
├── ./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接口數(shù)據(jù)
├── ./main.js                   # electron 初始化文件
├── ./package.json
├── ./preview                   # 項目運行預(yù)覽圖
├── ./src
│   ├── ./src/assets        # 靜態(tài)資源文件
│   ├── ./src/components    # 項目組件文件
│   ├── ./src/js                # 主模塊文件
│   ├── ./src/main.js       # render 進程入口文件
│   └── ./src/sass          # 樣式文件
└── ./webpack.config.js     # webpack 配置文件

提供兩個在線將png轉(zhuǎn)icns的工具地址
easyicon
iconverticons

Main process

electron 分為兩個進程去管理一個是主進程由Node提供服務(wù)，負責(zé)和系統(tǒng)進行操作與GUI親密接觸，一個是渲染進程也就是我們平常寫的web頁面。但是electron提供了一系列接口可以讓你在兩個進程間隨時通信（詳細內(nèi)容請渲染進程可用模塊）
這里我只簡單的介紹下，有興趣的同學(xué)可以參考下這兩片文章，入門很不錯！

使用 Electron 構(gòu)建桌面應(yīng)用

[譯文] 通過 Electron 開發(fā)一個簡單地桌面應(yīng)用
另外官網(wǎng)還有很多優(yōu)秀的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')
)