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


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 获取网页参数系统
Jul 19 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
如何编写jquery插件
Mar 29 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
浅谈Vue.js组件(二)
Apr 09 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
js尾调用优化的实现
May 23 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
小程序云开发实现数据库异步操作同步化
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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php通过session防url攻击方法
2014/12/10 PHP
浅谈json_encode用法
2015/03/05 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
实例讲解php数据访问
2016/05/09 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Python hashlib模块用法实例分析
2018/06/12 Python
django框架auth模块用法实例详解
2019/12/10 Python
三星法国官方网站:Samsung法国
2019/10/31 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
仓管员岗位职责
2015/02/03 职场文书
学校国庆节活动总结
2015/03/23 职场文书
公司文体活动总结
2015/05/07 职场文书
2015年妇女工作总结
2015/05/14 职场文书
周一给客户的问候语
2015/11/10 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