微信小程序云开发授权登录的简易制作

**inevitable**

已于 2022-02-12 23:20:49 修改

阅读量1.4w

点赞数 73

分类专栏：微信小程序学习笔记文章标签：微信小程序小程序

于 2022-02-12 23:17:32 首次发布

本文链接：https://blog.csdn.net/qq_46068864/article/details/122895337

版权

微信小程序学习笔记专栏收录该内容

2 篇文章 5 订阅

订阅专栏

一、tabBar的配置

1. 新建文件夹

在app.json中添加如下代码，即可自动生成3个文件夹
在这里插入图片描述
同时在与app.json配置文件同级的目录下新建images文件夹，该文件夹用于存放一些图标，如下：

2. 新增tabBar节点

在app.json中，与windows节点同级下添加tabBar节点，配置如下：
在这里插入图片描述
配置后的效果图如下：

图标可以去阿里图标库下载

二、添加编译模式

由于登录页面要在"我的"页面中实现，所以为了方便，避免每次都从首页跳转到"我的"页面中，这里我们添加编译模式，添加步骤如下：
在这里插入图片描述

这样添加后，每次重新编译时都会率先展示"我的"页面

三、登录页面的设计

1. wxml结构

<view class="login-container">
  <image src="/images/contact-filled.png" class="contact-filled" mode="widthFix"></image>
  <button class="btn-login">一键登录</button>
  <text class="tip-text">登录后尽享更多权益</text>
</view>

2. wxss样式

page {
  background-color: #f8f8f8;
}

