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


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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
js 动态选中下拉框
Nov 26 Javascript
jquery 常用操作方法
Jan 28 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
Js和VUE实现跑马灯效果
May 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检测mysql表是否存在的方法小结
2017/07/20 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
简单的js表单验证函数
2013/10/28 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
cookie的secure属性详解
2015/04/08 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
python去掉空白行的多种实现代码
2018/03/19 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
《锄禾》教学反思
2014/04/08 职场文书
学习经验演讲稿
2014/05/10 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
建党伟业观后感
2015/06/01 职场文书
婚礼家长致辞
2015/07/27 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
golang在GRPC中设置client的超时时间
2021/04/27 Golang