W.QQ2012源码分享（采用w.qq.com协议）

ninja911

严重提示
腾讯已经关闭w.qq.com网站，而指向web.qq.com，所以w.qq.com的协议已经作废。源码仅作参考，不可实战了！[2012-02-11]


【简介】
快手W.QQ2012，采用腾讯QQ之w.qq.com协议（手机网页版）。
开发周期：2011-10-28 至 2011-11-11（光棍节，童鞋们节日快乐）

【目的】
1、第一次尝试Web UI开发应用
2、进阶学习快手
3、制作QQ机器人，应用于PHP或者直接数据库交互

【分享包】
1、快手项目包（aau、htm、js、css、picture）
2、Png源文件以及QQ素材

【开发用的工具有】
1、IDE:快手AAuto最新版
2、网页设计：DreamWeaver CS5.5 + Jquery插件智能提示
3、图形UI设计：FireWorks CS5.5
4、快速编辑器：EditPlus3
5、调试Debug浏览器：FireFox8 + fireBug插件
6、应用图标设计：IconWorkshop
自上软件请自行GG搜索（百毒有毒，怕怕怕，不推荐）。

【准备与流程】
1、熟看快手范例
2、熟悉Javascript语言
3、熟悉Jquery框架
4、熟悉CSS层叠样式设计
5、参考腾讯官方QQ界面，构思UI
5、获取基本素材，通过QQ资源包获取
6、了解w.qq.com功能，分析网页js以及firebug进行抓包对比分析
7、耐心加细心……调试很辛苦，我晚上睡觉都在想第二天……终于可以放下了。

【协议】
1、登陆协议： 由于腾讯所有WEB登陆应用，都是同一协议。我会在细化补充
2、w.qq.com协议看似比较简单，但也有难度。简单：利用官方的rpcservice.js文件能看懂逻辑交互类似（MVC里的M和C），views.js相当于V。复杂：数据相对复杂，没有json那样的美观，一句话简陋得不能再简陋（需要靠读rpcservice.js和dump结果分析，恼火就在这里）。
3、我下次会专门抽时间，把协议简单理一下，并画出w.qq.com中的js简单逻辑流程图

【备注】
1、源码开源！“自由”请理解好，请不要拿这个东西干坏事，切忌切忌！
2、可以转载，可以二次开发，可以商用，反正“自由”。
3、源码部分有注释，没有注释的由于赶时间，后期基本上不怎么去注释了（哎，太懒了）。不过，英文单词你认得到的话，那也非常容易理解。反之就恼火了。

【版权】
Author：NinJa911
Powered BY: www.ninja911.com
Email: ninja911(爱特)qq.com

图形UI源:


源码：

ninja911

开发过程中的相关帖子

QQ WEB 登陆初探，让你了解QQWEB协议（一）
http://www.aau.cn/thread-3954-1-1.html

QQ Web 登陆之UI设计（二）
http://www.aau.cn/thread-4050-1-1.html

ninja911

项目包里的文件结构解析

