公众号开发（八）页面开发

以你之姓@ 2022-01-31 00:17 288阅读 0赞

如现在实现这样的功能，公众号下面有一个按钮，'点我绑定'。绑定页面显示当前用户的openId和微信昵称，并检测当前微信用户有没有绑定，没有则显示绑定form，如果已经绑定则提示已经绑定的userId，同时展示解绑按钮。为简单起见，这里前端部署和后端部署放在一块，没有做前后端分离部署。

一、准备工作：

1、开启natapp映射，

![20190520152218651.png][]

2、后面需要根据authcode获取openId，所以需要开启认证：在微信公众号后台

[https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index][https_mp.weixin.qq.com_debug_cgi-bin_sandboxinfo_action_showinfo_t_sandbox_index]找到权限

![20190520152307592.png][]

如我：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]

授权回调域名配置规范为全域名并且不带http，这样我就可以访问该域名下的所有页面。

3、数据库

微信-绑定账号记录表：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 1][]

这个表记录用户的绑定操作，在绑定页面， 将openId与用户输入的userId记录。解绑则删除该条记录。

二、后台：

application.properties：

server.port = 8080
    app.id =xxx
    app.secret = xxxxxx
    
    server.context-path=/wechat
    
    
    #时间格式化
    spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
    #时区设置
    spring.jackson.time-zone=Asia/Chongqing
     
    #以下为mybatis相关配置
    #springboot默认读取spring.datasource.xxx属性，初始化DataSource并自动注入sqlSessionFactory
    #spring.datasource.driverClassName=com.mysql.jdbc.Driver
    spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    spring.datasource.url=jdbc:mysql://localhost:3306/wechat?useUnicode=true&characterEncoding=utf-8&useSSL=false
    spring.datasource.username=root
    spring.datasource.password=wtyy
    #mybatis.mapper-locaitons=classpath:mapper/*.xml
    
    mybatis.mapper-locations=classpath*:mapper/*Mapper.xml
    
    #返回的前缀   目录对应src/main/webapp下
    spring.mvc.view.prefix:/WEB-INF/view/
    #返回的后缀
    spring.mvc.view.suffix: .jsp

1、WechatUtil：

//重定向地址
    private static final String REDIRECT_URL = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=WECHAT_APPID&redirect_uri=URL_TO_REDIRECT&response_type=code&scope=snsapi_base&state=wtyy#wechat_redirect";
    
    	/**
         * oauthUrl，从code中获取openId
         */
     public static final String OAUTH_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=APPSECRET&code=CODE&grant_type=authorization_code";
    	
        /**
         * userInfoUrl
         */
    private static final String USERINFO_URL ="https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN";
        
    	
        //oauthcode  session
    	public static final String OAUTH_KEY = "AUTHCODE";
    
    	//openId session
    	public static final String SESSION_OPENID = "OPENID_SESSION";
    
    
    
    
    /**
    	 * 获取重定向地址
    	 * @param url 目的地址
    	 * @return 重定向地址
    	 */
    	public static String getRedirectUrl(String url,String appId) {
    		String redirectUrl = "";
    		try {
    			redirectUrl = REDIRECT_URL.replace("WECHAT_APPID", appId).replace("URL_TO_REDIRECT", URLEncoder.encode(url, "UTF-8"));
    		} catch (UnsupportedEncodingException e) {
    			e.printStackTrace();
    		}
    		return redirectUrl;
    	}
    
    	/**
    	* @Description: 从code中获取当前用户的openId
    	*/
    	public static String getWechatOpenId(String appId,String appSecret) {
    		RequestAttributes requestAttributes = RequestContextHolder.currentRequestAttributes();
            String openId = (String)requestAttributes.getAttribute(SESSION_OPENID, RequestAttributes.SCOPE_SESSION);
            String oauthCode = (String) requestAttributes.getAttribute(OAUTH_KEY, RequestAttributes.SCOPE_SESSION);
             if (openId != null) {
               return openId;
            }
            if(openId == null){
                String url = OAUTH_URL.replace("APPID", appId).replace("APPSECRET", 
                		appSecret).replace("CODE", oauthCode);
                JSONObject result = HttpsUtil.httpRequest(url, "GET", null);
                if(!result.containsKey("openid")){
                   return "";
                }
                openId = result.getString("openid");
                //增加保存openId到session中，否则在保存操作记录时需要再次获取openId
                requestAttributes.setAttribute(SESSION_OPENID, openId, RequestAttributes.SCOPE_SESSION);
            }
            return openId;
    	}
    	
    	
    	//根据openId获取用户基本信息，包括昵称等等
        public static JSONObject getWechatUserInfo(String openId,String appId,String appSecret) {
        	
        	AccessToken accessToken = getAccessToken(appId,appSecret);
        	String token = accessToken.getAccessToken();
        	String url = USERINFO_URL.replace("ACCESS_TOKEN",token ).replace("OPENID", openId);
            JSONObject result = HttpsUtil.httpRequest(url, "GET", null);
            return result;
           
        }

2、controller：