.login-container {
  height: 900rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* 图标的样式 */
.contact-filled {
  width: 150rpx;
  margin-bottom: 16rpx;
}

/* 登录按钮的样式 */
.btn-login {
  width: 90%;
  border-radius: 100px;
  margin: 15px 0;
  background-color: #c00000;
  color: #f8f8f8;
}

/* 按钮下方提示消息的样式 */
.tips-text {
  font-size: 12px;
  color: gray;
}

3. 导航栏样式配置

在app.jspn中将导航栏背景色和文字颜色进行修改
在这里插入图片描述

4. 效果图

在这里插入图片描述

四、云开发环境的配置

1. 新建cloud文件夹

在与pages同级的目录下新建cloud文件夹
在这里插入图片描述

2. 修改project.config.json配置

在project.config.json中添加"cloudfunctionRoot": “/cloud”
在这里插入图片描述
更改后会发现cloud文件夹图标发生了变化

3.云开发环境初始化

在app.js中的onLaunch函数中进行初始化，如下：
在这里插入图片描述

五、获取用户唯一的_openid

1. 新建云函数

在这里插入图片描述

2. 调用云函数

为了让所有页面均可获得用户openid，我们在app.js中进行全局设置，代码如下：

// app.js
App({
  onLaunch() {
    wx.cloud.init({
      //云开发环境id
      env: 'xzy-cloud-6gucjazc6ba57719'  
    }),

    //调用云函数
    wx.cloud.callFunction({
      name: 'get_openId',
      success: res => {
        //获取用户openid
        this.globalData.user_openid = res.result.openid
        console.log(this.globalData.user_openid)
      }
    })
  },
  //全局数据
  globalData: {
    //用户openid
    user_openid: '',
    //用户信息
    userInfo: null
  }
})

六、将用户信息加入数据库

1. 建表

在这里插入图片描述

2. 获取用户信息

Step1：为button按钮绑定事件
在my页面中添加绑定事件

<button class="btn-login" bindtap="login">一键登录</button>

Step2：编写绑定事件函数
在my.js中，与data平级下编写事件函数

data: {
    userInfo: null
  },

login() {
    wx.getUserProfile({
      desc: '获取用户信息',
      success: res => {
        console.log(res.userInfo)
        //设置全局用户信息
        app.globalData.userInfo = res.userInfo
        //设置局部用户信息
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  },

注意：全局设置用户信息前需在my.js中与Page平级下添加如下代码：

const app = getApp()

点击按钮获取的用户信息如下：
在这里插入图片描述

3. 用户信息不全说明

由上图可以看出用户信息中城市，国家等一些信息为空，这是因为官方对这个接口做出的调整，如下所示：
在这里插入图片描述
可参考官方调整公告

4. 其它页面获取用户信息

这里以首页为例，首先在home.js中与Page平级下添加如下代码：

const app = getApp()

然后在home.js中的onshow函数中打印用户信息
在这里插入图片描述

5. 将用户信息加入数据库

在my.js的login事件函数中继续编写信息加入数据库的代码，如下所示：

 login() {
    wx.getUserProfile({
      desc: '获取用户信息',
      success: res => {
        console.log(res.userInfo)
        var user = res.userInfo
        //设置全局用户信息
        app.globalData.userInfo = user
        //设置局部用户信息
        this.setData({
          userInfo: user
        })

        //将数据添加到数据库
        wx.cloud.database().collection('userInfo').add({
          data: {
            avatarUrl: user.avatarUrl,
            nickName: user.nickName
          },
          success: res => {
            console.log(res)
          }
        })
      }
    })
  },

点击按钮授权登录后，可以查看数据库
在这里插入图片描述

6. 解决用户重复添加问题

由于每次登录时都会执行add命令，每执行一次就会往数据库里增加一条数据，因此需要避免重复执行add指令，更改my.js中的login函数，更改如下：

  login() {
    wx.getUserProfile({
      desc: '获取用户信息',
      success: res => {
        // console.log(res.userInfo)
        var user = res.userInfo
        //设置全局用户信息
        app.globalData.userInfo = user
        //设置局部用户信息
        this.setData({
          userInfo: user
        })

        //检查之前是否已经授权登录
        wx.cloud.database().collection('userInfo').where({
          _openid: app.globalData.user_openid
        }).get({
          success: res => {
            //原先没有添加，这里添加
            if (!res.data[0]) {
              //将数据添加到数据库
              wx.cloud.database().collection('userInfo').add({
                data: {
                  avatarUrl: user.avatarUrl,
                  nickName: user.nickName
                },
                success: res => {
                  wx.showToast({
                    title: '登录成功',
                    icon: 'none'
                  })
                }
              })
            } else {
              //已经添加过了
              this.setData({
                userInfo: res.data[0]
              })
            }
          }
        })
      }
    })
  },

七、自动登录并展示用户信息

1. 查找并保存用户信息

首先在app.js的onLaunch函数中查找用户是否已经登录过了，若已经登录过，则查找用户信息并保存，app.js代码如下：

// app.js
App({
  onLaunch() {
    wx.cloud.init({
      //云开发环境id
      env: 'xzy-cloud-6gucjazc6ba57719'  
    }),

    //调用云函数
    wx.cloud.callFunction({
      name: 'get_openId',
      success: res => {
        //获取用户openid
        this.globalData.user_openid = res.result.openid
        // console.log(this.globalData.user_openid)

        //在数据库中查找用户是否已经登录过了
        wx.cloud.database().collection('userInfo').where({
          _openid: res.result.openid
        }).get({
          success: result => {
            this.globalData.userInfo = result.data[0]
          }
        })
      }
    })
  },
  //全局数据
  globalData: {
    //用户openid
    user_openid: '',
    //用户信息
    userInfo: null
  }
})

然后将用户信息存储到my.js中，存储如下：

onLoad: function (options) {
    this.setData({
      userInfo: app.globalData.userInfo
    })
  },

2. 编译模式的更改

将编译模式改为普通编译模式
在这里插入图片描述

在这里插入图片描述

3. 展示用户信息

my.wxml页面结构如下：

<block wx:if="{{!userInfo}}">
  <!-- 登录区域 -->
  <view class="login-container">
    <image src="/images/contact-filled.png" class="contact-filled" mode="widthFix"></image>
    <button class="btn-login" bindtap="login">一键登录</button>
    <text class="tip-text">登录后尽享更多权益</text>
  </view>
</block>

<block wx:else>

  <!-- 头像昵称区域 -->
  <view class="top-box">
    <image src="{{userInfo.avatarUrl}}" class="avatar"></image>
    <view class="nickname">{{userInfo.nickName}}</view>
  </view>

  <!-- 面板区域 -->
  <view class="panel">
    <view class="panel-list-item">
      <text>联系客服</text>
      <image src="/images/arrow.png"></image>
    </view>

    <view class="panel-list-item">
      <text>设置</text>
      <image src="/images/arrow.png"></image>
    </view>

    <view class="panel-list-item" bindtap="logout">
      <text>退出登录</text>
      <image src="/images/arrow.png"></image>
    </view>
  </view>

</block>

my.wxss样式如下：

page {
  background-color: #f8f8f8;
}

.login-container {
  height: 900rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* 图标的样式 */
.contact-filled {
  width: 150rpx;
  margin-bottom: 16rpx;
}

/* 登录按钮的样式 */
.btn-login {
  width: 90%;
  border-radius: 100px;
  margin: 15px 0;
  background-color: #c00000;
  color: #f8f8f8;
}

/* 按钮下方提示消息的样式 */
.tips-text {
  font-size: 12px;
  color: gray;
}

/* 用户信息样式 */
.top-box {
  height: 400rpx;
  background-color: #c00000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

/* 用户头像样式 */
.top-box .avatar {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  border: 2px solid white;
  box-shadow: 0 1px 5px black;
}

/* 用户昵称样式 */
.top-box .nickname {
  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
}

/* 面板样式设置 */
.panel {
  background-color: white;
  border-radius: 3px;
}

.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}

/* 箭头样式 */
.panel-list-item image {
  width: 60rpx;
  height: 60rpx;
}