用 ReactJs 建立Mac版的 keep

序

由于本身不大喜欢喜欢用手机，因此当在手机上看到有些应用只能在手机上使用时以为好别扭，但我自己也不是写移动App的，只是会写点 js，都说js啥都能干，那我就用它干！

关于 Keep

"Keep 是一个热爱运动的年轻团队，同时也是一群追求极致体验的 Geek。咱们专一移动体育领域的应用开发，倡导开放共享的精神，不模仿，不跟风，只作酷的产品。
在咱们生活的这个年代里，健身运动文化正在觉醒，应该有更专业的工具，更纯粹的社区，让好身材来得更容易些。这就是 Keep 正在作的事情，咱们但愿经过科技驱动，让更多的人热爱健身，喜欢运动。"
以上内容节选自keep官网

然而我只是一个喜欢运动的程序员，可是我比较懒~
因此身材嘛~就不告诉大家！ 哈哈~~~

技术栈

悄悄的留下Github地址
// https://github.com/wodewone/keepForMac
喜欢的朋友请点个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 建立的最典型的应用 Atom

更多应用请点击查看

main

运行效果图

下载体验

最新测试版本泄露因为目前功能尚未达到我理想中的可用版本，因此暂时为测试版，如发现有严重问题欢迎来 push issues

关于项目进度以及在开发中遇到的问题我会在个人博客内持续更新，也欢迎你们留言！~

项目结构

结构图

.
├── ./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提供了一系列接口可让你在两个进程间随时通讯（详细内容请渲染进程可用模块）
这里我只简单的介绍下，有兴趣的同窗能够参考下这两片文章，入门很不错！

1. 使用 Electron 构建桌面应用

2. [[译文] 经过 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将持续为您导航~)