删除之前的自定义菜单，新增菜单，定义菜单类型为view，可以点击跳转。注意这里的目标地址应该是/bindUser/register/index，也就是绑定的页面，但是我们需要在这个页面里面获取openId，微信提供了根据authcode获取openId的接口，所以我们需要先获取这个authcode，这个参数需要跳转到微信的一个页面才可以获取，所以我们不能直接跳转到目标地址，需要先跳转到间接地址，由间接地址重定向到我们的目标地址。

注：在微信公众号开发中，凡是需要获取openId的接口都需要由一个间接地址（见上面WechatUtil.REDIRECT\_URL ）重定向而来，这样在目标地址中就能从参数中获取authcode，从而获取到openId。之后我们可以把openId存到session中做为全局消息。所以也不是每个需要openId的接口都需要重定向而来，一般把入口接口做个重定向，而之后的接口从session中获取就OK了。

完整的代码为：

package com.demo.wechat.controller;
    
    import java.io.UnsupportedEncodingException;
    import java.net.URLEncoder;
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpSession;
    
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Controller;
    import org.springframework.util.StringUtils;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.demo.wechat.domain.Button;
    import com.demo.wechat.domain.Message;
    import com.demo.wechat.domain.WechatMenu;
    import com.demo.wechat.util.WechatUtil;
    
    
    
    /**
     * @Description: 绑定页面
     */
    @RequestMapping("/bindUser")
    @Controller
    public class WechatBindUserController {
    
    
    	@Value(value = "${app.secret}")
    	private String appSecert;
    
    	@Value(value = "${app.id}")
    	private String appId;
    	
    	String baseUrl = "http://c5ufne.natappfree.cc/wechat";
    
    	// 自定义个人中心菜单
    	@RequestMapping("/createMenu")
    	@ResponseBody
    	public String createMenu() {
    		WechatMenu wechatMenu = new WechatMenu();
    		List<Button> buttonList = new ArrayList<>();
    		Button button = new Button();
    		button.setName("个人中心");
    
    		List<Button> subButtonList = new ArrayList<>();
    		// 注册子菜单
    		Button registerBtn = new Button();
    		registerBtn.setName("点我绑定");
    		registerBtn.setType("view");
    		registerBtn.setKey("register");
    		String registerUrl = baseUrl+"/bindUser/register/redirect";
    		registerBtn.setUrl(registerUrl);
    		subButtonList.add(registerBtn);
    
    		button.setSub_button(subButtonList);
    		buttonList.add(button);
    
    		wechatMenu.setButton(buttonList);
    		Integer res = WechatUtil.createMenu(appId, appSecert, wechatMenu);
    		return JSON.toJSONString(Message.getSuccessfulRes(res));
    	}
    	
    	//注册页面重定向（间接地址）
    	@RequestMapping("/register/redirect")
    	public String redirectIndexPage(HttpServletRequest request) {
             String url = baseUrl+"/bindUser/register/index";
    	     return "redirect:"+WechatUtil.getRedirectUrl(url, appId);
    	}
    	
    	//注册页面(目标地址)
    	@RequestMapping("/register/index")
    	public String getRegisterIndex(HttpServletRequest request, HttpSession session){
    		
    		try{
    			String oauthcode = request.getParameter("code");
    			System.out.println("code："+oauthcode);
    			session.setAttribute(WechatUtil.OAUTH_KEY, oauthcode);
    			return "register";
    			
    		}catch (Exception e) {
    			return "";
    		}
    	}
    	
    	
    	//获取昵称
    	@RequestMapping("/register/getNickName")
    	@ResponseBody
    	public String getNickName(HttpServletRequest request, HttpSession session){
    		String openId = WechatUtil.getWechatOpenId(appId,appSecert);
    		
    		if(StringUtils.isEmpty(openId)) {			
    			return "请在微信内打开";
    		}
    		session.setAttribute(WechatUtil.SESSION_OPENID, openId);
    		System.out.println("openId:"+openId);
    		JSONObject result = WechatUtil.getWechatUserInfo(openId,appId,appSecert);
    		String nickname = result.getString("nickname");
    		return nickname;
    	}
    	
    }

3、前端：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 2][]

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../assets/js/jquery-3.2.1.min.js"></script>
    <script>
    	$(function(){
    		
    		$.post("/wechat/bindUser/register/getNickName",function(data){
    			$("#name").html(data)
    		})
    	}
     )
    </script>
    </head>
    </head>
    <body>
    hello 
    <div id="name"></div>
    </body>
    </html>

[20190520152218651.png]: /images/20220131/94bc22bf5d8140ae8e4d8f5c68ba5670.png
[https_mp.weixin.qq.com_debug_cgi-bin_sandboxinfo_action_showinfo_t_sandbox_index]: https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
[20190520152307592.png]: /images/20220131/791dbd86f417419f81e539c780556548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: /images/20220131/4a07e47dc3d64ce7a707600673ab7dd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 1]: /images/20220131/26a0d48b7f5544e998a3b265742948f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 2]: /images/20220131/b864634b39f9485cb560ded438df6608.png