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


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 Base类 包含基本的方法
Jul 22 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JsRender for object语法简介
Oct 31 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
JS中定位 position 的使用实例代码
Aug 06 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 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
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
Python将多份excel表格整理成一份表格
2018/01/03 Python
对python:print打印时加u的含义详解
2018/12/15 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
八年级数学教学反思
2014/01/31 职场文书
cf战队收人广告词
2014/03/14 职场文书
企业文化宣传标语
2014/06/09 职场文书
质量提升方案
2014/06/16 职场文书
写字楼租赁意向书
2014/07/30 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
个人债务授权委托书
2014/10/17 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
《确定位置》教学反思
2016/02/18 职场文书