h5 obtains WeChat authorized login

1. Determine whether there is a code --- no

Jump to WeChat official website

For the parameters in the URL, refer to the official website of the WeChat public platform - web page authorization | WeChat Open Documentation (qq.com)

    getCode() {         //微信网页授权返回code
      let wx_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx29bc7e1d33d38e7f&redirect_uri=https%3A%2F%2Flearn-card.cxkey.cn&response_type=code&scope=snsapi_userinfo#wechat_redirect'
      window.location.href = wx_url;
    },

The official obtains the information in your WeChat and then splices the user's code to the back of your route

ps: After success, it will automatically return to your route and return code

2. Then go back to the route to judge whether there is a code -- yes

Call the backend interface to log in|register

Full code:

<script>
import { getCertificateInfoList, deleteCertificateInfoList, get_wechat, register, wechat_login } from '@/api/index.js'
import d from '@/utils/d.js'
import axios from 'axios'
import { Notify } from 'vant';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      wechatInfo: null,
      userid: 0,
      dd: 'dd',
      all_list:null,
      allh: 100,
      CertificatePic: require('../assets/1.png')
    }
  },
  methods: {
    toThree(item) {
      console.log(item,'item');
      localStorage.setItem('currentCer',JSON.stringify(item))
      this.$router.push('/change')
    },
    getData() {
      let obj
      if(localStorage.getItem('userid')){
        obj={ pageSize: 10, page: 1, status: 2 ,account_id:Number(localStorage.getItem('userid'))}
      }else{
        obj={ pageSize: 10, page: 1, status: 2 }
      }
      getCertificateInfoList(d.encryptByDES(JSON.stringify(obj))).then(res => {
        if(res.data.code==0){
          this.all_list=JSON.parse(d.decryptByDES(res.data.data.list));
        console.log( this.all_list)

          this.all_list.forEach((item,index)=>{
            console.log(item,index);
            if(index%2==0 || index==0){
              this.mainlist.push(item)
            }else{
              this.mainlist1.push(item)

            }
          })
        }else{
           console.log(res.data.msg,'getCertificateInfoList')
        }
       
      })
    },
    delData() {
      deleteCertificateInfoList().then(res => {
        console.log(res, 'deleteCertificateInfoList')
      })
    },
    getCode() {         //微信网页授权返回code
      // alert('获取code')
      let wx_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx29bc7e1d33d38e7f&redirect_uri=https%3A%2F%2Flearn-card.cxkey.cn&response_type=code&scope=snsapi_userinfo#wechat_redirect'
      window.location.href = wx_url;
    },
    wechat_login(weixin_id) {    //登录
      this.dd = weixin_id
      wechat_login(d.encryptByDES(JSON.stringify({ weixin_id }))).then(res => {
        console.log(res, res.data.msg, 'login')
        if (res.data.code != 0) {   //没有此用户去注册并缓存
          this.register(this.wechatInfo.nickname, this.wechatInfo.headimgurl, this.wechatInfo.openid);
        } else {    //有此用户缓存
          let loginUser = JSON.parse(d.decryptByDES(res.data.data))
          let loginInfo = { user_name: loginUser.user_name, weixin_id: loginUser.weixin_id, avatar: loginUser.avatar ,phone:loginUser.student_phone,sex:loginUser.sex}
          console.log(loginUser.id, loginInfo)
          localStorage.setItem('userid', loginUser.id)
          localStorage.setItem('userinfo',JSON.stringify(loginInfo))
        }

      })
    },
    register(user_name, avatar, weixin_id) {    //注册
      console.log({ user_name, avatar, weixin_id }, 'register1111')
      register(d.encryptByDES(JSON.stringify({ user_name, avatar, weixin_id }))).then(res => {
        console.log(res, { user_name, avatar, weixin_id }, 'register')
        let loginUser = JSON.parse(d.decryptByDES(res.data.data))
        let loginInfo = { user_name: loginUser.user_name, weixin_id: loginUser.weixin_id, avatar: loginUser.avatar,phone:loginUser.student_phone,sex:loginUser.sex }
        console.log(loginUser.id, loginInfo)
        localStorage.setItem('userid', loginUser.id)
        localStorage.setItem('userinfo', JSON.stringify(loginInfo))
      })
    },
    get_wechat(wx_code) {                //获取微信用户注册所需的字段
      get_wechat({ wx_code }).then(r => {
        this.wechatInfo = r.data.data;
        console.log(this.wechatInfo, wx_code, r, 'get_wechat')
        this.wechat_login(this.wechatInfo.openid)   //调用登录接口判断是否已经注册过+缓存用户信息
      })
    },
  },
  mounted() {
    // this.wechat_login('onUJe1Ly962DUjlv-XET9Y1HTglI')   //测试用，因为电脑上没法授权微信所以获取不到code
    this.getData()
    this.$nextTick(() => {
      particlesJS.load('particles', '../../static/app.json');
    })
    if (!localStorage.getItem('userid')) {//没有userid未登录
      if (!this.$route.query.code) {  //判断现在这个页面url是否有code---没有---调用微信网页授权获取code
        this.getCode();
      } else {                        //判断现在这个页面url是否有code---有---并且保存起来再调用接口
        this.get_wechat(this.$route.query.code)
      }
    } else {//有userid已经登录
      // alert('有userid')
    }
  },
}
</script>