QQ開放平台網頁應用介面測試

標籤：style   blog   http   io   ar   color   sp   java   for   

閑來無事，近日對QQ應用開發有了興趣。

想法：

　　在自己的pc上搭建一個伺服器，可以使Tomcat，運用Eclipse傳建一個web項目，架構為Spring MVC

　　申請一個免費網域名稱，映射到我的本地，這樣就可以在外網看到我正在開發的項目了，並且我自己還便於維護。

　　將這個項目地址投放到QQ申請的應用上調試介面即可:)

開放平台地址：

　　http://open.qq.com/

建立一個屬於自己的應用，類型：網頁。非託管方式。儲存後TX將分配一個appid、appkey

　　這裡為什麼要選擇非託管方式呢？因為選擇非託管的話，就意味著應用平台地址可以填寫自己本地部署的應用於外網的項目。而託管的話，就必須將項目放到TX雲端服務器上，因為只是學習，並沒有要去真正的開發項目，所以暫時如此，雖然會隨著自己本地Tomcat斷開就看不到效果了。。

開始：

本地tomcat連接埠改為8080

1.申請網域名稱：

　　

　　http://my.dot.tk/cgi-bin/login01.taloha

　　外網關聯內網：下載nat123 from nat123.com，建立一個連接埠映射

　　dot tk申請的網域名稱manage dns CNAME設定:

　　　　　　name:www

　　　　　　target:nat123自主網域名稱

2.下載JAVA SDK OPENV3

　　我們發現調用介面時需要openid，通過瞭解openid、openkey、pf等參數的擷取都是在調試的時候轉入的。

　　參考地址：http://open.qq.com/tools

　　我們需要在Controller端將這些參數擷取，當然appid、appkey是從properties裡擷取

　　

@RequestMapping(value ={"/index.htm"," /"},method =RequestMethod.GET)        public String toHome(Model model,HttpServletRequest request,                HttpServletResponse response){            model.addAttribute("appid", QQConfig.getValue("app_ID"));            model.addAttribute("appkey", QQConfig.getValue("app_KEY"));            model.addAttribute("openid", request.getParameter("openid"));            model.addAttribute("openkey", request.getParameter("openkey"));            model.addAttribute("pf", request.getParameter("pf"));            return "index";        }

這時，在js端就可以通過ajax訪問調用介面了

    var appid =$j("#appid").val();    var appkey =$j("#appkey").val();    var openid =$j("#openid").val();    var openkey =$j("#openkey").val();    var pf =$j("#pf").val();    //使用者資訊    $j.ajax(            {                type: "get",                async: false,                url: getUserInfo,                contentType: "application/x-www-form-urlencoded; charset=utf-8",                data: {                        ‘appid‘:appid,                        ‘appkey‘:appkey,                        ‘openid‘:openid,                        ‘openkey‘:openkey,                        ‘pf‘:pf                    },                dataType: "json",                cache: false,                success: function (data) {                    if(data.ret==‘1002‘){                        //登陸失效，需重新登陸                        fusion2.dialog.relogin();                    }else{                        $j("#userinfo").html("使用者資訊:<br>"+data);                    }                },                error: function (err) {                    alert(err);                }            }                                    );

前端jsp代碼如下：

<center>      <div id ="hidden_area">                <input type="hidden" id="appid" value="${appid}" />          <input type="hidden" id="appkey" value="${appkey}" />          <input type="hidden" id="openid" value="${openid}" />          <input type="hidden" id="openkey" value="${openkey}" />          <input type="hidden" id="pf" value="${pf}" />      </div>          Just for test~          <br>          <span id="userinfo"></span>          <div>              <input type="button" value="加入應用群" id="joinAppGroup" />          </div>                    <div>              <span>發送一條微博:</span>              <input type="text" id="weiboContent" /><br>              <span id="sync">是否同步?</span><input type="checkbox" id ="syncflag" value="0" checked="checked"/>              <span id="error_msg" style="color:red ;display :none" >不可為空</span>              <input type="button" value="發送" id="sendWeibo" />          </div>          <input type="text" name="app" value="sss">          <input type="text" name="app" value="ttt">              </center>

調試效果： 

QQ開放平台網頁應用介面測試