I wrote a basic small program for undergraduate coursework, record and share here, if there are any errors, please point out.
Realization of registration function
The registration function is essentially to add a user's information to the database. My idea is to first determine whether the user has registered an account, if there is, then jump to login, if not, then directly register.
Obtain the user's openid according to the login cloud function that comes with the cloud development, and then query in the user collection according to this openid. If it is empty, it will jump to registration. If it is not empty, it will jump to the prompt "Already registered, please log in directly"
js code
- At the beginning of the logged-in js file declares:
const app = getApp()
const db = wx.cloud.database({
//引用云数据库
env: '云开发环境名' //云开发环境ID
});
const 自己起的名userListDB = db.collection('集合名');
- In the logged-in js file, the onload method calls the cloud function login to obtain the user's openid:
var that = this
// 调用login云函数获取openid
wx.cloud.callFunction({
name: 'login',
data: {
},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
that.setData({
openid: res.result.openid
})
app.globalData.openid = res.result.openid
}
- Then use openid to query in the collection:
register() {
let that = this; //查询用户是否已经注册
userListDB.where({
_openid: app.globalData.openid // 填入当前用户 openid
}).get({
success: function (res) {
console.log('all',res.data) //输出查询到的所有
}
})
},
- Add to it to determine whether the user has registered. If the length of the result is> 0, a prompt will appear, otherwise run the saveuserinfo() function: `
//注册
register() {
let that = this;
//查询用户是否已经注册
userListDB.where({
_openid: app.globalData.openid // 填入当前用户 openid
}).get({
success: function (res) {
let userInfos = res.data;
console.log('all',res.data)
if (userInfos && userInfos.length > 0) {
let user = userInfos[0];
if (user && user.name) {
wx.showModal({
title: '提示',
content: '您已注册，请直接登录',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
wx.navigateTo({
//跳转登录界面
url: '/pages/login/login',//这里的URL是你登录完成后跳转的界面
})
}
}
})
}
} else {
that.saveuserinfo();
}
}
})
},`
- Add to the database, get the data filled in by the user in the wxml page and save it to the cloud database, and log in after success:
saveuserinfo() {
let that = this;
userListDB.add({
data: {
name: name,
password: password,
phone: phone,
userimg: '/images/logo.png' //默认头像
}
}).then(res => {
wx.showModal({
title: '成功',
content: '您已注册成功',
showCancel: false
})
wx.navigateTo({
//跳转登录界面
url: '/pages/login/login',//这里的URL是你登录完成后跳转的界面
})
})
},
- Get the wxml page user to fill in the data:
this is to get the user name, get the other ones, change the function name according to the wxml page
bindKeyInputName: function (e) {
this.setData({
name: e.detail.value
})
},
wxml code
- Let the user enter the user name, mobile phone number, password
<view class="con">
<view class="kong"></view>
<form>
<view class="cu-form-group">
<view class="title">昵称</view>
<input placeholder="请输入您的昵称" bindinput="inputName"></input>
</view>
<view class="kong1"></view>
<view class="cu-form-group">
<view class="title">手机号码</view>
<input placeholder="请输入手机号" bindinput="inputPhone"></input>
<view class="cu-capsule radius">
<view class="cu-tag bg-blue">
+86
</view>
<view class="cu-tag line-blue">
中国大陆
</view>
</view>
</view>
<view class="kong1"></view>
<view class="cu-form-group">
<view class="title">密码</view>
<input class= 'info-input' placeholder="请输入密码" bindinput="inputPassword"></input>
</view>
</form>
<button class='button' bindtap='register'>注册</button>
</view>
colorUI for wxss
Realization of login function
Login is to verify the existence of the user from the user set, and compare the mobile phone number and password. The idea I wrote is to make a query based on the user’s mobile phone number, find the user’s data, and then compare the entered password with the database. If it succeeds, it will log in, and it will prompt if it fails.
js code
- Declare the environment and call the database in the js file, as above.
- Then call the cloud function login to obtain the user's openid.
- Get the data of the wxml page.
- Query the database and compare.
// 单击“登录”按钮执行该函数
queryData: function () {
var _this = this
console.log('输入的手机号', _this.data.phone)
// 根据记录ID搜索数据集
userListDB.where({
_openid: app.globalData.openid
}).get({
success: function (res) {
console.log('数据库的密码', res.data[0].password)
console.log('输入的密码', _this.data.password)
console.log('用户名', res.data[0].name)
if (_this.data.password != res.data[0].password) {
//判断密码是否正确
wx.showToast({
title: '密码错误！！',
icon: 'success',
duration: 2500
})
} else {
console.log('登陆成功！')
wx.showToast({
title: '登陆成功！！',
icon: 'success',
duration: 2500
})
wx.reLaunch({
//跳转个人中心
url: '/pages/wd/wd' //?useropenid=' + res.data[0]._openid,//利用reLaunch跳转到带tabbar的页面 })
}
},
// 未查到数据时调用
fail: function (res) {
wx.showModal({
title: '错误',
content: '请先注册',
showCancel: false
})
}
})
},
wxml code
- Log in to the wxml page.
<view class="con">
<view class="kong"></view>
<form>
<view class="cu-form-group">
<view class="title">手机号码</view>
<input placeholder="请输入手机号" value="{
{phone}}" bindinput="bindKeyInputPhone"></input>
<view class="cu-capsule radius">
<view class="cu-tag bg-blue">
+86
</view>
<view class="cu-tag line-blue">
中国大陆
</view>
</view>
</view>
<view class="kong1"></view>
<view class="cu-form-group">
<view class="title">密码</view>
<input placeholder="请输入密码" value="{
{password}}" bindinput="bindKeyInputPassword"></input>
</view>
</form>
<button class="button" bindtap='queryData'>登录</button>
</view>
colorUI for wxss
Finally, it can be realized. There is no such thing as logging in with user authorization. At first, I thought it was the same as the registration and login of web development.
Attach the renderings:
