微信小程序毕设——使用云开发实现登录注册

1 wxml


<view class="container"><view class="login-icon"><image class="login-img" src="../../images/login.jpg"></image></view><view class="login-from"><!--账号--><view class="inputView"><image class="nameImage" src="../../images/name.png"></image><label class="loginLab">账号</label><input class="inputText" placeholder="请输入账号"
bindinput="phone" /></view><view class="line"></view><!--密码--><view class="inputView"><image class="keyImage" src="../../images/key.png"></image><label class="loginLab">密码</label><input class="inputText" password="true" placeholder="请输入密码" bindinput="password" /></view><!--按钮--><view class="loginBtnView"><button class="loginBtn" type="primary" size="{{primarySize}}"
loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"
bindtap="login">登录</button>
<button class="loginBtn" type="primary" size="{{primarySize}}"
loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"
bindtap="register">注册</button></view></view>
</view>

2 wxss

page{height: 100%;}.container {height: 100%;display: flex;flex-direction: column;padding: 0;box-sizing: border-box;background-color: #f2f2f2} /*登录图片*/.login-icon{flex: none;}.login-img{width: 700rpx;}/*表单内容*/.login-from {margin-top: 20px;flex: auto;height:100%;}.inputView {background-color: #fff;line-height: 44px;}/*输入框*/.nameImage, .keyImage {margin-left: 22px;width: 14px;height: 15px}.loginLab {margin: 15px 15px 15px 10px;color: #545454;font-size: 14px}.inputText {flex: block;float: right;text-align: right;margin-right: 22px;margin-top: 10px;color: #cccccc;font-size: 14px}.line {width: 100%;height: 1px;background-color: #cccccc;margin-top: 1px;}/*按钮*/.loginBtnView {width: 100%;height: auto;background-color: #f2f2f2;margin-top: 0px;margin-bottom: 0px;padding-bottom: 0px;}.loginBtn {width: 80%;margin-top: 20px;}

3 js

const app=getApp()
wx.cloud.init({env:'cloud1-4g7cuvo07e197c92'
})
const db=wx.cloud.database({env:'cloud1-4g7cuvo07e197c92'
})
Page({data: {phone: null,password:null,},// 获取输入账号phone :function (event) {this.setData({phone:event.detail.value,});console.log(this.data.phone);},// 获取输入密码password :function (event) {this.setData({password:event.detail.value,});console.log(this.data.password);},login:function(event)//登录函数{const userCollection = db.collection("zc");let flag = false  //表示账户是否存在,false为初始值userCollection.get({success: (res) => {let zc = res.data;console.log(zc);for (let i = 0; i < zc.length; i++) {  //遍历数据库对象集合if (this.data.phone === zc[i].phone) { //账户已存在if (this.data.password !== zc[i].password) {  //判断密码正确与否wx.showToast({  //显示密码错误信息title: '密码错误！！',icon: 'error',duration: 2500});i=-1; //密码错误则重头开始遍历数据库对象集合} else {wx.showToast({  //显示登录成功信息title: '登录成功！！',icon: 'success',duration: 2500})flag=true;wx.reLaunch({//跳转个人中心url: '../index/index'})break;}}};if(flag==false)//遍历完数据后发现没有该账户{wx.showToast({title: '该用户不存在',icon: 'error',duration: 2500})}}})},register: function(){wx.navigateTo({url: '../register/register',})}})

微信小程序毕设——使用云开发实现登录注册相关推荐

微信小程序：uni-app云开发的网盘助手
这是一款uni-app开发的一款网盘小助手小程序源码该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容另外呢该小程序还可以免费领取百度网盘七天会员,所以用来引流特别的不错该小程序还有外卖系 ...
微信小程序中配置云开发
微信小程序中配置云开发一.配置 app.js 文件 onLaunch() {wx.cloud.init({env: 'cloud1-xxxxxxxxxx', // 云开发环境IDtraceUser ...
微信小程序：(更新)云开发微群人脉
大家好,今天给大家带来的这一款是经过优化更新并有所改动的一个版本我们之前也发布过一款,今天这一款是在之前的哪一款的基础下增加优化该小程序的群码都是系统自动采集的,所以没有上线但是没有群的烦恼另外 ...
仿京细菜谱微信小程序源码云开发菜谱微信小程序源码
京细菜谱是一个美食分享网站,提供优质的家常菜谱大全,仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程让您轻松学会做美食.对不同食材和地域的饮食做了不同的分类和详细的做菜方法分类十分详细 ...
微信小程序仿淘票票之登录注册讲解
微信小程序仿淘票票之登录注册讲解(这也是我学习的第一步嘛) 前言一.登录以及注册的业务逻辑二.核心代码 1.register代码 2.login代码总结前言愉快的期末,终于结束了,我准备把程 ...
Mpvue+koa开发微信小程序——腾讯云开发环境的搭建及部署实现真机测试
为什么写这篇文章? 之前写过一篇文章:微信小程序开发错误:LoginError {type: "ERR_WX_GET_USER_INFO"}解决方法有的伙伴在这篇文章中评论为什么 ...
微信小程序---快速上手云开发
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
微信小程序如何转云开发
微信小程序云开发,为前端全栈开发提供了很大的便利.本文主要介绍普通的微信小程序如何让转为云开发. 一.建cloudfunction文件夹 cloudfunction文件夹建立在小程序的根目录下. 二. ...
2022最新坤坤鸡乐盒微信小程序源码+云开发的
正文: 云开发坤坤鸡乐盒微信小程序源码是由坤坤铁粉ikun们开发的. 因部分ios用户无法体验共举办,特地开发的小程序版鸡乐盒,听说作者也是5年的铁粉. 现在特别火,我也就不多作介绍了,点击就可以发出 ...

微信小程序毕设——使用云开发实现登录注册

微信小程序毕设——使用云开发实现登录注册相关推荐

最新文章

热门文章