记一次前端服务端客户端三方联调的总结
由于负责项目的原因第一次与客户端服务端三方联调，感觉有必要总结一下，虽然内容不复杂 技术也不难，总结总是好的。
就是要求用户去关注公众号，成功之后给予金币奖励。
和服务端的交互：进入页面，反复轮循去请求接口，服务端轮循去查询数据库，当得到返回结果是成功的时候销毁该页面。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>
