微信公衆號第三方接口的調用

總結一下我在項目中使用微信第三方接口

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

以上是記錄開發微信商城時候調用微信接口一些流程