小程序云开发之用户注册登录


Posted in Javascript onMay 18, 2019

本文实例为大家分享了小程序云开发用户注册登录的具体代码,供大家参考,具体内容如下

小程序云开发之用户注册登录
小程序云开发之用户注册登录

注册界面和文件

小程序云开发之用户注册登录
小程序云开发之用户注册登录

登录界面和文件

小程序云开发之用户注册登录
小程序云开发之用户注册登录

这里的UI使用iviewUI 不懂可以看我的另一篇文章IviewUI

先说注册界面
json如下

小程序云开发之用户注册登录

wxml如下

<!--pages/register/index.wxml-->
<view>
<i-input bind:change='inputName' maxlength="15" title="账号" autofocus placeholder="请输入账号" />
<i-input bind:change='inputPassword' maxlength="15" title="密码" autofocus placeholder="请输入密码" />
<i-button bindtap='register' type="success">注册</i-button>
</view>

js页面

// pages/register/index.js
let app = getApp();
//获取云数据库引用
const db = wx.cloud.database();
const admin = db.collection('adminlist');
 let name = null;
 let password = null;

Page({
 data: {
 },
 //输入用户名
 inputName:function(event){
 name = event.detail.detail.value
 },
 //输入密码
 inputPassword(event){
 password = event.detail.detail.value
 },


// .where({
// _openid: app.globalData.openid // 填入当前用户 openid
// })

 // wx.showModal({
 // title: '提示',
 // content: '您已注册,确定要更新账号密码吗?',
 // success: function (res) {
 // if (res.confirm) {
 // console.log('用户点击确定')
 // that.saveuserinfo();
 // }
 // }
 // })

 //注册
 register(){ 
 let that = this;
 let flag = false //是否存在 true为存在
 //查询用户是否已经注册
 admin.get({
 success:(res)=> {
 let admins = res.data; //获取到的对象数组数据
 // console.log(admins);
 for (let i=0; i<admins.length; i++){ //遍历数据库对象集合
 if (name === admins[i].name){ //用户名存在
 flag = true;
 // break;
 }
 }
 if(flag === true){ //已注册
 wx.showToast({
 title: '账号已注册!',
 icon: 'success',
 duration: 2500
 })
 }else{ //未注册
 that.saveuserinfo()
 }
 }
 })
 },


 //注册用户信息
 saveuserinfo() {
 // let that = this;
 admin.add({ //添加数据
 data:{
 name:name,
 password: password
 }
 }).then(res => {
 console.log('注册成功!')
 wx.showToast({
 title: '注册成功!',
 icon: 'success',
 duration: 3000
 })
 wx.redirectTo({
 url: '/pages/login/login',
 })
 })
 },
})

因为使用云开发数据库所以先在app.js中初始化加入下面这段代码

下面的fighting1323797232-e05624就是我们云开发的环境id

wx.cloud.init({
 env: 'fighting'1323797232-e05624',
 traceUser: true
 })

小程序云开发之用户注册登录

环境ID在这里

小程序云开发之用户注册登录

这里需要进云数据库创建一个adminlist集合

小程序云开发之用户注册登录

注册成功后,开始实现登陆功能

login.wxml

<!--pages/login/login.wxml-->
<view>
<i-input bind:change='inputName' maxlength="15" title="账号" placeholder="请输入账号" />
<i-input bind:change='inputPassword' maxlength="15" title="密码" placeholder="请输入密码" />
<i-button bindtap='login' type="primary">登录</i-button>
<i-button bindtap='register' type="success">注册</i-button>
</view>

json和以上注册的json一样

js逻辑页面实现如下:

// pages/login/login.js
let app = getApp();
// 获取云数据库引用
const db = wx.cloud.database();
const admin = db.collection('adminlist');
let name = null;
let password = null;

Page({

 /**
 * 页面的初始数据
 */
 data: {

 },
 //输入用户名
 inputName: function (event) {
 name = event.detail.detail.value
 },
 //输入密码
 inputPassword(event) {
 password = event.detail.detail.value
 },
 //登陆
 login(){
 let that = this;
 //登陆获取用户信息
 admin.get({
 success:(res)=>{
 let user = res.data;
 // console.log(res.data);
 for (let i = 0; i < user.length; i++) { //遍历数据库对象集合
 if (name === user[i].name) { //用户名存在
 if (password !== user[i].password) { //判断密码是否正确
 wx.showToast({
 title: '密码错误!!',
 icon: 'success',
 duration: 2500
 })
 } else {
 console.log('登陆成功!')
 wx.showToast({
 title: '登陆成功!!',
 icon: 'success',
 duration: 2500
 })
 wx.switchTab({ //跳转首页
 url: '/pages/shopcart/shopcart', //这里的URL是你登录完成后跳转的界面
 })
 }
 }else{ //不存在
 wx.showToast({
 title: '无此用户名!!',
 icon: 'success',
 duration: 2500
 })
 }
 }
 }
 })
 },


 register(){
 wx.navigateTo({
 url: '/pages/register/index'
 })
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 * 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 * 页面显示/切入前台时触发
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
angular select 默认值设置方法
Jun 23 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
小程序云开发实现数据库异步操作同步化
May 18 #Javascript
微信小程序云开发之数据库操作
May 18 #Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 #Javascript
史上最为详细的javascript继承(推荐)
May 18 #Javascript
微信小程序云开发如何使用npm安装依赖
May 18 #Javascript
vue路由中前进后退的一些事儿
May 18 #Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 #Javascript
You might like
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
Javascript中的数学函数
2007/04/04 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
浅谈Python 参数与变量
2020/06/20 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
现金会计岗位职责
2013/12/05 职场文书
社区八一活动方案
2014/02/03 职场文书
校园广播稿500字
2014/02/04 职场文书
户外拓展活动方案
2014/02/11 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang