微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解


Posted in Javascript onDecember 08, 2016

微信公众号开发 自定义菜单

请先读完本文再进行配置开发

请先前往微信平台开发者文档阅读“网页授权获取用户基本信息”的接口说明

在微信公众账号开发中,往往有定义一个菜单,然后用户点击该菜单就进入用户个人中心的功能,通常应用于各个公众账号中的会员服务。

如何在微信自定义菜单中将用户导航到个人中心页面呢?

首选需要通过用户点击获取用户openid,而通过用户的点击跳转获取用户openid就必须在菜单中动态绑定用户的openid,或者在菜单的跳转URL中填写微信提供的链接,官方给了两个链接类型

一种是Scope为snsapi_base的链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

另一种是Scope为snsapi_userinfo的链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

这两种链接的区别如下

应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)

网上很多说法是将链接的url直接作为微信自定义菜单中view类型中的url(在填写是url时需要配置网页授权回调域名和appid),本人试了一下这种做法然而不能成功

{ "type":"view", "name":"会员中心", "url":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=你配置接收微信认证的地址?response_type=code&scope=snsapi_base&state=1#wechat_redirect" },

返回结果是创建菜单失败

创建菜单失败 errcode:{40033} errmsg:{invalid charset. please check your request, if include \uxxxx will create fail! hint: [91..gA0792vr23]}

我试了一下将后面的地址进行urlEncode,还是同样的错误。

后来我想了一个办法

在自定义菜单中填写自己的url,在填写的url中将用户重定向到snsapi_base的url中,然后再在snsapi_base中配置获取用户openid以及用户其他信息,最后跳转到一个页面,也就是通常的会员中心页面。

流程如下

微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解

请看代码

{ "type":"view",

"name":"会员中心",

"url":"http://配置的网址/redirect"}

其中通过url将用户跳转到

http://配置的网址/redirect

然后在处理方法中调用一次重定向即可

//类上的配置
@Controller
@RequestMapping("/wechat")
public class WeChatController{
  @RequestMapping(value = "/redirect", method = RequestMethod.GET)
  public String weixinRedirect(HttpServletRequest request, HttpServletResponse response) {
    return "redirect:https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=你的服务器处理地址?response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    }
}

服务器会将微信认证 跳转到你的服务器处理地址,也就是上面

redirect_uri=你的服务器处理地址中的地址

这里配置为

你的服务器地址/oauth

代码如下

@RequestMapping(value = "/oauth", method = RequestMethod.GET)
  public String weixinOAuth(HttpServletRequest request, HttpServletResponse response, Model model) {
    //得到code
    String CODE = request.getParameter("code");
    String APPID = "你的APPID";
    String SECRET = "你的SECRET";
    //换取access_token 其中包含了openid
    String URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code".replace("APPID", APPID).replace("SECRET", SECRET).replace("CODE", CODE);
    //URLConnectionHelper是一个模拟发送http请求的类
    String jsonStr = URLConnectionHelper.sendGet(URL);
    //System.out.println(jsonStr);
    //out.print(jsonStr);
    JSONObject jsonObj = new JSONObject(jsonStr);
    String openid = jsonObj.get("openid").toString();
    //有了用户的opendi就可以的到用户的信息了
    //地址为https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
    //得到用户信息之后返回到一个页面
    model.addAttribute("user", wechatUser);
    return "vip/userInfo";
  }

效果如下

微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解

微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解

而且这种方式当用户用其他浏览器打开时,会出错,保证了只能在微信中使用,保障了安全性。而且地址栏不会有其他用户个人信息的暴露。

微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解

如有疑问,可以查看官网,谢谢大家的阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
vue通过点击事件读取音频文件的方法
May 30 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 #Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 #Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 #Javascript
微信公众号 摇一摇周边功能开发
Dec 08 #Javascript
Vue概念及常见命令介绍(1)
Dec 08 #Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 #Javascript
jquery二级目录选中当前页的css样式
Dec 08 #Javascript
You might like
PHP函数utf8转gb2312编码
2006/12/21 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Smarty模板配置实例简析
2019/07/20 PHP
用js来解决ajax读取页面乱码
2010/11/28 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python反射的用法实例分析
2018/02/11 Python
python 输出所有大小写字母的方法
2019/01/02 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
印度服装购物网站:Limeroad
2018/09/26 全球购物
学习全国两会精神心得体会范文
2014/03/17 职场文书
小学生操行评语
2014/04/22 职场文书
教师对学生的评语
2014/04/28 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
社区活动总结
2015/02/04 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript