摘要：我们专注移动体育领域的应用开发，倡导开放共享的精神，不模仿，不跟风，只做酷的产品。这就是正在做的事情，我们希望通过科技驱动，让更多的人热爱健身，喜欢运动。
序
关于 Keep因为自己不大喜欢喜欢用手机，所以当在手机上看到有些应用只能在手机上使用时觉得好别扭，但我本身也不是写移动App的，只是会写点 js，都说js啥都能干，那我就用它干！
"Keep 是一个热爱运动的年轻团队，同时也是一群追求极致体验的 Geek。我们专注移动体育领域的应用开发，倡导开放共享的精神，不模仿，不跟风，只做酷的产品。
在我们生活的这个年代里，健身运动文化正在觉醒，应该有更专业的工具，更纯粹的社区，让好身材来得更容易些。这就是 Keep 正在做的事情，我们希望通过科技驱动，让更多的人热爱健身，喜欢运动。"
以上内容节选自keep官网
然而我只是一个喜欢运动的程序员，但是我比较懒~
所以身材嘛~就不告诉你们！ 哈哈~~~
悄悄的留下Github地址
// https://github.com/wodewone/keepForMac
喜欢的朋友请点个start~ 谢谢！
技术栈 electron + webpack + babel + react + es6 + sass + cssModules
ElectronThe 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 配置文件
Main process提供两个在线将png转icns的工具地址
easyicon
iconverticons
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将持续为您导航~)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81647.html
摘要：跟非常相似，但是在开始尝试你第一个之前，也需要了解两者之间的一些差异。推荐的方式是使用提供的。能用到组件中的或者上以启用这个组件的触摸事件。 华翔，Web前端开发工程师著作权归作者所有，转载请联系作者获得授权。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已经诞生有两年左右了，自从适配了An...
摘要：编写配置文件，以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐，是因为非常的灵活，看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题；目前小图标显示常见有两种方式...
摘要：分块传输编码使用字段的前提条件是，服务器发送回应之前，必须知道回应的数据长度。最后是一个大小为的块，就表示本次回应的数据发送完了。 文章有不当之处，欢迎指正，如果喜欢微信阅读，你也可以关注我的微信公众号：好好学java，获取优质学习资源。 什么是协议 协议，网络协议的简称，网络协议是通信计算机双方必须共同遵从的一组约定。如怎么样建立连接、怎么样互相识别等。只有遵守这个约定，计算机之间才...
摘要：浏览器执行机制浏览器对于请求资源拥有一系列成熟的缓存策略。只要有相应的缓存响应头要求缓存，浏览器客户端都会对资源缓存一份，当然缓存响应头也有优先级的。缓存模式浏览器缓存可以分为两种模式，强缓存和协商缓存。具体请看上面的浏览器缓存流程图。 缓存是提升用户访问速度，节省带宽，减轻服务器压力的必经之道。 下面都是针对的Http 1.1来说明，HTTP缓存都是针对浏览器客户端，其他第三方客户端...
阅读 1368·2019-08-30 15:44
阅读 1810·2019-08-30 14:07
阅读 2761·2019-08-30 13:56
阅读 2211·2019-08-29 17:06
阅读 1119·2019-08-29 14:13
阅读 1959·2019-08-29 11:28
阅读 3105·2019-08-26 13:56
阅读 1833·2019-08-26 12:11
