大家好，又见面了，我是你们的朋友全栈君。
第一部分、为公众号菜单嵌入网页
一、关键参考文档
微信JS-SDK说明文档 。
二、编辑模式嵌入网页
在公众号平台下，自定义菜单，添加菜单，并选择菜单内容跳转到指定页面地址即可（需认证后方可添加页面地址，个人账号暂不支持认证）。
三、开发者模式嵌入网页（通过微信公众平台接口调试工具动态生成菜单）
1、基础支持中，通过appid和secret获取access_token，该值有效期为7200秒。（Get请求）
2、自定义创建菜单，填写access_token，发送body作为菜单项Post请求生成菜单，跳转网页的菜单格式如下。
代码语言：javascript复制 {
"type": "view",
"name": "我的网页",
"url": "http://www.baidu.com"
}, 第二部分、在网页中调用微信接口
微信提供了众多接口，可以在网页中调用。如调用扫码接口、支付接口、选择图片等接口。要使用这些接口，需要遵从微信开发规则生成签名，并在网页中注入签名。具体可参考微信JS-SDK说明文档，本文使用测试号调用JS-SDK接口过程如下：
一、绑定域名
1、通过ngrok内网穿透工具，将80端口映射到公网（命令：ngrok http 80)，获取域名。以下图示域名通过nat123工具获取
2、在公众测试号上配置“JS接口安全域名
二、生成签名，获取正确权限（具体请查看微信JS-SDK说明文档附录1）
1、获取access_token(有效期2小时，每日最多生成2000次）。
通过微信公众平台接口调试工具，填写appid和secret生成。
2、获取jsap_ticket值（有效期2小时，频繁刷新会导致api调用受限）
在浏览器中，输入https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi，同时替换access_token值，通过Get请求方式，浏览器会将jsapi_ticket值通过json格式显示出来，ticket字段即所需。错误请检查access_token是否过期，appid和secret是否正确。
3、获取签名，
3.1 微信JS-SDK接口文档附录6，提供了java、node、php、python不同版本的签名算法，在本文中，直接获取java版本的Sign类，添加到项目中，用户生成签名。
3.2 生成签名需要未过期的jsapi_ticket值和页面跳转的url值作为参数，该url应当与菜单跳转中的url一致，url中应该用域名而不是ip地址，否则不能获取权限。
3.3 通过签名算法，将jsapi_ticket，noncestr， timestamp，url等值存储在map中，我们需要将其动态添加到jsp页面的权限注入代码中。
三、为test.jsp网页引入js文件，注入权限
1、引入js文件，<script src=”http://res.wx.qq.com/open/js/jweixin-1.0.0.js”></script>
2、在java服务器获取Sign并将必要数据传入jsp页面
代码语言：javascript复制 @RequestMapping("/test")
private ModelAndView regist(HttpServletRequest request) throws Exception{
ModelAndView mv = new ModelAndView();
Map<String, String> sign = sign("regist");
mv.addObject("sign", sign);
mv.addObject("appid", WxConst.APP_ID);
mv.setViewName("test");
return mv;
} protected Map<String, String> sign(String action) throws Exception {
Map<String, String> map = WxConst.mMap;
String ticket = "jsapi_ticket";
String url = "http://12083054.nat123.cc/Test/wx/test";
if (null != ticket && !"".equals(url) && null != url && !"".equals(url)) {
Map<String, String> sign = Sign.sign(ticket, url);
return sign;
}
return null;
}3、test.jsp页面获取数据，并动态为jsp注入权限，并是测试号，添加了beta字段，建议开启debug调试模式，jsApiList即是微信所提供的JS-SDK接口。
代码语言：javascript复制<script type="text/javascript">
wx.config({
beta:true,
debug : true,
appId : '${appid}',
timestamp : ${sign.timestamp},
nonceStr : '${sign.nonceStr}',
signature : '${sign.signature}',
jsApiList : [ 'checkJsApi', 'onMenuShareTimeline',
'onMenuShareAppMessage', 'onMenuShareQQ',
'onMenuShareWeibo', 'onMenuShareQZone', 'hideMenuItems',
'showMenuItems', 'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem', 'translateVoice', 'startRecord',
'stopRecord', 'onVoiceRecordEnd', 'playVoice',
'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice',
'downloadVoice', 'chooseImage', 'previewImage',
'uploadImage', 'downloadImage', 'getNetworkType',
'openLocation', 'getLocation', 'hideOptionMenu',
'showOptionMenu', 'closeWindow', 'scanQRCode',
'chooseWXPay', 'openProductSpecificView', 'addCard',
'chooseCard', 'openCard' ]
})
</script/>4、在jsp页面中，使用js语法调用微信提供的接口。
代码语言：javascript复制function onScan(){
wx.ready(function(){
wx.scanQRCode({
needResult : 0,
scanType : [ "qrCode", "barCode" ],
success : function(res) {
var result = res.resultStr;
}
});
})
}5、在微信web开发工具中调试，测试签名是否通过、权限是否获取。
输入测试网址：http://12083054.nat123.cc/Test/wx/test （此处模拟跳转菜单的url，生成签名的url应当相同），查看”权限列表“
当可以获取的权限获取成功时，说明网页也可开始调用JS-SDK接口访问了。
6、未能成功获取权限、可能存在的问题
6.1、生成签名时，url参数与菜单跳转的url（本文中为微信web开发工具中输入的网址）不一致
6.2、未引入js文件：<script src=”http://res.wx.qq.com/open/js/jweixin-1.0.0.js”></script>
6.3、appid或appsecret错误。
6.4、access_token已过期，需要重新生成。
6.5、jsapi_ticket已过期，需要重新生成。
6.6、内网穿透工具连接失败，需要重新生成域名。配置所有参数
常规解决思路：1、检查生成签名的url与菜单url是否一致。2、检查接口配置信息域名是否是最新并且正确。 3、重新通过appid和secret获取access_token和jsapi_ticket值并签名（即重新配置所有参数）。
第三部分：在网页中获取用户信息（关键字段：openid，加密后的微信号，每个用户对每个公众号的openid是唯一的）
一、获取openid
方案一：通过微信服务器转发消息，获取用户openid
对于开发者模式，用户操作包括关注公众号、发送消息、点击菜单、绑定设备等操作，都将由微信服务器转发给开发者服务器，通过解析这些消息，可以获取到微信号对应的openid.
用户发送消息时，读取输入流解析的数据格式如下。
代码语言：javascript复制<xml><ToUserName><![CDATA[gh_3ec4154bc1424]]></ToUserName>
<FromUserName><![CDATA[oNAmB1M115AqndH0wluCMQQtQsJog]]></FromUserName>
<CreateTime>1504950429</CreateTime>
<MsgType><![CDATA[text]]></MsgType>
<Content><![CDATA[滚滚长江东逝水]]></Content>
<MsgId>6463712875121877522</MsgId>
</xml>其中，FromUserName字段，即为所需要的openid. 然而，由于用户数据由微信服务器转发给开发者服务器，该openid只能在接收微信服务的方法（开发都接口信息配置中的方法）中可获取此值。值得注意的是，该方法与开发者的网页并非处于同一会话中，是无法从会话中传递数据给开发者网页的。因此在网页开发过程上，不建议使用此方法获取openid提供给网页使用。
方案二：微信网页授权获取openid，即Oauth技术.
1、给微信测试号添加网页授权域名
在测试号平台的体验接口权限下，选择”网页账号“修改域名。
2、用户同意授权，获取code。（具体参考微信技术文档->微信网页授权部分）
在用户跳转页面中，将菜单跳转url修改为：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3efbcdb7f6c647b7&redirect_uri=http://13bbb09b.ngrok.io/Test/wx/test&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect
其中appid表示公众号的appid；redicrect_uri为菜单项需要跳转的网页；scope可选择snsapi_base或snsapi_userinfo，state可填写a-zA-Z0-9的参数值。
3、检测该链接的正确合法性。
在微信web开发者工具中，输入上述url修改后的值。如果参数正确，调试界面显示如下：
出现错误时，需针对错误提示进行修改。容易出错点：OAuth授权域名和跳转的url不一致或未配置。
4、在redirect_uri中获取授权获得的信息，关键参数code参数
代码语言：javascript复制String code = request.getParameter("code")5、通过code参数换取网页授权access_token，该值与基础支持中的access_token有差别。同时获取到当前用户的openid值。接口方法如下
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
返回json数据如下：
代码语言：javascript复制{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" } 通过以上方法便获取到了用户的openid值，避免了接口配置信息服务器，与网页开发服务器之间数据传递的麻烦。
二、根据openid获取用户信息
接口：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
其中：access_token为授权过程中，通过code获取的值，不能是基础支持中的值。以下代码未处理空指针异常。用户信息以键值对的形式保存在userinfo_jsonObj中。
代码语言：javascript复制 @RequestMapping("/test")
private ModelAndView test() throws Exception{
ModelAndView mv = new ModelAndView();
//1、调用微信授权界面，拿到code
HttpServletRequest request = getRequest();
String code = request.getParameter("code");
//2、使用code获取access_token，此token与基础支持的token不同。有效期2小时
String access_token_url_str = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" WxConst.APP_ID "&secret=" WxConst.APP_SECRET "&code=" code "&grant_type=authorization_code";
String access_token_json = WxRequest.doGet(new URL(access_token_url_str));
JSONObject access_token_jsonObj = JSONObject.fromObject(access_token_json);
String access_token = access_token_jsonObj.getString("access_token");
String openid = access_token_jsonObj.getString("openid");
//3、根据openid获取用户信息
String userinfo_url_str = "https://api.weixin.qq.com/sns/userinfo?access_token=" access_token "&openid=" openid;
String userinfo_json = WxRequest.doGet(new URL(userinfo_url_str));
JSONObject userinfo_jsonObj = JSONObject.fromObject(userinfo_json);
mv.setViewName("test");
return mv;
} public static String doGet(URL url) throws Exception{
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
StringBuffer sb = new StringBuffer();
String line = "";
BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
if (connection.getResponseCode() == HttpURLConnection.HTTP_OK) {
while((line = reader.readLine()) != null){
sb.append(line);
}
}
System.out.println(sb.toString());
reader.close();
connection.disconnect();
return sb.toString();
}最终获取到的用户信息json数据格式如下：
代码语言：javascript复制{ "openid":" OPENID",
" nickname": NICKNAME,
"sex":"1",
"province":"PROVINCE"
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
} 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141042.html原文链接：https://javaforall.cn
