vue2微信授权登录

微信授权登录

前言

分享一下自己所遇到的问题，适合新手小白，在这里只记录前端所用到的内容,
首先你得拿到微信开放平台内创建应用的APPID，怎么拿这里就不记录了，自行去搜索

---

一、选择自己的登录方式

1.第一种是直接拼接url跳转微信的授权页面
2.第二种就是引用微信提供的[添加链接描述](http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js)将二维码引入自己的页面

说明：我用的是第二种方式授权，所以在这里记录一下第二种，也是推荐使用的一种

二、使用步骤

1.引入微信提供的wwLogin.js

代码如下（示例）：将wwLogin.js下载至本地在所使用的页面引入

import '你的路径'

2.页面使用

代码如下（示例）：在页面定义一个存放二维码的元素

<div id="wxcode"></div>//定义一个存放二维码的元素，当前id可自行设置，要和生成时id对应就可

3.生成二维码

methods：{
	 createWxQrcode() {
                // 生成微信登录二维码
                this.$nextTick(() => {
                    var obj = new WxLogin({
                          self_redirect: false,
                          id: "wxcode", // 页面显示二维码的容器id
                          appid: "你的APPID", // 微信开发者内创建应用的APPID
                          scope: "snsapi_login",
                         redirect_uri: encodeURIComponent('自己登录成功以后所进入的页面'),//当前回调的域名必须和微信开放平台授权回调域一致
                          state: "bind",
                          style: "black",
                          href：""//这个字段可设置二维码样式但是必须转base64格式 具体就不细说了，百度内容很多
                      });
                })
            }

}

4.调用方法

async mounted(){
   this.createWxQrcode(); //调用你所定义的生成方法就可以了
}

---

5.获取code

代码如下（示例）：最后一步因为我的回调地址不是当前登录页面地址，获取code的方法就得分开写

  getUrlCode(){
      var url = location.search
      this.winUrl = url
      var theRequest = new Object()
      if(url.indexOf('?') != -1){
          var str = url.substr(1)
          var strs = str.split('&')
          for(var i = 0; i < strs.length; i++){
              theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
          }
      }
      console.log(theRequest);
      return theRequest
  }

在你所用的地方获取调用地方法获取code 例如：this.getUrlCode().code

如果你的回调页面和你微信登录页面相同获取code就是第一步，先获取code，判断有无当前code，有code那就执行你有的逻辑，传给后台去获取其他参数返给你状态，如果没有code，同理就去执行没有code逻辑，获取code

总结

以上就是今天要讲的内容，本文仅仅简单介绍了微信授权登录的使用