花了好几天时间从入门到入门,终于把这个暑假作业做完了
简介
一个跨平台,一份源代码同时支持Windows、Linux、MacOS的工tuo具pan栏农历
下面是Windows下的GIF效果图
可以在这里下载应用
也可以在这里体验网页版(该网页约10MB,加载会很慢)
还可以在这里查看实验报告
开发
下载源码
git clone https://github.com/gou4shi1/Lunar-Calendar.git
安装依赖包
在源码目录里
npm install
在这一步出错的话,请先安装Node v6.x
觉得这一步太慢的话,请先设置使用淘宝的镜像库
npm config set registry https://registry.npm.taobao.org
安装Node出错的话,请先安装python2.6或者2.7
测试
npm start
这句命令做了很多事情
首先把React里用到的所有js文件打包成一个文件,然后生成并打开农历
并监视react文件夹里的源码,源码一变,它会自动重新生成并打开农历
所以要先运行这句命令,打包了js文件之后,才能运行下面的命令
不打包,直接用electron打开农历:
npm run electron
不打包,直接用electron打开农历,并开启开发者工具:
npm run electron-debug
生成APP
在运行了
npm install和
npm start之后
生成Windows 64位的应用:
npm run build-win-64
生成Windows 32位的应用:
npm run build-win-32
生成Linux 64位的应用:
npm run build-linux-64
生成Linux 32位的应用:
npm run build-linux-32
生成Mac 64位的应用:
npm run build-darwin-64
生成Mac 32位的应用:
npm run build-darwin-32
技术栈
底层
-
Electron: Atom就是用它写的,形象地说,就是用一个浏览器把你写的网页包装成桌面应用,一份代码可以同时生成Windows、Linux、Mac三个平台的桌面应用
-
Menubar: 一个在Electron的基础上,帮你搞定工具栏应用的系统底层细节的模块
后端
-
lunar-calendar-zh: 提供了农历数据
-
gulp: 基于流的自动化构建工具,npm start就是运行了它
前端
-
HTML&CSS&Javascript: 前端三兄弟
-
React&Flux: Facebook、Instagram就是用它写的,Facebook说MVC不适合大规模应用于是就搞出了这个框架,当然,我这个小农历是可以用MVC的,用React&Flux纯粹是尝尝鲜,这里是中文文档
-
Material-ui: 用React的方式实现了Material Design,而Material Design则是谷歌提出的前端设计框架