1. 程式人生 > >關於微信公眾號開發呼叫jssdk介面以及騰訊地圖API

關於微信公眾號開發呼叫jssdk介面以及騰訊地圖API

一,呼叫支付介面

1.必須引入許可權的js 

 <script src="js/jweixin-1.0.0.js"></script>

2.js部分的初始化配置

paymentAuthorization();//頁面支付許可權授權
    // 點選支付
    $("#Save_Patient_Msg").click(function(){
    $("#Save_Patient_Msg").hide();
$(".weui-loadmore").show();
var productId = $("#productId").val();
var couponId = $("#couponId").val();
var token = $("#token").val();
$.post("home/getWXPayMsg", {
productId : productId,
couponId : couponId,
token : token
}, function(result) {
if (result.status == "ok") { 
// 這裡呼叫微信的支付功能進行支付
wx.chooseWXPay({ 
timestamp: result.data.timeStamp, // 支付簽名時間戳,注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成簽名使用的timeStamp欄位名需大寫其中的S字元
nonceStr: result.data.nonceStr, // 支付簽名隨機串,不長於 32 位
package: result.data.packageStr, // 統一支付介面返回的prepay_id引數值,提交格式如:prepay_id=***
signType: "MD5", // 簽名方式,預設為´SHA1´,使用新版支付需傳入´MD5´
paySign: result.data.paySign, // 支付簽名
success: function (res) {
if(res.errMsg == "chooseWXPay:ok"){
$.alert("支付成功");
setTimeout(function(){
// 支付成功之後跳轉靜態的支付成功頁面
window.location.href = "home/paySuccess?token="+token;
},2000);
}else{
$.alert(res.errMsg) 
}
},
cancel: function(res){
$.alert('取消支付');
}
});
}else{
$.alert('請求支付資訊失敗');
}
});
}); 
// 微信支付授權
function paymentAuthorization(){
var url = location.href.split('#')[0];
$.post("weixin/getJSSDKSign", {url:url}, function(data){
// 通過config注入介面許可權
wx.config({
    debug: false,
    appId:data.signModel.appId,
    timestamp: data.signModel.timestamp,
    nonceStr: data.signModel.nonceStr,
    signature: data.signModel.signature,
    jsApiList: [
       'chooseWXPay' ,// 微信支付
       'checkJsApi'
    ]
    })
// 介面處理失敗驗證
    wx.error(function(res){
$.alert(res.errMsg)
});
// 微信支付介面 介面處理成功驗證
    wx.ready(function(){
    wx.checkJsApi({
    jsApiList: [
        'chooseWXPay'
    ],
    success: function (res) {
        if (res.checkResult.chooseWXPay == false) {
            alert('你的微信版本太低,不支援微信JS介面,請升級到最新的微信版本!');
            return;
        }
    }
});
});
  }) 
   }


二,呼叫騰訊API訪問使用者當前定位以及開啟微信內建地圖

第一點,先去騰訊API申請所需密匙; 然後html頁面引入Js <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=你的密匙"></script>
第二點切記: 在html頁面的meta屬性,引用如下幾個,不然會影響微信內建地圖的縮放 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">

var url = location.href.split('#')[0];     //獲取當前地址,切記微信是要篩出#後面的地址
$.post("weixin/getJSSDKSign", {url:url}, function(data){
//通過config注入介面許可權
wx.config({
    debug: false,
    appId:data.signModel.appId,
    timestamp: data.signModel.timestamp,//時間戳
    nonceStr: data.signModel.nonceStr,//隨機串
    signature: data.signModel.signature,//簽名
    jsApiList: [
       'checkJsApi' ,
       'getLocation',//微信定位
       'openLocation',
       'chooseImage'
    ]
    })
//介面處理失敗驗證
       wx.error(function(res){
$.alert(res.errMsg)   
});
//介面處理成功
wx.ready(function(){
wx.checkJsApi({
    jsApiList: [
        'getLocation'
    ],
    success: function (res) {
        if (res.checkResult.getLocation == false) {
            alert('你的微信版本太低,不支援微信JS介面,請升級到最新的微信版本!');
            return;
        }
    }
});
wx.getLocation({
   type: 'wgs84', // 預設為wgs84的gps座標
    success: function (res) {
        var latitude = res.latitude; // 緯度,浮點數,範圍為90 ~ -90
        var longitude = res.longitude; // 經度,浮點數,範圍為180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒計
        var accuracy = res.accuracy; // 位置精度
        var geocoder = new qq.maps.Geocoder({
                complete: function (result) {   //解析成功的回撥函式
                    var address = result.detail.address.substring(5);  //獲取詳細地址資訊 
                    $('#nowAddress').text('')
                    $('#nowAddress').text(address)//將解析出來的地址渲染到頁面
                }
            });
            geocoder.getAddress(new qq.maps.LatLng(latitude, longitude));
            //周邊裝置位置展示
        $.ajax({
            url:"nearby/getNearby",
            data:{latitude:latitude,longitude:longitude},
            type:"get",
            dataType:"json",
            success:function(data){
            var reslut=data.result;//通過後臺返回的資料列表渲染頁面,這裡採用的字串拼接的方法
            var html = ''
if(reslut.length == 0){
$('.siteList').remove()
$('.noImg').show()
$('.notNews').text('暫無相關資訊')
}else{
$('.siteList').remove()
for (var i = 0; i < reslut.length; i++) {
html += '<div class="siteList">'
                 + '<div class="siteBoxNull">'
                 + '</div>'
                 + '<ul class="siteListBox-1">' 
                 + '<li>'
                 + '<p id="name">' + reslut[i].name + '</p>'
                 + '<i></i>'
                 + '</li>'
                 + '<li>'
                 + '<span class="first-span">' + reslut[i].address + '</span>'
                 + '<span style="color:#333333;">' + reslut[i].distance + "km" +'</span>'
                 + '<input type="hidden" value="'+reslut[i].longitude+'" id="longitude"/>'
                 + '<input type="hidden" value="'+reslut[i].latitude+'" id="latitude"/>'
                 + '</li>'
                 + '</ul>'
                 + '</div>'
}
}
$('body').append(html)
$('.siteList').on('click',function(){//切記IOS系統解析出來的經緯度地址是一個string型別的字串,必選轉換IOS系統才能訪問
var longitude = Number($(this).find('#longitude').val())
var latitude = Number($(this).find('#latitude').val())
var name = $(this).find('#name').text()
var adress = $(this).find('.first-span').text()
wx.openLocation({
    latitude: longitude, // 緯度,浮點數,範圍為90 ~ -90
    longitude: latitude, // 經度,浮點數,範圍為180 ~ -180。
    name: name, // 位置名
    address: adress, // 地址詳情說明
    scale: 16, // 地圖縮放級別,整形值,範圍從1~28。預設為最大
    infoUrl: '' // 在檢視位置介面底部顯示的超連結,可點選跳轉
});
})
            }
        })
    },
    cancel: function (res) {
    alert('使用者拒絕授權獲取地理位置');
    }
});

});
})