（一）微信小程序云开发之登录界面设计

article/2025/10/8 11:18:12

最近在开发微信小程序，现阶段采用的云开发的方式。云开发与使用本地服务器开发还存在着一定的差异。本地服务器的开发后续记录。这里并没有记录微信小程序的云开发项目的创建方式。

先对微信小程序简单的登录界面做出实例。

1、登录界面UI

2、代码

2.1wxml


请输入用户姓名
<!--pages/logintest/logintest.wxml-->
<view class="container"><image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe3126920d86a09385ee29ff142123690c292e31413028-uuY2aM_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&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.usernamelet 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)

记录学习过程，存在问题大家共同讨论。