微信JS-SDK介绍
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
本次的内容：
实现：分享到朋友圈，qq，qq空间，微信朋友的功能。
基础接口
判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: [‘chooseImage’], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{“checkResult”:{“chooseImage”:true},“errMsg”:“checkJsApi:ok”}
}
});
备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。
获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
title: ‘’, // 分享标题
link: ‘’, // 分享链接
imgUrl: ‘’, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
title: ‘’, // 分享标题
desc: ‘’, // 分享描述
link: ‘’, // 分享链接
imgUrl: ‘’, // 分享图标
type: ‘’, // 分享类型,music、video或link，不填默认为link
dataUrl: ‘’, // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
获取“分享到QQ”按钮点击状态及自定义分享内容接口
wx.onMenuShareQQ({
title: ‘’, // 分享标题
desc: ‘’, // 分享描述
link: ‘’, // 分享链接
imgUrl: ‘’, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
wx.onMenuShareWeibo({
title: ‘’, // 分享标题
desc: ‘’, // 分享描述
link: ‘’, // 分享链接
imgUrl: ‘’, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
wx.onMenuShareQZone({
title: ‘’, // 分享标题
desc: ‘’, // 分享描述
link: ‘’, // 分享链接
imgUrl: ‘’, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});第二部分：分享方法的实现。
那么，我们如何来实现这个分享内容呢？
JSSDK使用步骤
步骤一：绑定域名
- 先登录微信公众平台 ，登录后可在“开发者中心”查看对应的接口权限。
说明了有这个分享的权限。
- 进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
js域名，一般不用http这样的开头。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK
如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载
步骤三：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: ‘’, // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: ‘’, // 必填，生成签名的随机串
signature: ‘’,// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
注意，我这里只是动态获取，并没有做缓存，如果有需要的同学，需要做一些缓存。
获取微信config
/**
* 方法名：getWxConfig</br>
* 详述：获取微信的配置信息 </br>
* 开发人员：souvc </br>
* 创建时间：2016-1-5 </br>
*
* @param request
* @return 说明返回值含义
*/
public static Map<String, Object> getWxConfig(HttpServletRequest request)
{
Map<String, Object> ret = new HashMap<String, Object>();
String requestUrl = request.getRequestURL().toString();
String access_token = "";
String jsapi_ticket = "";
String timestamp = Long.toString(System.currentTimeMillis() / 1000); // 必填，生成签名的时间戳
String nonceStr = UUID.randomUUID().toString(); // 必填，生成签名的随机串
String url = String.format(BasicSysCodeService.getTicketUrl(), accessToken.getAccessToken());
JSONObject json = httpsRequest(url, "GET", null);
if (json != null)
{
jsapi_ticket = json.getString("ticket");
}
String signature = "";
// 注意这里参数名必须全部小写，且必须有序
String sign =
"jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonceStr + "×tamp=" + timestamp + "&url=" + requestUrl;
try
{
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(sign.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
}
catch (Exception e)
{
e.printStackTrace();
}
ret.put("appId", BasicSysCodeService.getAppId());
ret.put("timestamp", timestamp);
ret.put("nonceStr", nonceStr);
ret.put("signature", signature);
return ret;
}
/**
* 方法名：byteToHex</br>
* 详述：字符串加密辅助方法 </br>
* 开发人员：souvc </br>
* 创建时间：2016-1-5 </br>
*
* @param hash
* @return 说明返回值含义
*/
private static String byteToHex(final byte[] hash)
{
Formatter formatter = new Formatter();
for (byte b : hash)
{
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
/**
* 发送https请求
*
* @param requestUrl 请求地址
* @param requestMethod 请求方式（GET、POST）
* @param outputStr 提交的数据
* @return JSONObject(通过JSONObject.get(key)的方式获取json对象的属性值)
*/
private static JSONObject httpsRequest(String requestUrl, String requestMethod, String outputStr)
{
JSONObject jsonObject = null;
try
{
// 创建SSLContext对象，并使用我们指定的信任管理器初始化
TrustManager[] tm = {new MyX509TrustManager()};
SSLContext sslContext = SSLContext.getInstance("SSL", "SunJSSE");
sslContext.init(null, tm, new java.security.SecureRandom());
// 从上述SSLContext对象中得到SSLSocketFactory对象
SSLSocketFactory ssf = sslContext.getSocketFactory();
URL url = new URL(requestUrl);
HttpsURLConnection conn = (HttpsURLConnection)url.openConnection();
conn.setSSLSocketFactory(ssf);
conn.setDoOutput(true);
conn.setDoInput(true);
conn.setUseCaches(false);
// 设置请求方式（GET/POST）
conn.setRequestMethod(requestMethod);
// 当outputStr不为null时向输出流写数据
if (null != outputStr)
{
OutputStream outputStream = conn.getOutputStream();
// 注意编码格式
outputStream.write(outputStr.getBytes("UTF-8"));
outputStream.close();
}
// 从输入流读取返回内容
InputStream inputStream = conn.getInputStream();
InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
String str = null;
StringBuffer buffer = new StringBuffer();
while ((str = bufferedReader.readLine()) != null)
{
buffer.append(str);
}
// 释放资源
bufferedReader.close();
inputStreamReader.close();
inputStream.close();
inputStream = null;
conn.disconnect();
jsonObject = JSONObject.fromObject(buffer.toString());
}
catch (ConnectException ce)
{
log.error("连接超时：{}", ce);
}
catch (Exception e)
{
log.error("https请求异常：{}", e);
}
return jsonObject;
}@RequestMapping(value = "/getJssdk.do")
public String getJssdk(Model model,HttpServletRequest request)
{
Map<String, Object> map = CommonUtil.getWxConfig(request);
model.addAttribute("appId", map.get("appId"));
model.addAttribute("timestamp", map.get("timestamp"));
model.addAttribute("nonceStr", map.get("nonceStr"));
model.addAttribute("signature", map.get("signature"));
return "weixin";
}<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>欢迎访问搜投网 </title>
</head>
<body>
欢迎访问！
</body>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
// 微信信息的以及调用的配置
wx.config({
debug: false,
appId: '${appId}',
timestamp: '${timestamp}',
nonceStr: '${nonceStr}',
signature: '${signature}',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone']
});
wx.ready(function(){
// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
title: 'java微信公共号——服务器开发', // 分享标题
link:"",
imgUrl: "" // 分享图标
});
// 获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
title: 'java微信公共号——消息的接受与响应', // 分享标题
desc: "java微信公共号——消息的接受与响应", // 分享描述
link:"",
imgUrl: "", // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
});
//获取“分享到QQ”按钮点击状态及自定义分享内容接口
wx.onMenuShareQQ({
title: 'java微信公众号——定时获取access_token', // 分享标题
desc: 'java微信公众号——定时获取access_token', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
wx.onMenuShareWeibo({
title: 'java微信公共号——获取微信用户的基本信息', // 分享标题
desc: 'java微信公共号——获取微信用户的基本信息', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
wx.onMenuShareQZone({
title: 'java微信公众号——授权获取用户信息', // 分享标题
desc: 'java微信公众号——授权获取用户信息', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
