uniapp实战(三) -- 小程序微信登录

小程序微信登录的核心是围绕着openId来的，对于每个用户在这个小程序中都有一个唯一的openId来标识用户的身份，但是出于安全考虑，小程序是无法获得openId的，只能获得code,把这个code传给后台，后台根据code,appid,appsecret去获取openid,然后用这个openid来跟用户进行绑定，这样通过code-openid-用户信息的方式，小程序只需要传给后台code就能获取到用户的信息了。

第一步，获取微信code，使用code登录

可以通过调用uni.login获取微信code,然后调用后台接口传递code,如果调用成功则跳转到首页，失败则跳转到注册页

由于uni.login不是promise的，我们先来个封装

const uniUtils = {
    login(data = {provider: "weixin"}) {
        return new Promise((resolve, reject) => {
            uni.login({
                ...data,
                success: function (resp) {
                    resolve(resp);
                },
                fail: function (e) {
                    reject(e);
                }
            })
        });
    },
    getUserInfo(data = {provider: "weixin"}) {
        return new Promise((resolve, reject) => {
            uni.getUserInfo({
                ...data,
                success: function (resp) {
                    resolve(resp)
                },
                fail: function (err) {
                    reject(err)
                }
            });
        })
    }
}

export default uniUtils

 然后在main.js里面引入下就能直接用了

import utils from "./utils";

Vue.prototype.$utils = utils

获取微信code,调用后台接口

    login: function () {
      this.$utils.uniUtils.login().then(async resp => {
        try {
          let code = resp.code
          //通过微信code登录
          const res = await this.$api.post({
            url: 'api/public/wxLogin',
            data: {code}
          })
          //把用户信息放入vuex中
          this.$store.commit('user/SET_USER_INFO', res.data)
          //跳转到index页面
          uni.switchTab({
            url: "/pages/index/index"
          })
        } catch (e) {
          console.error(e)
          //状态码50001表示未绑定
          if (e.status == 50001) {
            uni.showToast({
              title: '请先绑定账号',
              icon: 'none'
            });
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/register/register'
              })
            }, 1500)
          }
        }
      })
    }

第二步，如果未绑定，则去绑定账号

    register: function () {
      //获取code
      this.$utils.uniUtils.login().then(async resp => {
        const {userInfo} = await this.$utils.uniUtils.getUserInfo()
        console.log(userInfo)
        const bindRes = await this.$api.post({
          url: '/api/public/bindUser',
          data: {
            ...this.form,
            avatar: userInfo.avatarUrl,
            nickname: userInfo.nickName,
            code: resp.code
          }
        })
        this.$store.commit('user/SET_USER_INFO', bindRes.data)
        //跳转到index页面
        uni.switchTab({
          url: "/pages/index/index"
        })
      })
    }