微信公众号开发——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文件，

2、在java服务器获取Sign并将必要数据传入jsp页面

	@RequestMapping("/test")
private ModelAndView regist(HttpServletRequest request) throws Exception{
	ModelAndView mv = new ModelAndView();
	
	Map sign = sign("regist");
	mv.addObject("sign", sign);
	mv.addObject("appid", WxConst.APP_ID);
	mv.setViewName("test");
	return mv;
}

	protected Map sign(String action) throws Exception {
	Map 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 sign = Sign.sign(ticket, url);
		return sign;
	}
	return null;
}

3、test.jsp页面获取数据，并动态为jsp注入权限，并是测试号，添加了beta字段，建议开启debug调试模式，jsApiList即是微信所提供的JS-SDK接口。


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.
用户发送消息时，读取输入流解析的数据格式如下。




1504950429





6463712875121877522

其中，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、调用微信授权界面，拿到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数据格式如下： 
{    "openid":" OPENID",  

 " nickname": NICKNAME,   

 "sex":"1",   

 "province":"PROVINCE"   

 "city":"CITY",   

 "country":"COUNTRY",    

 "headimgurl":    "",  

"privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],    

 "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" 

}

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

相关推荐