公众号网页发开教程

API

微信公众平台技术文档 ，本教程需要使用该接口文档中如下部分内容：

微信网页授权

微信JS-SDK说明文档

公众号配置

资质

配置

功能>公众号设置>功能设置

网页授权开发

网页授权，必须在微信中打开如下格式页面（注意：必须是在微信中打开）：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

注意：本教程为授权获取用信息，所以链接中scope参数值必须为snsapi_userinfo

链接中的参数说明及授权后获取用户信息方法，在微信网页授权API描述的很详细不在冗述，基本流程如下：

微信接口全部使用HTTP协议，官网API让使用get方法调用，本人实际全部使用post方法也可以

如果用户同意授权，页面将跳转至 redirect_uri?code=CODE&state=STATE

code换取网页授权access_token、refresh_token和openid，接口如下：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

access_token和openid拉取用户信息，接口如下：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权，微信提供接口如下：

检验授权凭证（access_token）是否有效

https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

刷新access_token

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

微信分享开发

引入JS文件

在需要调用微信JS接口的页面引入如下JS文件，（支持https）：

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

wx.config

微信配置初始化方法，必须在页面首先调用

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见Java生成签名的随机串算法
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});

注：分享需要使用的JS接口

onMenuShareTimeline //分享到朋友圈
onMenuShareAppMessage //分享给好友
onMenuShareQQ //分享到QQ
onMenuShareWeibo //分享到微博
onMenuShareQZone //分享到QQ空间

Java生成签名的随机串算法

/**
* 生成wx.config参数
* @param jsapiTicket
* @param code
* @param state
* @param url
* @return
*/
public static Map<String, Object> sign(String jsapiTicket, String code, String state, String url) {
Map<String, Object> map = new HashMap<String, Object>();
try {
url = url +"?code="+code+"&state="+state;
Map<String, String> ret = new HashMap<String, String>();
String nonceStr = createNonceStr();
String timesTamp = createTimesTamp();
StringBuffer params = new StringBuffer();
String signature = "";
//注意这里参数名必须全部小写，且必须有序
params.append("jsapi_ticket=").append(jsapiTicket)
.append("&noncestr=").append(nonceStr)
.append("×tamp=").append(timesTamp)
.append("&url=").append(url);
log.info("params@"+params.toString());
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(params.toString().getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
ret.put("nonceStr", nonceStr);
ret.put("timestamp", timesTamp);
ret.put("signature", signature);
ret.put("appId", getPropertiesValue(WX_APP_ID));

map.put("result", "1");
map.put("data", ret);
map.put("error_msg", "");
return map;
} catch (Exception e) {
log.error(e.getMessage(), e);
map.put("result", "0");
map.put("data", null);
map.put("error_msg", "获取配置参数失败");
return map;
}
}

/**
* 生成签名的随机串
* @return
*/
private static String createNonceStr() {
return UUID.randomUUID().toString();
}

/**
* 生成签名的时间戳
* @return
*/
private static String createTimesTamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}

/**
* sha1签名
* @param hash
* @return
*/
private static String byteToHex(final byte[] hash) {

cf9c
Formatter formatter = new Formatter();
for (byte b : hash) {
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}

微信 JS 接口签名校验工具

wx.ready

wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

分享接口的初始化都必须放在wx.ready中

wx.error

wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

分享接口

分享到朋友圈

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

link：该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，此处需要特别注意，如果域名不对将导致分享接口配置不生效，以下接口同理

分享给朋友

获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

分享到QQ

获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

分享到腾讯微博

获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口

wx.onMenuShareWeibo({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

分享到QQ空间

获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--
省略页面
-->
<!--引入微信JS-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'xxxxxxxxxxx', // 必填，公众号的唯一标识
timestamp: 1495164833, // 必填，生成签名的时间戳
nonceStr: '1c604bf7-b176-4d3c-96df-7ce30285fa0f', // 必填，生成签名的随机串
signature: 'xxxxxxxxxxx',// 必填，签名，见Java生成签名的随机串算法
jsApiList: ['onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
wx.ready(function(){
wx.onMenuShareTimeline({
title: '', // 自定义分享标题
link: '', // 自定义分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 自定义分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
})
</script>
</body>
</html>

PS

理想流程下应该是：

(1)打开“网页授权链接”页面>(2)用户授权操作>(3)页面JS接口配置>(4)用户分享操作>再到(1)的循环

这样一个循环过程必须要求，“(3)JS接口配置”中，将link赋值为“网页授权链接”，虽然微信接口中有如下要求：

link：该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

“网页授权链接”格式是：https://open.weixin.qq.com/xxxxxxx，肯定与公众号JS安全域名不一致，但是在之前开发中我一直是这样做的，居然可以配置成功，但是最近在发现分享接口link赋值为“网页授权链接”，在微信开发者工具中调试一切正常，在微信实际环境下会导致分享接口配置不生效，最后的解决办法时，将link赋值为“JS接口安全域名”下的一个页面，该页面直接重定向到“网页授权链接”，这样流程就变为：

(1)打开“重定向页面”>(2)页面直接重定向到“网页授权链接”>(3)打开“网页授权链接”页面>(4)用户授权操作>(5)页面JS接口配置，将link赋值为“重定向页面”>(6)用户分享操作>再到(1)的循环

整体效果和直接分享“网页授权链接”一样，虽然会有一个重定向的过程，但是总体效果和直接打开“网页授权链接”差别不大，至于具体为什么分享接口link赋值为“网页授权链接”以前可以使用，现在不能用了，应该是微信的一个小bug现在修复了。