您现在的位置是:主页 > Web前端技术 > Web前端技术

如何实现uni-app微信小程序授权登录开发技术

IDCBT2022-01-05服务器技术人已围观

简介小编给大家分享一下如何实现uni-app微信小程序授权登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了

小编给大家分享一下如何实现uni-app微信小程序授权登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

一、appID相关申请和配置1. appid获取方式

登录微信公众平台

官网链接:https://mp.weixin.qq.com/

第一次需要小伙伴们点击注册按钮,进行注册,如果有账号,直接扫描登录即可

官网小程序链接:

2. appID配置

在manifest.json中输入申请的微信小程序id

二、获取用户基础数据

这里给小伙伴们演示二种api

2.1. 获取用户信息

可以使用uni.getUserProfile请求用户授权获取用户信息, 也可以使用uni.getUserInfo获取

授权成功后获取到的用户信息在userInfo中:

页面部分:

  <button class="login-btn" type="primary" @click="getUserInfo">
        微信用户一键登录
      </button>

js部分:

 methods: {
    getUserInfo() {
      uni.getUserInfo({
        provider: 'weixin',
        success: (res) => {
          console.log('getUserInfo', res);
        },
      });
    },
   }

获取的用户基础数据(无openid=》微信用户唯一标识)

2.2. 获取用户信息2

可以使用uni.getUserInfo请求用户授权获取用户信息

页面一样,js部分:

   getUserInfo() {
      uni.getUserProfile({
        desc: '登录后可同步数据',
        lang: 'zh_CN',
        success: (res) => {
          console.log('getUserProfile', res);
        },
      });
    },

获取的用户基础数据(无openid=》微信用户唯一标识)

总结:uni.getUserProfile和uni.getUserInfo 二个api获取的用户数据基本一样,都无openid=》微信用户唯一标识。

三、调用登录api3.1. 登录api

使用uni.login方法,provider参数输入&rsquo;weixin&rsquo;,成功的返回值中如果errMsg=“login:ok” 代表成功,
微信小程序端会返回一个code字符串

标签:

很赞哦! ()

本栏推荐