第一部分、为公众号菜单嵌入网页
一、关键参考文档
微信JS-SDK说明文档。
二、编辑模式嵌入网页
在公众号平台下，自定义菜单，添加菜单，并选择菜单内容跳转到指定页面地址即可（需认证后方可添加页面地址，个人账号暂不支持认证）。
三、开发者模式嵌入网页（通过微信公众平台接口调试工具动态生成菜单）
1、基础支持中，通过appid和secret获取access_token，该值有效期为7200秒。（Get请求）
2、自定义创建菜单，填写access_token，发送body作为菜单项Post请求生成菜单，跳转网页的菜单格式如下。
{"type": "view", "name": "我的网页", "url": ""},
第二部分、在网页中调用微信接口
微信提供了众多接口，可以在网页中调用。如调用扫码接口、支付接口、选择图片等接口。要使用这些接口，需要遵从微信开发规则生成签名，并在网页中注入签名。具体可参考微信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./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./open/js/jweixin-1.0.0.js"></script>
2、在java服务器获取Sign并将必要数据传入jsp页面
@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 = "/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接口。
<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语法调用微信提供的接口。
function onScan(){wx.ready(function(){wx.scanQRCode({needResult : 0,scanType : [ "qrCode", "barCode" ],success : function(res) {var result = res.resultStr;}});})}
5、在微信web开发工具中调试，测试签名是否通过、权限是否获取。
输入测试网址：/Test/wx/test （此处模拟跳转菜单的url，生成签名的url应当相同），查看”权限列表“
当可以获取的权限获取成功时，说明网页也可开始调用JS-SDK接口访问了。
6、未能成功获取权限、可能存在的问题
6.1、生成签名时，url参数与菜单跳转的url（本文中为微信web开发工具中输入的网址）不一致
6.2、未引入js文件：<script src="http://res./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.
用户发送消息时，读取输入流解析的数据格式如下。
<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./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参数
String code = request.getParameter("code")
5、通过code参数换取网页授权access_token，该值与基础支持中的access_token有差别。同时获取到当前用户的openid值。接口方法如下
https://api./sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
返回json数据如下：
{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" }
通过以上方法便获取到了用户的openid值，避免了接口配置信息服务器，与网页开发服务器之间数据传递的麻烦。
二、根据openid获取用户信息
接口：https://api./sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
其中：access_token为授权过程中，通过code获取的值，不能是基础支持中的值。以下代码未处理空指针异常。用户信息以键值对的形式保存在userinfo_jsonObj中。
@RequestMapping("/test")private ModelAndView test() throws Exception{ModelAndView mv = new ModelAndView();//1、调用微信授权界面，拿到codeHttpServletRequest request = getRequest();String code = request.getParameter("code");//2、使用code获取access_token，此token与基础支持的token不同。有效期2小时String access_token_url_str = "https://api./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./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数据格式如下：
{ "openid":" OPENID", " nickname": NICKNAME, "sex":"1", "province":"PROVINCE" "city":"CITY", "country":"COUNTRY", "headimgurl": "", "privilege":[ "PRIVILEGE1" "PRIVILEGE2"], "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }
