使用node-webkit开发Clover桌面客户端的一些记录（一）

首先说一说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.

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文件中,以后会详细说.