uniapp开发微信小程序的登录功能实现

小程序的登录是必不可少的，那我们如何去实现这个功能呢

1.首先我们是需要去调用uni.getUserProfile（）去获取用户信息的，得到一些登录接口相关的一些数据

2.再去调用uni.login()这个api去获取code字段

3.结合以上这两个api获取的一些数据组合成接口所需要的参数，然后通过调用后端的接口去得到用户的token

具体实现如下

// 获取微信用户的基本信息
async getUserProfile () {
    // desc 为必填字段，用于声明获取用户个人信息后的用途，不超过 30 个字符
    const [err, res] = await uni.getUserProfile({desc: '完善用户信息'})

    // 用户拒绝授权
    if (err) return uni.$showMsg('您拒绝授权！')

    // 用户同意授权，保存用户信息到 vuex 中
    console.log(res)
    this.saveUserInfo(res.userInfo)

    // 获取登录成功后的 Token 字符串
    this.getToken(res)
}

获取token的方法

// 调用登录接口，换取永久的 token
async getToken(info) {
    // 调用微信登录接口
    const [err, res] = await uni.login()

    // 判断微信登录 uni.login() 是否调用失败
    if (err) return uni.$showMsg('微信登录失败！')

    // 准备参数对象
    const data = {
        code: res.code, // 微信登录返回的 code
        encryptedData: info.encryptedData, // 包括敏感数据在内的完整用户信息的加密数据
        iv: info.iv, // 加密算法的初始向量
        rawData: info.rawData, // 不包括敏感信息的原始数据字符串
        signature: info.signature // 用于校验用户信息
    }

    // wxfb52f2d7b2f6123a
    // 由于不是小程序开发者，可以写死一个假值进行下面流程的测试
    const { data: loginResult } = await uni.$http.post('/users/wxlogin', data)

    // 登录是否成功判断
    if (loginResult.meta.status !== 200) return uni.$showMsg('黑马优购登录失败！')
    uni.$showMsg('登录成功！')
}