用 ReactJs 建立Mac版的 keep

2019年8月31日 218次阅读来源: wodewone

序

因为自身不大喜好喜好用手机，所以当在手机上看到有些运用只能在手机上运用时觉得好别扭，但我自身也不是写挪动App的，只是会写点 js，都说js啥都醒目，那我就用它干！

关于 Keep

“Keep 是一个酷爱活动的年青团队，同时也是一群寻求极致体验的 Geek。我们专注挪动体育范畴的运用开辟，提倡开放同享的精力，不模拟，不跟风，只做酷的产物。
在我们生涯的这个年代里，健身活动文明正在醒悟，应该有更专业的东西，更地道的社区，让好身体来得更轻易些。这就是 Keep 正在做的事变，我们愿望经由过程科技驱动，让更多的人酷爱健身，喜好活动。”
以上内容节选自keep官网

《用 ReactJs 建立Mac版的 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

运转效果图

《用 ReactJs 建立Mac版的 keep》

下载体验

最新测试版本泄漏因为现在功用还没有到达我抱负中的可用版本，所以临时为测试版，如发现有严重题目迎接来 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供应了一系列接口能够让你在两个历程间随时通讯（细致内容请衬着历程可用模块）
这里我只简朴的引见下，有兴致的同砚能够参考下这两片文章，入门很不错！
运用 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')
)