租号开发

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

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

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

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

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

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

首选需要通过用户点击获取用户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"; }

效果如下

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

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

想学习微信公众号开发 难吗

微信公众号开发本质上跟公众号关系不大，本质上是开发程序，只不过是一个需要调用微信提供的接口的主要在微信中使用的程序而已，它可以是java，c++，c#,php等任何一种开发语言开发的，所以，如果你是程序开发人员，那一点都不难，如果你不是，那有两种选择，完全自学程序设计，这个难度你自己考虑，或者，你可以使用别人开源或者收费的现成的程序，这些程序就是一般所称的微信第三方平台，一般只需要在微信开发者后台简单配置后就能搭建功能强大的上上城系统或者其他功能【软橙微动力】

详解nodejs微信公众号开发——4.自动回复各种消息

上一篇文章：nodejs微信公众号开发——3.封装消息响应模块，实现了对消息接口的模块化处理，方便后期的使用，本篇文章将介绍微信公众号回复各种消息的功能实现，包括文本、图片、语音、视频、音乐、图文等。

注：感觉最近localtunnel很不稳定，测试起来比较麻烦，有条件的自己搞个云服务器吧，我比较偷懒，几继续使用localtunnel了。

1. 被动回复用户消息

当用户发送消息给公众号时（或某些特定的用户操作引发的事件推送时），会产生一个POST请求，开发者可以在响应包（Get）中返回特定XML结构，来对该消息进行响应（现支持回复文本、图片、图文、语音、视频、音乐）。发送被动响应消息是对微信服务器发过来消息的一次回复。

开发过程中如果遇到该公众号暂时无法提供服务，请稍后再试的情况，一般是由两个原因造成的：开发者在5秒内未回复任何内容 开发者回复的数据异常，非xml格式，比如JSON数据

具体的消息规则可参看微信平台开发者文档：被动回复用户消息

2. 回复消息的实现

我们之前的关注自动回复是在weixin.js里面实现的，其他的消息回复也写在这个文件里面：if(message.MsgType === 'event'){ if(message.Event === 'subscribe'){ if(message.EventKey) { console.log('扫描二维码关注：'+ message.EventKey +' '+ message.ticket); } this.body = '终于等到你，还好我没放弃'; }else if(message.Event === 'unsubscribe'){ this.body = ''; console.log(message.FromUserName + ' 悄悄地走了...'); }else if(message.Event === 'LOCATION'){ this.body = '您上报的地理位置是：'+ message.Latitude + ',' + message.Longitude; }else if(message.Event === 'CLICK'){ this.body = '您点击了菜单：'+ message.EventKey; }else if(message.Event === 'SCAN'){ this.body = '关注后扫描二维码：'+ message.Ticket; } } else if(message.MsgType === 'text'){ var content = message.Content; var reply = '你说的话：“' + content + '”，我听不懂呀'; if(content === '1'){ reply = '金刚:骷髅岛'; } else if(content === '2'){ reply = { type:'image', mediaId:'http://tu.23juqing.com/d/file/html/gndy/dyzz/2017-04-09/da9c7a64ab7df196d08b4b327ef248f2.jpg' } } else if(content === '3'){ reply = [{ title:'金刚.骷髅岛', description:'南太平洋上的神秘岛屿——骷髅岛。史上最大金刚与邪恶骷髅蜥蜴的较量。', picUrl:'http://tu.23juqing.com/d/file/html/gndy/dyzz/2017-04-09/da9c7a64ab7df196d08b4b327ef248f2.jpg', url:'http://www.piaohua.com/html/dongzuo/2017/0409/31921.html' //可下载观看喔 }]; } // ... 其他回复类型 this.body = reply; }

测试效果如图：

3.说明：

发现输入数字2并没有回复相应的图片，是不是很奇怪？我们查看一下文档：

文档中说明了MediaId属性是通过素材管理接口上传多媒体文件，得到的id，而不是我们直接给的网上图片的url链接。在图文消息中，是可以直接使用url链接的。所以我们下一步的工作就是实现素材管理的接口。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

详解nodejs微信公众号开发——1.接入微信公众号

接入微信公众号是开发的第一步，万事开头难，走好第一步，后面的路就更宽广。

1.公众平台测试帐号的使用

登录微信公众平台，由于很多开发人员并没有认证的的微信公众号，所以比较折中的方式是使用公众平台测试帐号来测试功能，其优势是能够测试微信公众号的绝大部分功能，不受认证门槛的限制。

进入测试账号管理界面：

我们需要配置接口的信息，URL和Token是微信公众平台和本地开发服务建立连接的桥梁。

微信配置好后，扫面下方的测试号二维码，即可以在手机上测试开发的功能。

2.验证公众号

一图胜千言。接入公众号时，微信公众平台需要验证开发者的身份，向开发者填写的URL发送一个GET请求,请求中包含4个参数：signature、echostr、timestamp和nonce，收到该请求，我们需要做的事情：将token、timestamp和nonce三个参数进行字典排序； 将三个字符串拼接成一个字符串进行sha1加密； 将加密后的字符串与signature进行比较，如果相同，表示这个请求来自微信，我们直接原样返回echostr的内容，接入验证成功。

3.搭建开发服务器

搭建开发服务器的方式有很多，如购买云服务器、使用花生壳、ngrok、localtunnel等。这里为了简单起见采用localtunnel。先全局方式安装localtunnel,npm install -g lt

启动ltlt --port 8080 //对外暴露8080端口，可端口号可自己随便设定

4.编写代码

好了，现在开始编写app.js的代码：'use strict' var Koa = require('koa'); var sha1 = require('sha1'); var config = { wechat:{ appID:'...', //填写你自己的appID appSecret:'...', //填写你自己的appSecret token:'...' //填写你自己的token } }; var app = new Koa(); app.use(function *(next){ var token = config.wechat.token; var signature = this.query.signature; var nonce = this.query.nonce; var timestamp = this.query.timestamp; var echostr = this.query.echostr; var str = [token,timestamp,nonce].sort().join(''); //按字典排序，拼接字符串 var sha = sha1(str); //加密 this.body = (sha === signature)? echostr + '' : 'failed'; //比较并返回结果 }); app.listen(8080);

5.配置测试公众号信息

代码编写完毕，现在开始正式配置啦。在终端中输入lt --port 8080启动localtunnel，得到对外可访问的URL:

这个URL填写到测试账号管理界面中的URL，Token字段可随意填写，方便起见，就用wemovie吧！

填写完毕，点击提交，发现验证成功，恭喜！

注:由于localtunnel不是很稳定，所以可能一开始点击提交提示的是黄条的配置失败，需要多点一两次按钮； 每次重启程序，都需要重启localtunnel获取新的URL，然后重新配置。（这就是选择简单付出的代价T_T）

到此为止，已经打开了通向微信公众号开发的大门，接下来，我们将继续探索nodejs微信公众号开发之旅。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。