記一次前端服務端客戶端三方聯調的總結
阿新 • • 發佈：2018-11-02
由於負責專案的原因第一次與客戶端服務端三方聯調，感覺有必要總結一下，雖然內容不復雜 技術也不難，總結總是好的。
就是要求使用者去關注公眾號，成功之後給予金幣獎勵。
和服務端的互動：進入頁面，反覆輪循去請求介面，服務端輪循去查詢資料庫，當得到返回結果是成功的時候銷燬該頁面。30s後停止請求。
和客戶端的互動：
JS模組名定義為：wechat。
提供介面供js呼叫：
launchWeChat() 調起微信
pasteAccountName(String accountName)複製公眾號文字
getWeChatCode() 用於獲取微信登入的code值，返回值是string
onWeChatGuideGoToTaskPage()彈窗點選確認返回任務列表
getWeChatFocusRequestEncryptString() 獲取請求引數的加密資料，返回值是string
decryptWeChatFocusString(String dataString) 獲取解密資料，返回值是string
這裡涉及到的一個點是：為了保證安全，前端這邊傳遞給服務端的資料要是加密的，服務端返回的資料也是加密的，所以這時候H5就做了一箇中轉。
將資料傳遞給客戶端，客戶端加密後，H5傳遞給服務端
服務端返回的資料先傳遞給客戶端，客戶端解密後傳遞給H5
這裡要注意一點，當服務端返回的資料是string型別而不是json時，dataType:json,ajax會去走error方法，返回值是：readysSatus:400,responseText:"aaaa",status“200”,statusText:"ok"
這時要把json改為text，dataType:json
這裡記錄下原始碼僅供學習
<body> <div class="focus"> <ul class="clear"> <li> <h3><span>1</span><em>在微信中點選放大鏡</em></h3> <img src="./images/step1.png" alt=""> </li> <li> <h3><span>2</span><em>點選搜尋框,長按貼上“太易文化”,點選搜尋</em></h3> <img src="./images/step2.png" alt=""> </li> <li> <h3><span>3</span><em>找到“pillar工作室”公眾號，點選關注</em></h3> <img src="./images/step3.png" alt=""> </li> </ul> <a href="" id="toFocus">立即關注</a> </div> <div id="jinbiLayer"> <div class="jinbi-box"> <h3 class="jb-tit"><img src="./images/jb-tit.png"></h3> <span class="jb-close" id="jb-close" ><img src="./images/close.png"></span> <div class="jb-txt"><span id="gold-num"></span>金幣</div> <p>恭喜，已完成關注任務</p> <a class="toDisk" href="com.calendar2345://task/android">繼續其他任務</a> </div> <div class="ad-pic"><a href="" id="ad-link"><img src="" id="ad-pic"></a></div> </div> <script src="http://www.77tianqi.com/js/jquery.min.js"></script> <script> $(function(){ //輪循30s每2s一次5次每4s一次5次 var weChatMethods={ toWeChatResult: function (){ var _this = this; var $time = 0; var timerOne = setInterval(function(){ if($time<5){ $time++; _this.toWechatAjax(); if($time>=5){ clearInterval(timerOne); var timerTwo = setInterval(function(){ $time++; if($time>=10){ clearInterval(timerTwo); } _this.toWechatAjax(); },4000) } } },2000) }, //請求服務端獲取是否關注成功 toWechatAjax:function (){ var postData = window.wechat.getWeChatFocusRequestEncryptString(); //alert(postData); $.ajax({ type: "post", url: "http://dan.oyinji.com/frame/api/task/queryFocusTask", dataType: 'text', data:{"data":postData}, success: function (msg) { var msg = window.wechat.decryptWeChatFocusString(msg); var msg = JSON.parse(msg); var data = msg.data; if(msg.code==200 && data.taskFinish=="true"){ console.log("關注成功"); var jinbiNum = data.taskGold; $("#jinbiLayer").show(); $("#gold-num").html(jinbiNum); $("#ad-link").attr("href",data.adverImage); $("#ad-pic").attr("src",data.adverUrl); }else{ alert("關注失敗"); } }, error: function (msg) {alert(JSON.stringify(msg))} }) }, //點選事件 events:function(){ //點選立即去關注 $("#toFocus").click(function(){ //調起微信 window.wechat.launchWeChat(); //複製文案給客戶端 window.wechat.pasteAccountName('太易文化'); }) //點選金幣彈窗按鈕 $("#closeBtn").click(function(){ //彈窗點選確認返回任務列表 window.wechat.onWeChatGuideGoToTaskPage(); }) $("#jb-close").click(function(){ $('#jinbiLayer').hide(); }) }, //判斷是否有後臺切入前臺 onWebViewStateSwitched: function (isForeground){ if(isForeground==true){ toWeChatResult(); } } } weChatMethods.events(); }) </script> </body>