在Vue页面中显示微信微信登录二维码

  1. 在vue项目中的index.html中引入微信登录js文件 （在index.html中的具体位置，测试时是放在html标签中）

    <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

  2. 在需要显示微信登录二维码的vue页面中的methods中创建添加一个函数，并且在mounted中调用该函数，并且还得在template标签中创建一个div，来放置显示的二维码图片（vue的基础语法）

    login() {
      var obj = new WxLogin({
        self_redirect: false,
        id: "login_container",
        appid: "appid",              //填入你自己的appid
        scope: "snsapi_login",
        redirect_uri: "uri",         //填入微信平台申请时的回调地址
        state: 'A123DC35165464',
        style: "black",
        href: ""
      });
    }
    <div id="login_container"></div>

实现扫码登录

实现在页面显示微信登录二维码后再开始此部分，下面以我自己的情况进行说明

  1. 配置nginx 

    redirect_uri: "http://localhost:8160/api/wxLogin",

    我自己填写的回调地址如上图所示，那么我就该编写/api/wxLogin的访问接口，处理微信请求。redirect_uri就是接收微信下发的code和state，而这里的redirect_uri又得是微信开放平台提交审核时填写的redirect_uri，如果和你的后端服务的ip和端口不一致的话，可以使用nginx进行代理。我自己的后端服务是在本地运行测试，但端口号不是8160，所以对nginx进行配置，添加监听端口8160

    http{
        #...
        upstream test{
           	server 127.0.0.1:9090 weight=10;    #我的后端端口是9090   weight是负载权重 不用管
        } 
      
    	server {
    		listen 8160;               #监听8160端口
    		server_name localhost;
            location /api {       #访问路径为api开头   ip:port/xxx   api开头是指xxx的位置是api
                proxy_pass http://test;   #代理到目标地址  test是上面那个
            } 
            #http://localhost:8160/api/wxLogin经过代理后变成http://localhost:9090/api/wxLogin
        }
        #...
    }

  2. 编写Controller

    @Controller
    @Slf4j
    public class WxLoginController {

        @GetMapping("/api/wxLogin")
        public String wxLogin(String code, String state) throws IOException {
            log.debug("微信扫码回调,code:{},state:{}", code, state);
            return "redirect:http://localhost:8080/userRegister";
        }
    }

    编写一个最简单的进行测试即可。这个接口的参数必须是和我代码中的一样，可以参考微信开放平台的说明。返回的是一个字符串，但其实是让前端进行重定向，也就是用户扫码授权后，后端完成一系列操作，如获取用户信息，添加数据库。操作完成后，让页面进行跳转，如进入系统主页等。注意别用@RestController，不然返回就真是一个普通字符串了。

  3. 关于获取access_token，以及根据access_token获取用户信息的操作，查看微信开发平台的说明即可，后端代码的实现主要是使用RestTamplate对微信开发平台上给出的url进行访问，获取返回值 ，提取用户信息即可