记一次前端服务端客户端三方联调的总结

Posted xuniannian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记一次前端服务端客户端三方联调的总结相关的知识,希望对你有一定的参考价值。

由于负责项目的原因第一次与客户端服务端三方联调,感觉有必要总结一下,虽然内容不复杂 技术也不难,总结总是好的。

就是要求用户去关注公众号,成功之后给予金币奖励。

和服务端的交互:进入页面,反复轮循去请求接口,服务端轮循去查询数据库,当得到返回结果是成功的时候销毁该页面。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" >
        </li>
      <li>
        <h3><span>2</span><em>点击搜索框,长按粘贴“太易文化”,点击搜索</em></h3>
          <img src="./images/step2.png" >
      </li>
      <li>
        <h3><span>3</span><em>找到“pillar工作室”公众号,点击关注</em></h3>
          <img src="./images/step3.png" >
      </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>

 

以上是关于记一次前端服务端客户端三方联调的总结的主要内容,如果未能解决你的问题,请参考以下文章

记一次面试

记一次内存溢出的分析经历——thrift带给我的痛orz

记一次分析上传代码中碰到的PHP语言的时间知识

记一次内存溢出的分析经历——thrift带给我的痛orz

记一次chrony同步失败问题排查

记一次netty追源码找bug过程