微信小程序云开发(数据库)详解
程序员文章站
2023-10-22 19:24:22
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。
云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 ap...
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。
云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 api 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
目前提供三大基础能力支持:
1、云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码
2、数据库:一个既可在小程序前端操作,也能在云函数中读写的 json 数据库
3、存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
具体的可以去小程序文档上查看,下面用一个登录注册的案例来演示小程序云开发数据库的运用
注册
在创建的时候,要在点下一步的时候,调数据库来看用户名有没有重复的。在点击同意的时候来调用数据库,然后把所有的判断放到下一步来判断。所有条件都满足就将用户名和密码放到全局变量中。
var app = getapp(); page({ data: { username: '', userpassword: '', userpasswordagain: '', checkbox: false, repetition: false }, // 返回主页面 backhometap: function() { wx.switchtab({ url: '../index/index', }) }, // 绑定 bindingtap: function () { wx.redirectto({ url: '../login/login', }) }, // 用户名 usernameinput: function(e) { this.setdata({ username: e.detail.value }); }, // 密码 userpasswordinput: function(e) { this.setdata({ userpassword: e.detail.value }); }, // 再次输入密码 userpasswordagaininput: function(e) { this.setdata({ userpasswordagain: e.detail.value }); }, // 同意 checkboxchange: function() { if (this.data.checkbox === false) { this.setdata({ checkbox: true }) } else { this.setdata({ checkbox: false }) } var that = this; var username = this.data.username; // 初始化云 wx.cloud.init({ env: 'wubaib-9543f7', traceuser: true }); // 初始化数据库 const db = wx.cloud.database(); const _ = db.command; db.collection('userinformation').where({ username: _.eq(username) }).get({ success: function (res) { if (res.data.length === 1) { that.setdata({ repetition: true }) } } }) }, // 下一步,完善个人信息 perfectinfortap: function() { var username = this.data.username; var userpassword = this.data.userpassword; var checkbox = this.data.checkbox; var userpasswordagain = this.data.userpasswordagain; var name = /^[a-za-z0-9\u4e00-\u9fa5]+$/; var repetition = this.data.repetition; if (username === '') { wx.showtoast({ title: '请输入用户名', icon: 'none', duration: 2000, mask: true }) } else if (!name.test(username)) { wx.showtoast({ title: '用户名格式不正确', icon: 'none', duration: 2000, mask: true }) } else if (repetition === true) { wx.showtoast({ title: '用户名已存在', icon: 'none', duration: 2000, mask: true }) } else if (userpassword === '') { wx.showtoast({ title: '请输入密码', icon: 'none', duration: 2000, mask: true }) } else if (userpassword.length < 6) { wx.showtoast({ title: '密码最少6位', icon: 'none', duration: 2000, mask: true }) } else if (userpassword !== userpasswordagain) { wx.showtoast({ title: '两次密码输入不一致', icon: 'none', duration: 2000, mask: true }) } else if (checkbox === false) { wx.showtoast({ title: '请选中已阅读', icon: 'none', duration: 2000, mask: true }) } else { wx.redirectto({ url: 'perfectinfor/perfectinfor', }) // 保存用户名和密码 app.appdata.account = { username: username, userpassword: userpassword } } } })
在完善信息的时候获取所有的变量(用户名和密码也在内),然后在点击下一步完成按钮将数据上传到数据库。
var app = getapp(); page({ data: { username: '', userpassword: '', phone: '', realname: '', card: '', email: '', }, // 返回主界面 backhometap: function() { wx.switchtab({ url: '../../index/index', }) }, // 手机号 phoneinput: function(e) { this.setdata({ phone: e.detail.value }); }, // 真实姓名 nameinput: function(e) { this.setdata({ realname: e.detail.value }); }, // 身份证 cardinput: function(e) { this.setdata({ card: e.detail.value }) }, // email emailinput: function(e) { this.setdata({ email: e.detail.value }) }, // 下一步完成 registersuccesstap: function() { var phone = this.data.phone; var realname = this.data.realname; var card = this.data.card; var email = this.data.email; var username = this.data.username; var userpassword = this.data.userpassword; var phonereg = /^1[345789]\d{9}$/; var namereg = /^[\u4e00-\u9fa5]+$/; var cardreg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xx])$/; var emailreg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/; var that = this; if (phone === '') { wx.showtoast({ title: '请输入手机号', icon: 'none', duration: 2000, mask: true }); } else if (!phonereg.test(phone)) { wx.showtoast({ title: '请输入正确的手机号', icon: 'none', duration: 2000, mask: true }) } else if (!namereg.test(realname)) { wx.showtoast({ title: '请输入正确的名字', icon: 'none', duration: 2000, mask: true }) } else if (card === '') { wx.showtoast({ title: '请输入身份证', icon: 'none', duration: 2000, mask: true }) } else if (!cardreg.test(card)) { wx.showtoast({ title: '请输入正确的身份证', icon: 'none', duration: 2000, mask: true }) } else if (email === '') { wx.showtoast({ title: '请输入邮箱', icon: 'none', duration: 2000, mask: true }) } else if (!emailreg.test(email)) { wx.showtoast({ title: '请输入正确的邮箱', icon: 'none', duration: 2000, mask: true }) } else { // 初始化云 wx.cloud.init({ env: 'wubaib-9543f7', traceuser: true }); // 初始化数据库 const db = wx.cloud.database(); db.collection('userinformation').add({ // data 字段表示需新增的 json 数据 data: { realname: realname, username: username, userpassword: userpassword, phone: phone, email: email, card: card }, success: function(res) { // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id console.log(res); console.log(res.errmsg); } }) } }, /** * 生命周期函数--监听页面显示 */ onshow: function() { this.setdata({ username: app.appdata.account.username, userpassword: app.appdata.account.userpassword }) }, })
登录
在登录页面,先获取用户输入的用户名和密码。在点击登录的时候,先根据username调数据库的密码和用户输入的密码是否相等。如果相等将用户的信息保存到全局变量中。
var app = getapp(); page({ data: { bindname: '', bindpassword: '', ischecked: false, username: '', phone: '', realname: '', card: '', email: '', userid: '' }, // 点击注册账号 registertap: function() { wx.redirectto({ url: '../register/register' }) }, // 获取用户名 bindnameinput: function(e) { this.setdata({ bindname: e.detail.value }) var that = this; if (that.data.bindname.length !== 0 && that.data.bindpassword.length !== 0) { this.setdata({ ischecked: true }) } else if (that.data.bindname.length === 0) { this.setdata({ ischecked: false }) } }, // 获取密码 bindpasswordinput: function(e) { this.setdata({ bindpassword: e.detail.value }) var that = this; if (that.data.bindname.length !== 0 && that.data.bindpassword.length !== 0) { this.setdata({ ischecked: true }) } else if (that.data.bindpassword.length === 0) { this.setdata({ ischecked: false }) } }, // 点击登录 bindingsuccess: function() { var that = this; var bindname = that.data.bindname; var bindpassword = that.data.bindpassword; if (bindname.length !== 0 && bindpassword.length !== 0) { // 初始化云 wx.cloud.init({ env: 'wubaib-9543f7', traceuser: true }); // 初始化数据库 const db = wx.cloud.database(); db.collection('userinformation').where({ username: bindname }).get().then(res => { console.log(res.data); if (res.data[0].userpassword === bindpassword) { console.log("登录成功"); // 保存手机号,真实姓名,身份证号,邮箱 保存用户名 that.setdata({ username: res.data[0].username, phone: res.data[0].phone, realname: res.data[0].realname, card: res.data[0].card, email: res.data[0].email, userid: res.data[0]._id }) app.appdata.userinfo = { phone: that.data.phone, realname: that.data.realname, card: that.data.card, email: that.data.email } app.appdata.account = { username: that.data.username } app.appdata.userid = { userid: that.data.userid } wx.switchtab({ url: '../personalcenter/personalcenter', }) } else { wx.showtoast({ title: '用户名或密码错误', icon: 'none', duration: 2000 }) } }) } }, })
登录wxml
<view class='phonenumbercontainer'> <input placeholder='用户名' maxlength='11' bindinput="bindnameinput"></input> </view> <view class='passwordcontainer'> <input placeholder='密码' password="true" bindinput="bindpasswordinput"></input> </view> <view class="{{ischecked?'bindingchecked':'bindingnormal'}}" bindtap='bindingsuccess'>立即登录</view> <view class='registercontainer' bindtap='registertap'>注册账号</view>
注册第一步的wxml
<!--返回主页 --> <view class='backhome' bindtap='backhometap'> <image src='/images/homeicon.png' class='backhomeimg'></image> </view> <!--头部 --> <view class='headercontainer'> <!--创建账户 --> <view class='headerlistcontainer headerlistactive'> <view class='headerlistview'>1</view> <text class='headerlisttext'>创建账户</text> </view> <!--完善个人信息 --> <view class='headerlistcontainer'> <view class='headerlistview'>2</view> <text class='headerlisttext'>完善个人信息</text> </view> <!--注册成功 --> <view class='headerlistcontainer'> <view class='headerlistview'>3</view> <text class='headerlisttext'>注册成功</text> </view> <view class='transverselineleft'></view> <view class='transverselineright'></view> </view> <view class='maincontainer'> <!--用户名 --> <view class='mainlistcontainer'> <view class='mainlisttext'>用户名</view> <input class='mainlistinput' placeholder='请输入数字,字母或中文' maxlength='25' bindinput='usernameinput'></input> </view> <!--密码 --> <view class='mainlistcontainer'> <view class='mainlisttext'>密码</view> <input class='mainlistinput' placeholder='长度6~14位' password='true' maxlength='14' bindinput='userpasswordinput'></input> </view> <!--确认密码 --> <view class='mainlistcontainer'> <view class='mainlisttext'>确认密码</view> <input class='mainlistinput' placeholder='请再次输入密码' password='true' maxlength='14' bindinput='userpasswordagaininput'></input> </view> </view> <!--agree --> <view class='agreecontainer'> <checkbox class='agreecheckbox' checked="{{check}}" bindtap="checkboxchange"/> <text>我已阅读并接受</text> <text class='clause'>《用户注册条款》</text> </view> <!--nextbutton --> <view class='nextbutton' bindtap='perfectinfortap'>下一步,完善个人信息</view> <!--binding --> <view class='bindingcontainer'> <text>已有账号</text> <text class='binding' bindtap='bindingtap'>请绑定</text> </view>
注册第二步wxml
<!--返回主页 --> <view class='backhome' bindtap='backhometap'> <image src='/images/homeicon.png' class='backhomeimg'></image> </view> <!--头部 --> <view class='headercontainer'> <!--创建账户 --> <view class='headerlistcontainer headerlistoldactive'> <view class='headerlistview'>1</view> <text class='headerlisttext'>创建账户</text> </view> <!--完善个人信息 --> <view class='headerlistcontainer headerlistactive'> <view class='headerlistview'>2</view> <text class='headerlisttext'>完善个人信息</text> </view> <!--注册成功 --> <view class='headerlistcontainer'> <view class='headerlistview'>3</view> <text class='headerlisttext'>注册成功</text> </view> <view class='transverselineleft'></view> <view class='transverselineright'></view> </view> <!--main --> <view class='maincontainer'> <!--手机 --> <view class='mainlistcontainer'> <view class='mainlisttext'>手机</view> <input class='mainlistinput' placeholder='请输入手机号码' maxlength="11" bindinput='phoneinput'></input> </view> <!--真实姓名 --> <view class='mainlistcontainer'> <view class='mainlisttext'>真实姓名</view> <input class='mainlistinput' placeholder='请输入真实姓名' maxlength='25' bindinput='nameinput'></input> </view> <!--证件类型 --> <view class='mainlistcontainer'> <view class='mainlisttext'>证件类型</view> <view class='cardtext'>*居民身份证</view> </view> <!--证件号码 --> <view class='mainlistcontainer'> <view class='mainlisttext'>证件号码</view> <input class='mainlistinput' type='idcard' placeholder='请输入身份证号码' maxlength="18" bindinput='cardinput'></input> </view> <!--邮箱 --> <view class='mainlistcontainer'> <view class='mainlisttext'>邮箱</view> <input class='mainlistinput' placeholder='请输入常用的邮箱地址' bindinput='emailinput'></input> </view> </view> <!--nextbutton --> <view class='nextbutton' bindtap='registersuccesstap'>下一步,完成</view>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 汽车智能时代到来 巨头如何站队?