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


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翻页效果
Jul 23 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
使用js画图之饼图
Jan 12 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
js 发布订阅模式的实例讲解
Sep 10 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python中使用PDB库调试程序
2015/04/05 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python实现验证码识别功能
2018/06/07 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
什么是设计模式
2012/06/17 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
高中生学习的自我评价
2013/12/14 职场文书
迟到检讨书400字
2014/01/13 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
助学感谢信范文
2015/01/21 职场文书
岗位聘任报告
2015/03/02 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis