Escribí un pequeño programa básico para la tarea del curso de pregrado, lo grabo y lo comparto aquí, por favor señale si hay algún error.
Realización de la función de registro
La función de registro es esencialmente para agregar la información de un usuario a la base de datos. Mi idea es primero determinar si el usuario ha registrado una cuenta, si la hay, luego saltar a iniciar sesión, si no, luego registrarse directamente.
Obtenga el openid del usuario de acuerdo con la función de inicio de sesión en la nube que viene con el desarrollo de la nube, y luego consulte en la colección de usuarios de acuerdo con este openid. Si está vacío, saltará al registro. Si no está vacío, saltará. al mensaje "Ya registrado, inicie sesión directamente"
código js
- Al comienzo del archivo js registrado, se declara:
const app = getApp()
const db = wx.cloud.database({
//引用云数据库
env: '云开发环境名' //云开发环境ID
});
const 自己起的名userListDB = db.collection('集合名');
- En el archivo js registrado, el método onload llama al inicio de sesión de la función en la nube para obtener el openid del usuario:
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
}
- Luego use openid para consultar en la colección:
register() {
let that = this; //查询用户是否已经注册
userListDB.where({
_openid: app.globalData.openid // 填入当前用户 openid
}).get({
success: function (res) {
console.log('all',res.data) //输出查询到的所有
}
})
},
- Agréguelo para determinar si el usuario se ha registrado, si la longitud del resultado es> 0, aparecerá un mensaje; de lo contrario, ejecute la función saveuserinfo (): `
//注册
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();
}
}
})
},`
- Agregue a la base de datos, obtenga los datos completados por el usuario en la página wxml y guárdelos en la base de datos en la nube, e inicie sesión después del éxito:
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是你登录完成后跳转的界面
})
})
},
- Haga que el usuario de la página wxml complete los datos:
esto es para obtener el nombre de usuario, obtener los otros, cambiar el nombre de la función de acuerdo con la página wxml
bindKeyInputName: function (e) {
this.setData({
name: e.detail.value
})
},
código wxml
- Permita que el usuario ingrese el nombre de usuario, número de teléfono móvil, contraseña
<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 para wxss
Realización de la función de inicio de sesión
El inicio de sesión es para verificar la existencia del usuario del conjunto de usuarios y comparar el número de teléfono móvil y la contraseña. La idea que escribí es hacer una consulta basada en el número de teléfono móvil del usuario, encontrar los datos del usuario y luego comparar la contraseña ingresada con la base de datos. Si tiene éxito, iniciará sesión y le preguntará si falla.
código js
- Declare el entorno y llame a la base de datos en el archivo js, como se indicó anteriormente.
- Luego, llame al inicio de sesión de la función en la nube para obtener el openid del usuario.
- Obtén los datos de la página wxml.
- Consulta la base de datos y compara.
// 单击“登录”按钮执行该函数
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
})
}
})
},
código wxml
- Inicie sesión en la página wxml.
<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 para wxss
Finalmente, se puede realizar. No existe tal cosa como iniciar sesión con autorización de usuario. Al principio, pensé que era lo mismo que el registro y el inicio de sesión de desarrollo web.
Adjunte las representaciones:
