微信小程序云数据库实现注册

微信小程序自带的云数据库的优势在于，不用搭建服务器和后端就可以直接调用数据库

我们接下来使用云数据库实现注册功能，效果图如下

云数据库结构如下：

这是用云数据库实现注册功能，实现代码如下，：

<view class="page"><view class="zhuce">注册</view><view class='row1'><view class='info'><input  class= 'info-input1' bindinput="handleInputPhone" placeholder="请输入你的手机号" /></view> </view><view class='row2'><view class='info'><input  class= 'info-input' bindinput="handleusername" placeholder="请输入你的账户名" /></view></view><view class='row3'><view class='info'><input type='password' class= 'info-input' bindinput="handleNewChanges" placeholder="请输入你的密码" /></view></view><view class='row4'><view class='info'><input  type='password' class= 'info-input' bindinput="handleNewChangesAgain" placeholder="请重新输入你的密码" /></view></view><button class='submit' bindtap='submit'>提交</button></view>
</view>

const app = getApp()wx.cloud.init({env: 'asd'//环境ID
})
const db = wx.cloud.database({env: 'asd'
})Page({data: {phone: '', username: '',usernameverify:1,NewChanges: '',NewChangesAgain: '',},handleInputPhone: function (e) {var that = this;that.setData({phone: e.detail.value})},handleusername: function (e) {var that = this;this.setData({username: e.detail.value})},handleNewChanges: function (e) {var that = this;that.setData({NewChanges: e.detail.value})},handleNewChangesAgain: function (e) {var that = this;that.setData({NewChangesAgain: e.detail.value})},submit: function (e) {var that = thisdb.collection('abcc'[相应的数据表]).where({ username: that.data.username }).get({success: function (res) {var that = thisthat.setData({usernameverify: res.data[0].verifycode //用来确认改用户名是否已经被注册})}})if (that.data.phone == '') {console.log('a')wx.showToast({title: '手机号码不能为空',duration: 2000})} else if (that.data.phone.trim().length != 11) {console.log('b')wx.showToast({title: '手机号码格式不对',duration: 2000})} else if (that.data.username == '') {console.log('c')wx.showToast({title: '登录名不能为空',duration: 2000})}else if (!that.data.usernameverify) {console.log('d')wx.showToast({title: '登录名已经被注册了',duration: 2000})}else if (that.data.NewChanges == '') {console.log('e')wx.showToast({title: '请输入密码',duration: 2000})return} else if (that.data.NewChangesAgain != that.data.NewChanges) {console.log('f')wx.showToast({title: '两次密码不一致',duration: 2000})return} else {var that = thisdb.collection('abcc'[相应的数据表]).add({data: {username: that.data.username,password: that.data.NewChanges,phonenum: that.data.phone,verifycode: 1},success: function (res) {}})}}
})

.page{left: 0px;top: 0px;width: 375px;height: 667px;background-color: rgba(145, 165, 165, 1);
}
.zhuce{position: absolute;left: 132px;top: 70px;width: 72px;height: 50px;color: rgba(16, 16, 16, 1);font-size: 36px;text-align: left;font-family: PingFangSC-regular;
}
.row1{position: absolute;left: 36px;top: 179px;width: 250px;height: 51px;line-height: 41px;border-radius: 22px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: center;font-family: Arial;border: 1px solid rgba(187, 187, 187, 1);background-color: rgba(255, 255, 255, 1);
}
.row2{position: absolute;left: 36px;top: 239px;width: 250px;height: 51px;line-height: 41px;border-radius: 22px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: center;font-family: Arial;border: 1px solid rgba(187, 187, 187, 1);background-color: rgba(255, 255, 255, 1);
}
.row3{position: absolute;left: 36px;top: 299px;width: 250px;height: 51px;line-height: 41px;border-radius: 22px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: center;font-family: Arial;border: 1px solid rgba(187, 187, 187, 1);background-color: rgba(255, 255, 255, 1);
}
.row4{position: absolute;left: 36px;top: 359px;width: 250px;height: 51px;line-height: 41px;border-radius: 22px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: center;font-family: Arial;border: 1px solid rgba(187, 187, 187, 1);background-color: rgba(255, 255, 255, 1);
}
.info-input{height: 100rpx;margin-left: 50rpx;color: #777;float: left;
}
.submit{position: absolute;left: 75px;top: 433px;width: 171px;height: 57px;line-height: 20px;border-radius: 26px;background-color: rgba(63, 81, 181, 1);color: rgba(255, 255, 255, 1);text-align: center;border: 1px solid rgba(187, 187, 187, 1);
}

微信小程序云数据库实现注册相关推荐

Web端访问微信小程序云数据库
撰写背景: 用微信小程序云开发做了一个与web管理平台配套的微信小程序,Web端需要对接(访问)到云环境的云数据库. 开门见山: 在微信开发者工具里先把云开发控制台打开, 设置->权限设置-&g ...
微信小程序云数据库where查询语句字段名和字段值都可以是变量
微信小程序云数据库where查询语句字段名和字段值都可以是变量想要实现的功能遇到的问题 js代码想要实现的功能界面代码 // An highlighted block <view cla ...
微信小程序云数据库定时清空（云函数定时触发）
需求: 微信小程序云数据库某表仅保留当天数据,因此每天固定某时间清空一次实现: 1.新建云函数timer 2.在timer/config.json中配置定时器 {"triggers&quo ...
外部web端访问微信小程序云数据库的几种方法
前言我当前的项目是小程序开发,使用的是云开发方式,那么这时涉及到了小程序端提交的数据会保存到云数据库中,可是呢这些个数据要被外部访问用来管理,也就是还得弄一个管理后台界面管理这些数据.那就需要拿到云 ...
微信小程序云数据库实现登录
微信小程序自带的云数据库的优势在于,不用搭建服务器和后端就可以直接调用数据库云数据库配置: 例如上图,环境名称为:ksyueying 环境ID为: ksyueying-xxxxxxxxx(输入环境I ...
web端获取微信小程序云数据库数据实现增删改查等操作
获取小程序数据库前言一.微信小程序Web SDK 1.微信官方示例 2.未登录模式注意事项二.完整流程演示 1.开启云数据库访问权限 2.编写云函数 3.web前端引入js 4.web页面js访 ...
微信小程序-云数据库开发
数据库增删查改数据库权限管理这相当于管理员权限,可以改到所有人可读. 查询get() 首先在微信小程序上方工具栏点击云开发-数据库-添加集合-增添记录其次,在app.js中写入以下代码 App( ...
微信小程序云数据库使用(上)
数据库写入创建集合 1.js文件 2.wxml 文件 3.wxss 文件有了一个小想法,向云数据库写入文本小故事,之后在读取故事. 数据库读取:https://blog.csdn.net/we ...
微信小程序云数据库中实现分页
微信小程序提供skip来实现分页比如数据库中有数据100条 db.collection('story').skip(0).limit(10).get() 而skip就是第skip+1条,比如skip ...

微信小程序云数据库实现注册

微信小程序云数据库实现注册相关推荐

最新文章

热门文章