| 微信公众号开发 | 您所在的位置：网站首页 › 微信公众号用什么开发语言 › 微信公众号开发 |
微信公众号开发
|
第一部分、为公众号菜单嵌入网页
一、关键参考文档 微信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接口。 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' ] }) 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文件： 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" } |
【本文地址】