小程序基础开发（三）：授权，获取用户信息，注册，登录，简单封装request请求

最新推荐文章于 2023-04-04 14:48:20 发布

金木研-

最新推荐文章于 2023-04-04 14:48:20 发布

阅读量840

点赞数 1

分类专栏：小程序 #小程序基础开发文章标签：授权登录小程序封装request 获取用户信息 openid unionid

本文链接：https://blog.csdn.net/qq_42050067/article/details/101920012

版权

本文介绍了小程序的基础开发流程，包括授权检测与处理、获取用户信息（openid, unionid等）、用户注册与登录实现，以及request请求的简单封装。在授权环节，详细阐述了授权页的跳转逻辑；在获取用户信息部分，讲解了如何获取openid和手机号；在注册和登录中，讨论了如何处理和存储用户数据；最后，讨论了request的封装，以适应不同接口请求需求。" 6651291,1153982,解决ORA-01591 锁定已被有问题的分配事务处理,"['数据库管理', 'Oracle', '事务处理', '错误解决']

摘要由CSDN通过智能技术生成

一，授权

1，首先在app.js里检测用户是否授权

// 查看是否授权
    wx.getSetting({
   
      success: function (res) {
   
        if (res.authSetting['scope.userInfo']) {
   
          console.log('用户已授权' + res.authSetting['scope.userInfo']);
        } 
        else {
   
          console.log('用户未授权');
          wx.navigateTo({
   
            url: '../login/login'
          })
        }
      }
    })

2，没有授权就跳到授权页（单独一个页面，需要点击open-type="getUserInfo"的按钮）

<button class="cu-btn round shadow-blur lg bg-{
   {Theme}}" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">授权登录</button>

3，拒绝授权或者授权失败，就让用户停留在授权页，成功则跳到首页

bindGetUserInfo: function (e) {
   
    if (e.detail.userInfo) {
   
      //用户按了允许授权按钮
      console.log('用户按了允许授权按钮');
      var that = this;
      wx.navigateTo({
        
        url: '../index/index'
      })
    } else {
   
      //用户按了拒绝按钮
      wx.showModal({
   
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
   
          if (res.confirm) {
   
            console.log('用户点击了“返回授权”')
          }
        }
      })
    }
  },

二，获取用户信息

1，获取openid，用户名，头像等等
在点击授权后，获取用户的信息，包括openid和unionid等等，发送给后台注册

wx: wx.getUserInfo({
   
        withCredentials: true,//开启获取私密信息
        success: function (res) {
   
          //console.log('获取成功：' + JSON.stringify(res))
          var UserInfo = JSON.stringify(res);//放入 data{},post数据的key就是UserInfo
		  //发送加密数据UserInfo
          })
        },
        fail: function (res) {
   
          console.log('获取unionid失败（组件失败）');
        },
      })

2，获取手机号
官方文档说明：

获取微信用户绑定的手机号，需先调用wx.login接口。因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API
来调用，需用 button 组件的点击来触发。
注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。
使用方法需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过
bindgetphonenumber 事件回调获取到微信服务器返回的加密数据，然后在第三方服务端结合 session_key 以及
app_id 进行解密获取手机号。代码示例 Page({ getPhoneNumber
(e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData) } }) encryptedData String 包括敏感数据在内的完整用户信息的加密数据，详细见加密数据解密算法
iv String 加密算法的初始向量，详细见加密数据解密算法 cloudID string 敏感数据对应的云
ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据，详细见云调用直接获取开放数据

三，注册

主要是数据库录入openid，其他可看情况获取，例如unionID，用户名，头像，手机等等
1，首先是post加密数据，放个获取到的UserInfo例子

{“errMsg”:“getUserInfo:ok”,“rawData”:"{“nickName”:“R”,“gender”:1,“language”:“zh_CN”,“city”:"",“province”:“Bronkhorstspruit”,“country”:“South
Africa”,“avatarUrl”:“https://wx.qlogo.cn/mmopen/vi_32/DQHC3FoaN1TYicamwQaCPANedQBJj9DbNRy5BXeBEglTSJJfA/132”}",“userInfo”:{“nickName”:“R”,“gender”:1,“language”:“zh_CN”,“city”:"",“province”:“Bronkhorstspruit”,“country”:“South
Africa”,“avatarUrl”:“https://wx.qlogo.cn/mmopen/vi_32/DQHC3FoaN1TYicaoQBJj9DbNRy5BXeBEglTSJJfA/132”},“signature”:“ad4a2f5834d1eb9774503f90”,“encryptedData”:“oiWQJPHfxXBszs0HcpwnEuztq8jYbMWvu9AUir/QdSGvgW7HxGgXc0zAkPPTweCmTto0la+nCl5qgw5EUPYwltIrNEDTQolPDzny4ySKT2u1YFaRtzimfg37g+9Ho0q3gsPBy44ApaLdqeBvMLVit/JwJViPxL