微信小程序云开发(数据库)详解


Posted in Javascript onMay 17, 2019

开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
基于jquery编写分页插件
Mar 07 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
JS实现的自定义map方法示例
May 17 #Javascript
javascript异步编程的六种方式总结
May 17 #Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 #Javascript
angular4应用中输入的最小值和最大值的方法
May 17 #Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
详解 微信小程序开发框架(MINA)
May 17 #Javascript
Vue模板语法中数据绑定的实例代码
May 17 #Javascript
You might like
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php常用Stream函数集介绍
2013/06/24 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
React Router基础使用
2017/01/17 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
PyTorch实现AlexNet示例
2020/01/14 Python
python如何爬取网页中的文字
2020/07/28 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
工程总经理工作职责
2013/12/09 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
党员身份证明材料
2015/06/19 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
深入详解JS函数的柯里化
2021/06/09 Javascript
基于Redission的分布式锁实战
2022/08/14 Redis