微信扫描PC端二维码跳转到小程序确认登录通过WebSocket来获取用户信息达到PC端登录

 需求：

在pc端获取后端给的token值来生产二维码（这里后端给了我两个url：一个是二维码url,一个是ws的 url），用微信扫描二维码跳转到小程序写的确定登录页面（进行确定）；然后在PC端使用WebSocket来达到获取用户信息来确认登录并跳转到首页。

最最最开始可以先看一下，一位大佬发给我的原型图解释：

 一、首先需要去配置微信公众平台

微信官方文档解释：

https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html

1.登陆你的小程序后台-设置-开发设置-最下面的扫普通链接二维码打开小程序-点击启用(目前暂不支持个人申请的小程序)

 

详细的可以查看官方文档。。。

二、编写PC端页面（二维码生成）

简单的先生成一个二维码（可以参考我之前的博客详细说明）

主要的js代码：

  import QRCode from 'qrcodejs2';
export default {
        name: "qrCode",
      data() {
        return {
            url:'http:192.........'
        }
      },
 mounted: function () {
        this.$nextTick(function () {
          this.bindQRCode();
        })
}
 //生成二维码
        bindQRCode: function () {
          new QRCode(this.$refs.qrCodeDiv, {
            text: this.url+'?token=12345',    
//二维码的链接，this.url是你在微信公众平台设置的二维码规则，taken测试可以写死也可以用获取到的；最开始你可以用百度的链接来测试一下
            width: 200,
            height: 200,
            colorDark: "#333333", //二维码颜色
            colorLight: "#ffffff", //二维码背景色
            correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
          })
        },
}

 

主要的是webSocket的连接，js代码：

initWebSocket() {
            if ("WebSocket" in window) {
              var ws=new WebSocket("ws://你的接口url/pc/websocket/12345")
     //ws://后端接口+你获取到的ws的url（后端会写一个接口给你，在该接口获取二维码url和ws的url）
              ws.onopen = function () {
                ws.send("start a websocket");
              };
              ws.onmessage = function (evt) {
                this.userInfo = evt.data;
                // 后台返回了json字符串，内部包含用户信息
                console.log('user--->',evt.data);
                if(this.userInfo!=null){
                  console.log('登陆成功');
                }
              };
              ws.onclose = function () {
                console.log("close websocket");
              };
            } else {
              console.log("not support websocket.");
            }
          },

（这里就可以获得微信小程序页面触发的接口数据，例如：确定登录页）

点击确定登录按钮，就会触发登录接口，在这之前你肯定要先获取小程序的用户信息，之前肯定是获取过的了。

小程序代码：

userInfoData(){ //获取登录用户信息
    wx.login({
      success: res => {
        if (res.code) {
          //发送 res.code 到后台换取 openId, sessionKey, unionId
          wx.request({
            url: getApp().globalData.baseUrl + "/wechat/user/login",
            data: {
              code: res.code
            },
            method: "GET",
            success: res1 => {
              if (!!res1.data.object.icon) {
                let userInfo = res1.data.object
                let nickname = res1.data.object.nickname
                let weixinId = res1.data.object.weixinId
                this.setData({
                  userInfo,
                  nickname,
                  weixinId,
                })
              }
              console.log(this.data.userInfo)
            },
            fail: res => {
              wx.showModal({
                title: '失败',
                content: '登录失败:' + JSON.stringify(res) + ',请退出重试',
                showCancel: false
              })
            }
          })
        } else {
          console.log('获取用户登录态失败！' + res.errMsg + ',请退出重试')
        }
      }
    })    
  },

 登录按钮触发事件：

toLogin(){
    wx.request({
      url: 'url/pc/login?token=12345',
      header: { //这里写你借口返回的数据是什么类型，这里就体现了微信小程序的强大，直接给你解析数据，再也不用去寻找各种方法去解析json，xml等数据了
        'Content-Type': 'application/json'
      },
      method: 'POST',
      data: {//这里写你要请求的参数
        icon: this.data.userInfo.icon,
        nickname: this.data.nickname,
        weixinId: this.data.weixinId,
        token: wx.getStorageSync('userInfo').token   //这里是你app.js用户登录的用户信息
      },
      success: function (res) {
        //这里就是请求成功后，进行一些函数操作
        console.log(res.data)
        if(res.data.code=="200"){
          wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 2000
          })
          wx.switchTab({
            url: '/pages/List/index',
          })
        }
      },
      fail: function () {
        wx.showToast({
          title: '失败，请重新扫描二维码',
          icon: 'none',
          duration: 2000
        })
        wx.switchTab({
          url: '/pages/List/index',
        })
      }
    })
  }

 

 这样你扫PC端的二维码就会跳转到小程序确定登录页面，点击确定按钮，PC端这边就能通过webSocket的方法来获取到用户信息。。。