微信公众号开发——2、微信网页开发

第一部分、为公众号菜单嵌入网页

一、关键参考文档

微信JS-SDK说明文档。

二、编辑模式嵌入网页

在公众号平台下，自定义菜单，添加菜单，并选择菜单内容跳转到指定页面地址即可（需认证后方可添加页面地址，个人账号暂不支持认证）。

三、开发者模式嵌入网页（通过微信公众平台接口调试工具动态生成菜单）

1、基础支持中，通过appid和secret获取access_token，该值有效期为7200秒。（Get请求）

2、自定义创建菜单，填写access_token，发送body作为菜单项Post请求生成菜单，跳转网页的菜单格式如下。

       {"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页面

	@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接口。

<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开发工具中调试，测试签名是否通过、权限是否获取。

输入测试网址：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.

用户发送消息时，读取输入流解析的数据格式如下。

<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参数

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数据如下：

{ "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中。

	@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.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数据格式如下：

{    "openid":" OPENID",  " nickname": NICKNAME,   "sex":"1",   "province":"PROVINCE"   "city":"CITY",   "country":"COUNTRY",    "headimgurl":    "",  
"privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],    "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" 
}