首先说一说Clover.

这是一个OA产品,是我们公司组建我们技术部以来最最重要的一项工作 -- 开发企业内部使用的管理系统."Clover"这个名字是我们老大起的,拆开看是"C"+"lover"."lover"都懂是啥,而这个"C"呢,其实就是"Code",因为我们老大是一个(狂热的)编码爱好者(汗...),精通很多门语言,所以就隐晦的把自己的爱好写进项目名称,就连我们测试服务器的地址,也改成"joycode.cn"了(可见其热度...).

"Clover"的开发,是前后台并重的.后台用的PHP,技术方面就不说了,主要说说我负责的前端开发.在这儿插一句,我们技术部6个人,老大(张哥),产品,设计,后台(奈落大叔),前端(我),测试,一样一个,都是能独当一面的好孩子(男女1:1,写代码都是男生,不写代码的都是女生)...老大偏重于产品和后台开发,对我前端的要求是使用avalon框架,针对webkit内核(主要是Chrome和客户端).这两个都是js方面的要求,近期也提了页面部分的要求,即整理写过的东西,提高页面制作的速度,弄一个scss框架,操碎了我一地的心.

客户端的出现,其实是源于最终(高)BOSS的一句话:"让我既能在网页上能看到,也能在桌面上有个应用程序可以点开看".然后,(中间省略一堆过程),老大选定了node-webkit这个神奇东西(兼容windows和mac两个系统),又让我操碎了一地的心.

node-webkit

看名字就知道,nodejs+webkit内核,底层是C++实现的,就相当于一个功能全面的浏览器,但你能用js控制整个浏览器的属性,所以设置好属性,写写页面,就可以把它当做一个桌面应用程序需了.

首先是项目地址(国人大牛主持):https://github.com/rogerwang/node-webkit/,下载下来exe就能用.

然后是我学习参考的资料(Oh!上帝,是中文哒):http://www.cnblogs.com/xuanhun/p/3653816.html,感谢大牛玄魂!

之后是官方文档:https://github.com/rogerwang/node-webkit/wiki,虽说是英文的,但胜在全面.

最后是grunt打包工具:http://groups.google.com/group/node-webkit(需翻墙),打一个命令,生成windows和mac两个版本.

主窗口

1.配置文件package.json

{

    "name": "Clover",

    "description": "Hizone Clover",

    "version": "0.2",

    "version_stat":"pro",

    "main": "index.html",

    "window": {

        "show": true,

        "toolbar": false,

        "frame": true,

        "position": "center",

        "width": 1020,

        "height": 700,

        "min_width": 1080,

        "min_height": 700,

        "show_in_taskbar": true,

        "icon": "clover-logo-64.png"

    }

}

只保留一个外框,引用本地index.html,在里面套用iframe来打开线上的Clover.

2.主页面index.html

<body>

    <div class="clientpageLoading">

        <div class="pl_content">

            <div class="pl_img"></div>

            <div class="pl_txt">正在加载中...</div>

        </div>

    </div>

    <div class="updating-box">

        <div class="updating-text">

            更新包正在下载中<span class="updating-dots">...</span>

        </div>

        <div class="updating-bg">

            <div class="updating-holder">

                <div class="updating-going">

                    <div class="updating-float"></div>

                </div>

                <div class="updating-mask"></div>

            </div>

        </div>

    </div>

    <iframe src="" class="mainframe" frameborder="0" style="display: none; background:#fff;"></iframe>

</body>

从上到下分别是一个"加载中"的cover,一个"下载中"的进度条和那个主iframe.

客户端主要用到两个功能,分别是"桌面通知"和"文件更新",而主逻辑写在index.js文件中,以后会详细说.

