关于微信公众号开发调用jssdk接口以及腾讯地图API
2017-12-05 16:08
656 查看
一,调用支付接口
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.
4000
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('用户拒绝授权获取地理位置');
}
});
});
})
相关文章推荐
- 微信公众号接口调用demo以及h5界面weui以及微信jssdk的调用
- api 接口开发理论 在php中调用接口以及编写接口
- java微信开发API第三步 微信获取以及保存接口调用凭证
- 微信公众号开发(2)jssdk文档 接口 调用
- java微信开发API解析(三)-高级功能的前奏----获取以及保存接口调用凭证
- java微信开发API解析(三)-高级功能的前奏----获取以及保存接口调用凭证 标签: 微信java办微信开发微信文档解析 2016-04-06 20:50 1101人阅读 评论(0) 收藏 举报
- 关于用.Net平台开发SPMS_API开发接口里的PChar说明——转载
- 微信开发-----微信公众号调用微信上传图片接口
- 微信公众号开发 调用图灵机器人的接口使自己的微信成为一个智能机器人
- 关于小米4 以及酷派手机安卓开发 调用相机相册适配的问题
- 微信公众号平台开发(三):几大微信接口的调用
- 即时通讯开发之调用API接口快速在IOS平台的即时通讯应用开发
- WO+开放平台:API调用开发手记(关于签名字段)
- zabbix 二次开发之调用api接口获取历史数据
- 支付宝API接口开发相关文档以及实例
- 菜鸟日记(yzy) 微信公众号网页的开发基础(微信接口调用)
- iOS开发之调用系统打电话发短信接口以及程序内发短信
- 基于微信公众号开发,调用其他接口Url参数乱码问题
- 支付宝API接口开发相关文档以及实例
- WO+开放平台:API调用开发手记(话费计费接口2.0)