网页Ajax教程

 

ajax实现微信公众号内支付例子

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>打赏演示</title>
  <script src="/js/vue.min.js"></script>
  <script src="/js/jquery-3.2.1.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script type="text/javascript" src="/layer/layer.js"></script>
  <style>
    img {
      max-width: 90%;
    }
  </style>
</head>
<body>
  <div id="vuecontainer1" class="jumbotron" style="background-color: #006666;color:#fff;">
    <div class="container">
      <h2>{{ data.title }}</h2>
      <p>&nbsp;</p>
      <h3>this is only test</h3>
    </div>
  </div>
  <div id="vuecontainer2" class="container" v-html="data.content"></div>
  <div class="container">
    <h3>欢迎打赏:</h3>
    <div class="row" style="padding-top:10px;">
      <div class="col-xs-4">
        <button type="button" class="btn btn-success" onclick="goPay(1)">打赏1元</button>
      </div>
      <div class="col-xs-4">
        <button type="button" class="btn btn-success" onclick="goPay(3)">打赏3元</button>
      </div>
      <div class="col-xs-4">
        <button type="button" class="btn btn-success" onclick="goPay(5)">打赏5元</button>
      </div>
    </div>
    <div class="row" style="padding-top:10px;">
      <div class="col-xs-4">
        <button type="button" class="btn btn-success" onclick="goPay(10)">打赏10元</button>
      </div>
      <div class="col-xs-4">
        <button type="button" class="btn btn-success" onclick="goPay(50)">打赏50元</button>
      </div>
      <div class="col-xs-4">
        <button type="button" class="btn btn-success" onclick="goPay(100)">打赏100元</button>
      </div>
    </div>
  </div>
  <script type="text/javascript">
  var code;
  $(function(){
    var url = location.href;
    if (url.indexOf("code=") == -1) {
      location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb3218336ce0c0966&redirect_uri=http://h.s2m.cc/reward.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
    } else {
      code = url.substring(url.indexOf("code=") + 5);
      code = code.substring(0, code.indexOf("&"));
      $.post("https://api.it120.cc/wxgzh/cms/news/detail",{id: 1937},function(a){
        console.log(a);
        new Vue({
          el: '#vuecontainer1',
          data: a
        });
        new Vue({
          el: '#vuecontainer2',
          data: a
        });
      });
    }
  });
  function goPay (money) {
    $.post("https://api.it120.cc/wxgzh/pay/wx/jsapi",{money: money, payName: '打赏'+ money +'元', code:code},function(a){
      console.log(a);
      if (a.code != 0) {
        alert("支付失败:" + a.msg);
        return;
      }
      WeixinJSBridge.invoke(
           'getBrandWCPayRequest', {
               "appId":a.data.appid,     //公众号名称,由商户传入
               "timeStamp":a.data.timeStamp,         //时间戳,自1970年以来的秒数
               "nonceStr":a.data.nonceStr, //随机串
               "package":"prepay_id=" + a.data.prepayId,
               "signType":"MD5",         //微信签名方式:
               "paySign":a.data.sign //微信签名
           },
           function(res){
               if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                 alert('支付成功,感谢您的支持!');
               }
               if(res.err_msg == "get_brand_wcpay_request:fail" ) {
                 alert(res.err_code + ":" + res.err_desc);
               }
           }
       );
    });
  }
  if (typeof WeixinJSBridge == "undefined"){
     if( document.addEventListener ){
         document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
     }else if (document.attachEvent){
         document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
     }
  }else{
     onBridgeReady();
  }
  function onBridgeReady(){}
  </script>
</body>

</html>



效果展示: 


image.png

Copyright © 杭州于芯科技有限公司

QQ交流群:479413914

微信小程序api接口

浙ICP备15041833号