用 ReactJs 創建Mac版的 keep

Tychio 發布于2019-08-20 14:27 / 1478人閱讀

摘要：我們專注移動體育領域的應用開發，倡導開放共享的精神，不模仿，不跟風，只做酷的產品。這就是正在做的事情，我們希望通過科技驅動，讓更多的人熱愛健身，喜歡運動。

序

因為自己不大喜歡喜歡用手機，所以當在手機上看到有些應用只能在手機上使用時覺得好別扭，但我本身也不是寫移動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提供了一系列接口可以讓你在兩個進程間隨時通信（詳細內容請渲染進程可用模塊）
這里我只簡單的介紹下，有興趣的同學可以參考下這兩片文章，入門很不錯！

使用 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(
    
        
            
            
                
                    
                

            
            
            
        
        
    ,
    document.getElementById("app")
)

鑒賞圖

歡迎大家評鑒

后續

因為當前版本還沒有完全的可以使用，只是完成了部分功能(雖然完成了核心的功能但是尚有不足，有興趣的可以關注我的博客，Github將持續為您導航~)

云服務器 GPU云服務器 Keeping keep mac用python reactjs

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81647.html

翻譯 | 從 ReactJS 到 React-Native—兩者的主要差異是什么？

摘要：跟非常相似，但是在開始嘗試你第一個之前，也需要了解兩者之間的一些差異。推薦的方式是使用提供的。能用到組件中的或者上以啟用這個組件的觸摸事件。華翔，Web前端開發工程師著作權歸作者所有，轉載請聯系作者獲得授權。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已經誕生有兩年左右了，自從適配了An...

darkerXi 2019-08-21 12:05 評論0 收藏0
淺談 CSS Sprites 雪碧圖應用

摘要：編寫配置文件，以下是關鍵配置代碼雪碧圖合并輸出到文件參數執行目錄參數生成的和圖片的文件名之所以推薦，是因為非常的靈活，看懂模塊的可以根據你的項目情況編寫對應的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言網站開發90%會用到小圖標，多小圖標調用顯示是前端開發常見的問題；目前小圖標顯示常見有兩種方式...

MkkHou 2019-08-30 13:12 評論0 收藏0
http簡介看這篇就夠了

摘要：分塊傳輸編碼使用字段的前提條件是，服務器發送回應之前，必須知道回應的數據長度。最后是一個大小為的塊，就表示本次回應的數據發送完了。文章有不當之處，歡迎指正，如果喜歡微信閱讀，你也可以關注我的微信公眾號：好好學java，獲取優質學習資源。什么是協議協議，網絡協議的簡稱，網絡協議是通信計算機雙方必須共同遵從的一組約定。如怎么樣建立連接、怎么樣互相識別等。只有遵守這個約定，計算機之間才...

binaryTree 2019-08-19 10:55 評論0 收藏0
瀏覽器之HTTP緩存的那些事

摘要：瀏覽器執行機制瀏覽器對于請求資源擁有一系列成熟的緩存策略。只要有相應的緩存響應頭要求緩存，瀏覽器客戶端都會對資源緩存一份，當然緩存響應頭也有優先級的。緩存模式瀏覽器緩存可以分為兩種模式，強緩存和協商緩存。具體請看上面的瀏覽器緩存流程圖。緩存是提升用戶訪問速度，節省帶寬，減輕服務器壓力的必經之道。下面都是針對的Http 1.1來說明，HTTP緩存都是針對瀏覽器客戶端，其他第三方客戶端...

hersion 2019-08-06 13:36 評論0 收藏0