最近在开发微信小程序,现阶段采用的云开发的方式。云开发与使用本地服务器开发还存在着一定的差异。本地服务器的开发后续记录。这里并没有记录微信小程序的云开发项目的创建方式。
先对微信小程序简单的登录界面做出实例。
1、登录界面UI
2、代码
2.1wxml
login.wxml
请输入用户姓名
<!--pages/logintest/logintest.wxml-->
<view class="container">
<image src="https://gimg2.baidu/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun%2Fe3126920d86a09385ee29ff142123690c292e31413028-uuY2aM_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631690126&t=be87aa949f3c29779688ce1c15b14aef"></image>
</view>
<view class="login_box">
<view class="section">
<input placeholder="请输入用户名" placeholder-class="color" bindblur='getusername' />
<image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/username.png"></image>
</view>
<view class="section">
<input password='true' placeholder="请输入密码" value='{{pass}}' placeholder-class="color" bindblur='getpass1' />
<image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image>
</view>
<!--登录按钮-->
<button class="login" type="primary" bindtap="login" >登录</button>
</view>
2.2 login.wxss
/* pages/login/login.wxss */
.input{
border: 1px solid black;
margin: 20rpx;
}
/* pages/login/login.wxss */
.container {
position: absolute;
width: 100%;
height: 100%;
}
.container image {
width: 100%;
height: 100%;
}
.login_box{
width: 90%;
position: absolute;
top: 15%;
left: 5%;
}
.section{
width: 100%;
border-bottom: 4rpx solid #FFF;
margin-top: 40rpx;
position: relative;
}
.section input{
height: 100rpx;
color: #FFF;
box-sizing: border-box;
padding-left: 80rpx;
font-size: 36rpx;
}
.section image{
width: 60rpx;
height: 60rpx;
position: absolute;
top: 20rpx;
left: 10rpx;
}
.color{
color: #FFF;
}
checkbox-group{
display: flex;
justify-content:flex-end;
margin-top: 30rpx;
color: #FFF;
box-sizing: border-box;
padding-right: 20rpx;
}
.login{
margin-top: 260rpx;
}
.register{
margin-top: 50rpx;
}
2.3 login.js
const DB = wx.cloud.database().collection('user')
Page({
data: {
username: '',
pass1: ''
},
header: {
'content-type': 'application/json' // 默认值
},
//获取输入的账号
getusername(event) {
console.log('账号', event.detail.value)
this.setData({
username: event.detail.value
})
},
//获取输入的密码
getpass1(event) {
console.log('密码', event.detail.value)
this.setData({
pass1: event.detail.value
})
},
//点击登陆
login() {
let username = this.data.username
let pass1 = this.data.pass1
//console.log('账号', username, '密码', pass1)
if (username == '' || pass1 == '') {
wx.showToast({
title: '用户或密码不能为空',
icon: 'none',
duration: 2000
})
} else {
//登陆
DB.where({
username: username,
pass1: pass1
}).get({
success(res) {
console.log("获取数据成功", res)
if (res.data.length == 0) {
console.log('登陆失败')
wx.showToast({
icon: 'none',
title: '账号不存在,请重新输入',
})
} else {
let user = res.data[0]
//console.log("user", user)
if (pass1 == user.pass1 && user.type == 0) {
console.log('登陆成功')
wx.showToast({
title: '登陆成功',
})
console.log("user", user)
//保存用户登陆状态
wx.setStorageSync('user', user)
//页面跳转
wx.switchTab({
url: '../personal/personal'
})
} else {
console.log('登陆失败')
wx.showToast({
icon: 'none',
title: '账号或密码不正确',
})
}
}
},
fail(res) {
console.log("获取数据失败", res)
}
})
}
},
}, 2000)
记录学习过程,存在问题大家共同讨论。
更多推荐
(一)微信小程序云开发之登录界面设计
发布评论