使用node-webkit开发Clover桌面客户端的一些记录（一）的更多相关文章

  1. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  2. heX：用HTML5和Node.JS开发桌面应用

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  3. (转)heX——基于 HTML5 和 Node.JS 开发桌面应用

    本文转载自:http://techblog.youdao.com/?p=685 简介:heX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.是你开发 ...

  4. 发现一个好的开源项目：lomoX（挑着看，每天看一点，看一年就ok了）——用Webkit开发桌面软件，炫

    http://www.oschina.net/p/lomox https://github.com/caidongyun/lomox 用Web技术做桌面客户端.虽然仍然免不了要分发客户端,但好处是,界 ...

  5. win10系统开发环境安装studio 3T（MongoDB桌面客户端）

    studio 3T 是mongodb优秀的桌面客户端工具. 下载 https://studio3t.com/download/#windows 本教程基于2020.1.2版本 安装 F:\javawe ...

  6. 使用node-webkit(v0.35.5)和innosetup(3.6.1)打包将web程序打包为桌面客户端(安装包)

    这边主要是有一个客户,需要在电视机上安装一个客户端,含有视频直播功能:刚开始我们采用的webapp打包成apk安装在电视机上,发现摄像头监控画面根本无法播放(apk在手机上可以正常播放视频):排除一些 ...

  7. electron-vue：Vue.js 开发 Electron 桌面应用

    相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用,今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架,该项 ...

  8. Electron+Vue开发跨平台桌面应用

    Electron+Vue开发跨平台桌面应用 xiangzhihong发布于 2019-12-23 虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某 ...

  9. Node.js学习笔记——Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

随机推荐

  1. 324篇CSS应用效果集合（梦想天空，可同时应用于Web开发与Qt界面开发）

    http://www.cnblogs.com/lhb25/category/146075.html http://www.yyyweb.com/

  2. POJPower Network (最大流)

    题目链接. 分析: 这题描述的可不是一般的复杂. 其时就是很多源点.很多汇点,使尽量多流量的到达汇点. 因为有很多源点,就再设一个源点(0号),使得0号到其它源点的容量为其它源点的初始量,同样设一汇点 ...

  3. HDU 2444 The Accomodation of Students（判断是否可图 + 二分图）

    题目大意:有一群人他们有一些关系,比如A认识B, B认识C, 但是这并不意味值A和C认识.现在给你所有互相认识的学生,你的任务是把所有的学生分成两个一组, 住在一个双人房里.相互认识的同学可以住在一个 ...

  4. HDOJ 1097 A hard puzzle（循环问题）

    Problem Description lcy gives a hard puzzle to feng5166,lwg,JGShining and Ignatius: gave a and b,how ...

  5. Foundation Data Structure

    LinkedList : /** * 考虑的比较的周全,并且包含了全部的情况,代码也不乱<b></b> * * @param index * 插入的位置 * @param c ...

  6. Assertions

    JUnit提供了许多重载的断言方法,这些方法均可以通过"import static org.junit.Assert.*"导入.方法的参数顺序一般都是([失败时打印的字符串消息], ...

  7. windows 编程—— 使用函数笔记

    目录: 创建滚动条 滚动条函数(新老版本) 取得设备内容句柄hdc 设置 hdc 中的属性 画点画线 画填充图形 使用自定义的 画笔 和 画刷 矩形.区域和剪裁 关于GDI映像模式 其他常用的方便计算 ...

  8. linux下用phpize给PHP动态添加扩展(转)

    使用php的常见问题是:编译php时忘记添加某扩展,后来想添加扩展,但是因为安装php后又装了一些东西如PEAR等,不想删除目录重装,别说,php还真有这样的功能. 我没有在手册中看到. 如我想增加b ...

  9. 【网络流#7】POJ 3281 Dining 最大流 - 《挑战程序设计竞赛》例题

    不使用二分图匹配,使用最大流即可,设源点S与汇点T,S->食物->牛->牛->饮料->T,每条边流量为1,因为流过牛的最大流量是1,所以将牛拆成两个点. 前向星,Dini ...

  10. 【转】app瘦身

    iPhone经过这几年的发展,已经发生了很大的变化,例如屏幕变得更加多样,尺寸更多,内存变得更大,CPU的架构也在变化.伴随着iPhone的变化,iOS也在变化,例如AutoLayout.size c ...