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

文章目录

一、tabBar的配置
- 1. 新建文件夹
- 2. 新增tabBar节点
二、添加编译模式
三、登录页面的设计
- 1. wxml结构
- 2. wxss样式
- 3. 导航栏样式配置
- 4. 效果图
四、云开发环境的配置
- 1. 新建cloud文件夹
- 2. 修改project.config.json配置
- 3.云开发环境初始化
五、获取用户唯一的_openid
- 1. 新建云函数
- 2. 调用云函数
六、将用户信息加入数据库
- 1. 建表
- 2. 获取用户信息
- 3. 用户信息不全说明
- 4. 其它页面获取用户信息
- 5. 将用户信息加入数据库
- 6. 解决用户重复添加问题
七、自动登录并展示用户信息
- 1. 查找并保存用户信息
- 2. 编译模式的更改
- 3. 展示用户信息
八、退出登录
九、效果图

一、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({//云开发环境idenv: 'xzy-cloud-6gucjazc6ba57719'  }),//调用云函数wx.cloud.callFunction({name: 'get_openId',success: res => {//获取用户openidthis.globalData.user_openid = res.result.openidconsole.log(this.globalData.user_openid)}})},//全局数据globalData: {//用户openiduser_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({//云开发环境idenv: 'xzy-cloud-6gucjazc6ba57719'  }),//调用云函数wx.cloud.callFunction({name: 'get_openId',success: res => {//获取用户openidthis.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: {//用户openiduser_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;
}

八、退出登录

为退出登录绑定事件logout，并在my.js中编写相应的事件函数

九、效果图