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


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 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
浅析return false的正确使用
Nov 04 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
vue 动态修改a标签的样式的方法
Jan 18 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
Yii框架form表单用法实例
2014/12/04 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Vue2路由动画效果的实现代码
2017/07/10 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python实时分析日志的一个小脚本分享
2017/05/07 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Django ORM filter() 的运用详解
2020/05/14 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
养牛场项目建议书
2014/05/13 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
Python基础之数据结构详解
2021/04/28 Python
Ajax实现异步加载数据
2021/11/17 Javascript