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

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

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("调起微信支付失败");
            }
        })
    }

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