快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

微信小程序云开发数据库的示例分析

小编给大家分享一下微信小程序云开发数据库的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司专注于企业全网整合营销推广、网站重做改版、日喀则网站定制设计、自适应品牌网站建设、H5网站设计、商城系统网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为日喀则等各大城市提供网站开发制作服务。

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

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


 


 

立即登录
注册账号

注册第一步的WXML



 



 
 
  1
  创建账户
 
 
 
  2
  完善个人信息
 
 
 
  3
  注册成功
 
 
 


 
 
  用户名
  
 
 
 
  密码
  
 
 
 
  确认密码
  
 



 
 我已阅读并接受
 《用户注册条款》


下一步，完善个人信息


 已有账号
 请绑定

注册第二步WXML



 



 
 
  1
  创建账户
 
 
 
  2
  完善个人信息
 
 
 
  3
  注册成功
 
 
 



 
 
  手机
  
 
 
 
  真实姓名
  
 
 
 
  证件类型
  中华人民共和国居民身份证
 
 
 
  证件号码
  
 
 
 
  邮箱
  
 


下一步，完成

以上是“微信小程序云开发数据库的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


网站标题：微信小程序云开发数据库的示例分析
分享URL：http://6mz.cn/article/pdhdso.html

其他资讯