项目包跟目录
|   app.ico  应用图标
|   default.aproj 项目文件
|   main.aau  入口aau
|   
+---lib
|   \---qq
|           _.aau  自写qq库
|           
\---res
    |   login.htm  登陆页面
    |   mbar.htm  好友面板页面
    |   message.htm  消息窗口页面
    |   
    +---aform   快手子窗口目录
    |       mbar.aau  好友面板
    |       message.aau  消息窗口面板
    |      
    +---css   CSS目录
    |       global.css  全局css
    |       login.css  登陆时用到的
    |       mbar.css  好友面板用到的
    |       message.css  消息窗口用到的
    |      
    +---images
    |   |   button_common_hover.png  通用按钮（鼠标经过状态）
    |   |   button_common_link.png  通用按钮（默认状态）
    |   |   logining.gif   好友面板加载loading效果
    |   |   login_header.jpg   登陆界面头部图
    |   |   vipflag.gif    vip标志图
    |   |   
    |   +---face
    |   |       border.gif   头像边框遮盖图（暂时未用到）
    |   |       default.jpg   默认头像
    |   |       default.png
    |   |      
    |   +---frame    WEB UI框架需要用到的图片
    |   |       button.gif
    |   |       caption.css
    |   |       caption.gif
    |   |       close.png
    |   |       max.png
    |   |       min.png
    |   |       restore.png
    |   |       sysmenu.ico
    |   |       sysmenu.png   左上角应用图标
    |   |       website.png
    |   |      
    |   +---mbar    好友面板用到的图库
    |   |       box_b1.jpg
    |   |       box_b2.jpg
    |   |       box_b3.jpg
    |   |       box_c1.jpg
    |   |       box_c3.jpg
    |   |       box_t1.jpg
    |   |       box_t2.jpg
    |   |       box_t3.jpg
    |   |       header_bg.jpg
    |   |      
    |   +---message    消息面板用到的图库
    |   |       bottom_bg.jpg
    |   |       header_bg.jpg
    |   |       history_bg.jpg
    |   |       tool_bg.jpg
    |   |      
    |   +---status    状态图文件夹
    |   |       imonline.png   在线
    |   |       invisible.png   隐身
    |   |      
    |   \---tab_list    好友面板中选项卡用到的图片
    |           group_active.png
    |           group_hover.png
    |           group_link.png
    |           team_active.png
    |           team_hover.png
    |           team_link.png
    |           
    \---js
        |   my_qqpcs.js    腾讯原版rpcservice.js的改装包（核心）
        |   
        \---jquery
            |   jquery.min.js   jquery框架，最新的1.7
            |   jquery_common.js
            |   
            +---treeview   Jquery treeview插件
            |   |   jquery.treeview.css
            |   |   jquery.treeview.js
            |   |   
            |   \---images
            |           ajax-loader.gif
            |           file.gif
            |           folder-closed.gif
            |           folder.gif
            |           minus.gif
            |           plus.gif
            |           treeview-black-line.gif
            |           treeview-black.gif
            |           treeview-default-line.gif
            |           treeview-default-line.png
            |           treeview-default.gif
            |           treeview-default.png
            |           treeview-famfamfam-line.gif
            |           treeview-famfamfam.gif
            |           treeview-gray-line.gif
            |           treeview-gray.gif
            |           treeview-red-line.gif
            |           treeview-red.gif
            |           
            \---validationEngine   Jquery 表单验证插件
                |   jquery.validationEngine.js
                |   
                +---css
                |       screenshot.png
                |       template.css
                |       validationEngine.jquery.css
                |      
                \---languages
                        jquery.validationEngine-cz.js
                        jquery.validationEngine-da.js
                        jquery.validationEngine-de.js
                        jquery.validationEngine-en.js
                        jquery.validationEngine-es.js
                        jquery.validationEngine-fr.js
                        jquery.validationEngine-it.js
                        jquery.validationEngine-ja.js
                        jquery.validationEngine-nl.js
                        jquery.validationEngine-pl.js
                        jquery.validationEngine-pt.js
                        jquery.validationEngine-ro.js
                        jquery.validationEngine-ru.js
                        jquery.validationEngine-sv.js
                        jquery.validationEngine-tr.js
                        jquery.validationEngine-zh_CH.js
                        jquery.validationEngine-zh_TW.js
                        

dafei2599

占位

spbynla

bob

留位

星雨朝霞

终于来了!谢谢分享!

fyy

大工程

、Echo

终于来了

hurricane_tx

强大的程序，前排强势插入

xshn

学习。。      。。

look

综合运用的好例子！

jyb21

很强大

donque2010

下载试用了，界面很不错啊 工程很完整，代码也很清晰，学习了  感谢楼主!

ltt

技术含量很高。

wanderer_hh

真是厉害啊，学习吧

ayumi502

呵呵 很强大 学习~~~

mamer

楼主nbility

ayumi502

谢谢分享 学学习

ejzhang

好好学习天天向上

cbb0220

谢谢了 ！

gxrcn

不错，下载研究~~~