成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

用 ReactJs 創(chuàng)建Mac版的 keep

Tychio / 1531人閱讀

摘要：我們專注移動體育領(lǐng)域的應(yīng)用開發(fā)，倡導(dǎo)開放共享的精神，不模仿，不跟風(fēng)，只做酷的產(chǎn)品。這就是正在做的事情，我們希望通過科技驅(qū)動，讓更多的人熱愛健身，喜歡運動。

序 
因為自己不大喜歡喜歡用手機，所以當(dāng)在手機上看到有些應(yīng)用只能在手機上使用時覺得好別扭，但我本身也不是寫移動App的，只是會寫點 js，都說js啥都能干，那我就用它干！
關(guān)于 Keep 
"Keep 是一個熱愛運動的年輕團(tuán)隊，同時也是一群追求極致體驗的 Geek。我們專注移動體育領(lǐng)域的應(yīng)用開發(fā)，倡導(dǎo)開放共享的精神，不模仿，不跟風(fēng)，只做酷的產(chǎn)品。
在我們生活的這個年代里，健身運動文化正在覺醒，應(yīng)該有更專業(yè)的工具，更純粹的社區(qū)，讓好身材來得更容易些。這就是 Keep 正在做的事情，我們希望通過科技驅(qū)動，讓更多的人熱愛健身，喜歡運動。"
以上內(nèi)容節(jié)選自keep官網(wǎng)

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

技術(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

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

main 運行效果圖

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


關(guān)于項目進(jì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 進(jìn)程入口文件
│?? └── ./src/sass            # 樣式文件
└── ./webpack.config.js        # webpack 配置文件
提供兩個在線將png轉(zhuǎn)icns的工具地址
easyicon
iconverticons
Main process 
electron 分為兩個進(jìn)程去管理一個是主進(jìn)程由Node提供服務(wù)，負(fù)責(zé)和系統(tǒng)進(jìn)行操作與GUI親密接觸，一個是渲染進(jìn)程也就是我們平常寫的web頁面。但是electron提供了一系列接口可以讓你在兩個進(jìn)程間隨時通信（詳細(xì)內(nèi)容請渲染進(jìn)程可用模塊）
這里我只簡單的介紹下，有興趣的同學(xué)可以參考下這兩片文章，入門很不錯！



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


[[譯文] 通過 Electron 開發(fā)一個簡單地桌面應(yīng)用](https://gold.xitu.io/entry/56...
另外官網(wǎng)還有很多 優(yōu)秀的App



然后 這里 也收集了很多不錯的示例，都是在Github上開源的，大家可以下載體驗
最后這個是官方文檔，以及中文文檔

這個是我的主進(jìn)程代碼
./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 
渲染進(jìn)程

./src/main.js 部分代碼

ReactDOM.render(
    
        
            
            
                
                    
                

            
            
            
        
        
    ,
    document.getElementById("app")
)
鑒賞圖

歡迎大家評鑒









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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81647.html

相關(guān)文章

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

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

    darkerXi 評論0 收藏0

  • 淺談 CSS Sprites 雪碧圖應(yīng)用

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

    MkkHou 評論0 收藏0

  • http簡介看這篇就夠了

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

    binaryTree 評論0 收藏0

  • 瀏覽器之HTTP緩存的那些事

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

    hersion 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<