vuejs用APP客户端扫描PC端二维码登录

最近在做APP客户端扫描PC端二维码登录，于是记录一下实现过程，前端是vuejs，APP是IOS和安卓客户端：
1.安装QRCode，npm i QRCode --save-dev就可以了。
2.安装成功后在对应的单页面中引用import QRCode from 'qrcode',如果此时页面没有报错，说明引入成功了
3.向服务端获取qrcode字符串

  getQrcode: function () {
    this.$http.jsonp('这里是接口地址', {}).then((response) => {
      const data = response.body
      if(data.ok === 1) {
         this.qrCode = data.qrCode
         this.screenLogin() //调用生成二维码方法
      }
    })
  },

4.获取到qrcode字符串后生成二维码

  qrcodeShow: function () {
    this.qrcodeShow = true //显示二维码div
    var QRCodeDraw = new QRCode.QRCodeDraw() //创建二维码变量
    var canvas = document.getElementById('qrcode') //获取div
    //开始生产二维码
    QRCodeDraw.draw(canvas, 'qrcode:' + this.qrCode, {//this.qrCode是上面获取到的字符串
      width: 300,//二维码宽和高
      height: 300
    }, (err, canvas) => {
      if (err) {
        console.error(err);
      } else {
        console.info('success')
      }
    })
  },

5.html里面二维码div的写法

6.qrcodeShow是在
data () {

return {
  qrcodeShow: false //默认不可见
}

}
6.最后就是获取和发送websocket

  websocket: function() {
    var ws //定义websocket变量
    try {//使用try catch
      var _this = this //this指向
      var WS_URL = "/websocket" //websocket地址
      if (location.protocol == 'http:') {
        ws = new WebSocket("ws://"+WS_URL)
      } else {
        ws = new WebSocket("wss://"+WS_URL)
      }
      //接收服务端推送过来的信息
      ws.onmessage = function(event) {//event参数接收
          //接收到服务器推送信息并转换成json对象
          var re = JSON.parse(event.data)
          //判断action是否正确，然后执行登录方法,这里的action是和服务端约定好的参数
          if(re.action === 'qrCode') {
            _this.getLogin() //扫描成功调用登录方法
            _this.qrcodeShow = false //隐藏二维码div
          }
      }
      //发送socket给服务端判断
      ws.onopen = (event) => {
        if (this.id) {
          ws.send(JSON.stringify({
            //与服务端约定好发送这两个参数
            room: 'topic:' + this.id,
            action: 'join'
          }))
        } else if (this.qrCode) {
          ws.send(JSON.stringify({
            room: 'qrCode:' + this.qrCode,
            action: 'join'
          }))
        } else {
           ws.send(JSON.stringify({
             room: 'home',
             action: 'join'
           }))
        }
      };
    } catch (ex) {
      if (console)
          console.info(ex);
    }
  }