文章目录
一、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;
}
八、退出登录
为退出登录绑定事件logout，并在my.js中编写相应的事件函数
九、效果图
