微信小程序的登录流程-登录与静默登录

 

1. 首先通过 uni.getProvider 获取到服务的供应商，调用 API 接口时需要指定service的参数为  'weixin' ，在success的回调函数中对登录的流程做处理。

2. 通过调用 uni.login 获取到所需要的参数code，再通过 uni.getUserProfile 获取微信用户的基本信息，这个 API 需要指定一个参数为 desc ：这个参数是需要通知给微信服务器的，在 success 的回调函数中获取到微信用户的所有信息，并且将微信用户的个人信息通过 uni.setStoreageSync 存储起来。

3. 最后调用开发者服务器 uni.request ，传递相应的参数，url 路径，data: appid , secret , js_code , grant_type , 这些参数根据开发者的基本资料来完善即可。

操作流程如下：

<template>
  <view>
    <button class="btn" open-type="getUserInfo" @click="getUserInfo">鉴权登录</button>
  </view>
</template>

<script setup lang="ts">
// 获取openid和session_key
uni.getProvider({
  service: 'oauth',
  success: (res) => {
    if (res.provider.includes('weixin')) {
      uni.login({
        success: (LoginRes) => {
          // 开发者服务器
          uni.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code',
            data: {
              appid: appid,
              secret: secret,
              js_code: code,
              grant_type: 'authorization_code',
            },
            success(res) {
              console.log('res', res)
            },
          })
        },
      })
    } else {
      return uni.showToast({
        title: '请求错误',
        icon: 'error',
      })
    }
  },
  fail: (err) => {
    console.log('err', err)
  },
})

// 获取用户信息
// 获取微信用户的基本信息
// 获取用户信息
const getUserInfo = () => {
  uni.getUserProfile({
    desc: '用于完善资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res) => {
      // console.log('getUserProfile', res.userInfo);
      uni.setStorageSync('userInfo', res.userInfo)
      uni.setStorageSync('hasUserInfo', true)
      console.log(res)
    },
    fail: (err) => {
      console.log('err', err)
    },
  })
}
</script>

总结一下遇到的bug：

1. 根据官方文档给出的事件 @getuserinfo 并不能获取得到微信用户的个人信息，需要将 @getuserinfo 事件改为 @click 的点击事件才可以实现。

2. 在调用开发者服务器的时候，需要调用 uni.request 这个API，并不能直接调用自己封装的请求，否则两者会产生冲突（http / https），我们需要调用官方提供的 API 接口才有实现后台所需要的openid和session_key这两个参数。