参照微信官方文档，调试成功之后总结如下：
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载
步骤三：写代码
//初始化定义(在页面js里面)
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: ‘‘, // 必填，公众号的唯一标识--->用户的微信公众号appid
timestamp: ‘‘, // 必填，生成签名的时间戳--->系统自己生成的时间戳。
nonceStr: ‘‘, // 必填，生成签名的随机串--->系统本地生成的UUID。
signature: ‘‘,// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2--->一大串CC+CV
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
为了获取上述参数如下操作
获取参数流程==========================================================================
1:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=‘自己申请的公众号appid’&secret=’自己申请的公众号secret’
根据appid和secret返回的json格式数据
获取access_token；（涉及访问量，根据2小时限制需要缓存在本地 ！）
2：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=‘上一步access_token’&type=jsapi
根据上一步返回的access_token
获取jsapi_ticket；（涉及访问量，根据2小时限制需要缓存在本地 ！）
3： 获取nonce_str=UUID.randomUUID().toString();
获取timestamp=Long.toString(System.currentTimeMillis() / 1000);
获取url=request.getRequestURL();
获取signature
string1=(jsapi_ticket+nonce_str+timestamp+url)//注意这里参数名必须全部小写，且必须有序-->MessageDigest类
a)MessageDigest crypt = MessageDigest.getInstance("SHA-1");
b)crypt.reset();
c)crypt.update(string1.getBytes("UTF-8"));
d)signature = byteToHex(crypt.digest());- 1
- 2
- 3
- 4
- 5
获取成功==================================================================================
跳转页面，传递到wx.config()中去。demo.jsp
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
//初始化定义
var sd=${result.timestamp};
wx.config({
debug: false ,
appId: ‘${result.appId}‘,
timestamp: ‘${timestamp}‘,
nonceStr: ‘${appId}‘,
signature: ‘${signature}‘,
jsApiList: [
‘onMenuShareTimeline‘,
‘onMenuShareAppMessage‘,
‘onMenuShareQQ‘,
‘onMenuShareWeibo‘,
‘hideMenuItems‘,
‘showMenuItems‘,
‘hideOptionMenu‘,
‘showOptionMenu‘
]
});
wx.ready(function () {
//地理位置
wx.getLocation({
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
alert("latitude : "+latitude+"--longitude : "+longitude+"--speed : "+speed+"--accuracy : "+accuracy);
}
});
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
应一哥们要求，我把我自己调试用的例子发出
=========例子===========
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@taglib uri="/struts-tags" prefix="s"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>syShaoyj1990</title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
var sd=${result.timestamp};
//初始化定义
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: ‘${result.appId}‘, // 必填，公众号的唯一标识--->用户的微信公众号appid
timestamp: sd, // 必填，生成签名的时间戳--->系统自己生成的时间戳。
nonceStr: ‘${result.nonceStr}‘, // 必填，生成签名的随机串--->系统本地生成的UUID。
signature: ‘${result.signature}‘,// 必填，签名，见附录1
jsApiList: [‘onMenuShareTimeline‘,
‘onMenuShareAppMessage‘,
‘onMenuShareQQ‘,
‘onMenuShareWeibo‘,
‘startRecord‘,
‘stopRecord‘,
‘onVoiceRecordEnd‘,
‘playVoice‘,
‘pauseVoice‘,
‘stopVoice‘,
‘onVoicePlayEnd‘,
‘uploadVoice‘,
‘downloadVoice‘,
‘chooseImage‘,
‘previewImage‘,
‘uploadImage‘,
‘downloadImage‘,
‘translateVoice‘,
‘getNetworkType‘,
‘openLocation‘,
‘getLocation‘,
‘hideOptionMenu‘,
‘ showOptionMenu‘,
‘ hideMenuItems‘,
‘showMenuItems‘,
‘ hideAllNonBaseMenuItem‘,
‘ showAllNonBaseMenuItem‘,
‘ closeWindow‘,
‘ scanQRCode‘,
‘ chooseWXPay‘,
‘ openProductSpecificView‘,
‘ addCard‘,
‘ chooseCard‘,
‘openCard‘] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2--->一大串CC+CV
});
wx.config({
debug: false ,
appId: ‘${result.appId}‘,
timestamp: sd,
nonceStr: ‘${result.nonceStr}‘,
signature: ‘${result.signature}‘,
jsApiList: [
‘onMenuShareTimeline‘,
‘onMenuShareAppMessage‘,
‘onMenuShareQQ‘,
‘onMenuShareWeibo‘,
‘hideMenuItems‘,
‘showMenuItems‘,
‘hideOptionMenu‘,
‘showOptionMenu‘
]
});
</script>
<script>
wx.ready(function () {
//分享到qq
wx.onMenuShareQQ({
title: ‘分享到qq‘, // 分享标题
desc: ‘‘, // 分享描述
link: ‘‘, // 分享链接
imgUrl: ‘‘, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//地理位置
wx.getLocation({
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
alert("latitude : "+latitude+"--longitude : "+longitude+"--speed : "+speed+"--accuracy : "+accuracy);
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: ‘syj，分享到朋友圈测试！‘,
link: ‘http://shaoyj1990.sinaapp.com‘,
imgUrl: ‘http://image.baidu.com/detail/newindex?col=%E8%B5%84%E8%AE%AF&tag=%E5%A8%B1%E4%B9%90&pn=0&pid=5759608761913747677&aid=&user_id=10086&setid=-1&sort=0&newsPn=0&star=%E5%80%AA%E5%A6%AE&fr=&from=1‘,
success: function (res) {
alert("ok");
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: ‘syj，分享给朋友测试！‘,
desc: ‘地球一小时,让地球母亲休息一小时！‘,
link: ‘http://www.baidu.com‘,
imgUrl: ‘http://www.baidu.com‘,
success: function (res) {
alert("ok");
}
});
});
</script>
</head>
<body>
<button id="getLocation">click</button>
</body>
</html>时间： 2024-10-11 11:24:35