uniapp项目 App端实现微信登录、QQ登录

本文是基于打包成安卓App的前提。

一、注意事项

1、HBuilderX配置manifest.json，如下图：

 其中，微信登录填写的appid、appsecret需要到微信开放平台（微信开放平台）申请移动应用（见此文：微信开放平台申请移动应用），审核通过即可获取appid和appsecret。值得一提的是，申请过程中可能会不知道应用签名和应用包名怎么获取，获取方法见此本：获取微信开放平台申请移动应用时的应用签名和应用包名

QQ登录填写的appid需要到腾讯开放平台（腾讯开放平台 OPEN.QQ.COM）申请移动应用，审核通过即可获取appid。

两者的IOS平台通用链接点击自动生成按提示生成即可。

2、打包App填写信息

打包生成App是在写完代码后测试进行的（测试可使用自定义调试基座打包进行真机测试）。按规则填写好Android包名，选择使用自有证书，根据事先生成的证书完善相关信息，开始打包。

需要注意的是：此处的Android包名一定要和在微信开放平台申请移动应用时填写的应用包名保持一致！

二、核心代码

1、App端微信登录

uni.login({
  provider: 'weixin',
  success: (res) => {
    console.log(111,res.authResult)
    uni.getUserInfo({
      provider: 'weixin',
      success: (infoRes) => {
        // console.log(infoRes)
        let userInfo = infoRes.userInfo
        console.log('openid:',userInfo.openId,'unionid:',userInfo.unionId)
        uni.showLoading({ title: "登录中", mask: true })
        // 利用微信授权获取到的用户信息 请求登录
        ......
      }
    })
  },
  fail: (err) => {
    console.log(33, err)
  }
})

后端可以根据unionId来判断用户唯一性。

2、App端QQ登录

uni.login({
  provider: 'qq',
  success: (res) => {
    console.log(11,res)
    // console.log(res.authResult.access_token)
    // let access_token = res.authResult.access_token
    uni.getUserInfo({
      provider: 'qq',
      success: (infoRes) => {
        console.log(infoRes.userInfo)
        let userInfo = infoRes.userInfo
        uni.showLoading({ title: "登录中", mask: true })
        // 利用QQ授权获取到的用户信息 请求登录
        ......
      }
    })
  },
  fail: (err2) => {
    console.log(55, err2)
  }
})

后端可以根据unionId来判断用户唯一性。

完。记录于2021-11-10。

相关文章：获取微信开放平台申请移动应用时的应用签名和应用包名

相关文章：uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数