微信公众号第三方接口的调用

时间:2024-03-05 18:41:41

总结一下我在项目中使用微信第三方接口

1.准备工作,首先要引入微信的第三方开放接口的js文件

<script type="text/javascript" src="http://map.qq.com/api/js?v=2.exp"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2.具体调用插件
分享插件的调用

wx.config({
debug :false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId : resp.repData.appid, // 必填,公众号的唯一标识
timestamp : resp.repData.timestamp, // 必填,生成签名的时间戳
nonceStr : resp.repData.nonce_str, // 必填,生成签名的随机串
signature : resp.repData.signature,// 必填,签名,见附录1
jsApiList : [\'onMenuShareAppMessage\',\'onMenuShareTimeline\',\'onMenuShareQQ\',\'onMenuShareWeibo\',\'onMenuShareQZone\',\'getLocation\']// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

调用的时候要在wx.ready()中进行

wx.ready(function(){
 //分享给微信好友
     wx.onMenuShareAppMessage({
      title: \'发现你生活里的美\', // 分享标题
      desc: \'我经过你的时候,你也经过这扇雨后的窗,我领会着你掠过月光与荫影的孤寂,我会和你一起浮动街角的风,在爱的苍穹下\', // 分享描述
      link: \'../bonus.html\', // 分享链接
      imgUrl: \'../img/add/tubiao.jpg\', // 分享图标
      success: function (res) {},
      cancel: function () { }
    });
// 分享到朋友圈
    wx.onMenuShareTimeline({
      title: \'发现你生活里的美\', // 分享标题
      desc: \'我经过你的时候,你也经过这扇雨后的窗,我领会着你掠过月光与荫影的孤寂,我会和你一起浮动街角的风,在爱的苍穹下\', // 分享描述
      link: \'../bonus.html\', // 分享链接
      imgUrl: \'../img/add/tubiao.jpg\', // 分享图标
      success: function (res) {},
      cancel: function () { }                 
  });


// 同理分享到qq好友和qq空间
        wx.onMenuShareQQ({});
         wx.onMenuShareQZone({});
    })

3.微信获取地理位置

 wx.getLocation({
     type: \'wgs84\', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入\'gcj02\'
     success: function (res) {
        latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
        longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        let geocoder = new qq.maps.Geocoder({
           complete: function (result) {
            alert(\'成功:\'+result.detail.address);
            }
        })
       var coord = new qq.maps.LatLng(res.latitude, res.longitude);
            geocoder.getAddress(coord);
       },
                                    
        cancel: function (res) {
          alert(\'用户拒绝授权获取地理位置\');
             }
       });

4.调用微信支付接口

if (typeof WeixinJSBridge == "undefined") {
        alert("请用微信浏览器打开");
        if (document.addEventListener) {
                document.addEventListener(\'WeixinJSBridgeReady\', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent(\'WeixinJSBridgeReady\', onBridgeReady);
            document.attachEvent(\'onWeixinJSBridgeReady\', onBridgeReady);
        }
} else {                        
       onBridgeReady(appId,timeStamp,nonceStr,package,paySign);
   }
    
// 调用微信支付接口核心方法
   function onBridgeReady(appId,timeStamp,nonceStr,package,paySign) {
        WeixinJSBridge.invoke(\'getBrandWCPayRequest\', {
            "appId":appId, //公众号名称,由商户传入
            "nonceStr":nonceStr, //随机串
            "package":package, //支付的一些信息
            "signType":"MD5", //微信签名方式:
            "timeStamp":timeStamp, //时间戳,自1970年以来的秒数
            "paySign":paySign //微信签名 
        }, function(res) {
            
            //使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                console.log("返回成功");
            }else{
                alert("调起微信支付失败");
            }
        })
    }

以上是记录开发微信商城时候调用微信接口一些流程