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


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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
在视频前插入广告
2006/11/20 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
如何获取Python简单for循环索引
2019/11/21 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
大学生党员承诺书
2014/05/20 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年项目工作总结
2015/04/29 职场文书
疾病证明书
2015/06/19 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
关于python类SortedList详解
2021/09/04 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server