微信小程序云开发

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

 版权声明: https://blog.csdn.net/qq_40999496/article/details/82773484

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

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

目前提供三大基础能力支持:

           1、云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

           2、数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

           3、存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

具体的可以去小程序文档上查看,下面用一个登录注册的案例来演示小程序云开发数据库的运用

注册

微信小程序云开发微信小程序云开发

在创建的时候,要在点下一步的时候,调数据库来看用户名有没有重复的。在点击同意的时候来调用数据库,然后把所有的判断放到下一步来判断。所有条件都满足就将用户名和密码放到全局变量中。

  1.  
    var app = getApp();
  2.  
    Page({
  3.  
    data: {
  4.  
    userName: ‘‘,
  5.  
    userPassword: ‘‘,
  6.  
    userPasswordAgain: ‘‘,
  7.  
    checkbox: false,
  8.  
    repetition: false
  9.  
    },
  10.  
    // 返回主页面
  11.  
    backHomeTap: function() {
  12.  
    wx.switchTab({
  13.  
    url: ‘../index/index‘,
  14.  
    })
  15.  
    },
  16.  
    // 绑定
  17.  
    bindingTap: function () {
  18.  
    wx.redirectTo({
  19.  
    url: ‘../login/login‘,
  20.  
    })
  21.  
    },
  22.  
    // 用户名
  23.  
    userNameInput: function(e) {
  24.  
    this.setData({
  25.  
    userName: e.detail.value
  26.  
    });
  27.  
    },
  28.  
    // 密码
  29.  
    userPasswordInput: function(e) {
  30.  
    this.setData({
  31.  
    userPassword: e.detail.value
  32.  
    });
  33.  
    },
  34.  
    // 再次输入密码
  35.  
    userPasswordAgainInput: function(e) {
  36.  
    this.setData({
  37.  
    userPasswordAgain: e.detail.value
  38.  
    });
  39.  
    },
  40.  
    // 同意
  41.  
    checkboxChange: function() {
  42.  
    if (this.data.checkbox === false) {
  43.  
    this.setData({
  44.  
    checkbox: true
  45.  
    })
  46.  
    } else {
  47.  
    this.setData({
  48.  
    checkbox: false
  49.  
    })
  50.  
    }
  51.  
    var that = this;
  52.  
    var userName = this.data.userName;
  53.  
    // 初始化云
  54.  
    wx.cloud.init({
  55.  
    env: ‘wubaib-9543f7‘,
  56.  
    traceUser: true
  57.  
    });
  58.  
    // 初始化数据库
  59.  
    const db = wx.cloud.database();
  60.  
    const _ = db.command;
  61.  
    db.collection(‘userInformation‘).where({
  62.  
    userName: _.eq(userName)
  63.  
    }).get({
  64.  
    success: function (res) {
  65.  
    if (res.data.length === 1) {
  66.  
    that.setData({
  67.  
    repetition: true
  68.  
    })
  69.  
    }
  70.  
    }
  71.  
    })
  72.  
    },
  73.  
    // 下一步,完善个人信息
  74.  
    perfectInforTap: function() {
  75.  
    var userName = this.data.userName;
  76.  
    var userPassword = this.data.userPassword;
  77.  
    var checkbox = this.data.checkbox;
  78.  
    var userPasswordAgain = this.data.userPasswordAgain;
  79.  
    var name = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
  80.  
    var repetition = this.data.repetition;
  81.  
    if (userName === ‘‘) {
  82.  
    wx.showToast({
  83.  
    title: ‘请输入用户名‘,
  84.  
    icon: ‘none‘,
  85.  
    duration: 2000,
  86.  
    mask: true
  87.  
    })
  88.  
    } else if (!name.test(userName)) {
  89.  
    wx.showToast({
  90.  
    title: ‘用户名格式不正确‘,
  91.  
    icon: ‘none‘,
  92.  
    duration: 2000,
  93.  
    mask: true
  94.  
    })
  95.  
    } else if (repetition === true) {
  96.  
    wx.showToast({
  97.  
    title: ‘用户名已存在‘,
  98.  
    icon: ‘none‘,
  99.  
    duration: 2000,
  100.  
    mask: true
  101.  
    })
  102.  
    } else if (userPassword === ‘‘) {
  103.  
    wx.showToast({
  104.  
    title: ‘请输入密码‘,
  105.  
    icon: ‘none‘,
  106.  
    duration: 2000,
  107.  
    mask: true
  108.  
    })
  109.  
    } else if (userPassword.length < 6) {
  110.  
    wx.showToast({
  111.  
    title: ‘密码最少6位‘,
  112.  
    icon: ‘none‘,
  113.  
    duration: 2000,
  114.  
    mask: true
  115.  
    })
  116.  
    } else if (userPassword !== userPasswordAgain) {
  117.  
    wx.showToast({
  118.  
    title: ‘两次密码输入不一致‘,
  119.  
    icon: ‘none‘,
  120.  
    duration: 2000,
  121.  
    mask: true
  122.  
    })
  123.  
    } else if (checkbox === false) {
  124.  
    wx.showToast({
  125.  
    title: ‘请选中已阅读‘,
  126.  
    icon: ‘none‘,
  127.  
    duration: 2000,
  128.  
    mask: true
  129.  
    })
  130.  
    } else {
  131.  
    wx.redirectTo({
  132.  
    url: ‘perfectInfor/perfectInfor‘,
  133.  
    })
  134.  
    // 保存用户名和密码
  135.  
    app.appData.account = {
  136.  
    userName: userName,
  137.  
    userPassword: userPassword
  138.  
    }
  139.  
    }
  140.  
    }
  141.  
    })

在完善信息的时候获取所有的变量(用户名和密码也在内),然后在点击下一步完成按钮将数据上传到数据库。

  1.  
    ?
  2.  
    var app = getApp();
  3.  
    Page({
  4.  
    data: {
  5.  
    userName: ‘‘,
  6.  
    userPassword: ‘‘,
  7.  
    phone: ‘‘,
  8.  
    realName: ‘‘,
  9.  
    card: ‘‘,
  10.  
    email: ‘‘,
  11.  
    },
  12.  
    // 返回主界面
  13.  
    backHomeTap: function() {
  14.  
    wx.switchTab({
  15.  
    url: ‘../../index/index‘,
  16.  
    })
  17.  
    },
  18.  
    // 手机号
  19.  
    phoneInput: function(e) {
  20.  
    this.setData({
  21.  
    phone: e.detail.value
  22.  
    });
  23.  
    },
  24.  
    // 真实姓名
  25.  
    nameInput: function(e) {
  26.  
    this.setData({
  27.  
    realName: e.detail.value
  28.  
    });
  29.  
    },
  30.  
    // 身份证
  31.  
    cardInput: function(e) {
  32.  
    this.setData({
  33.  
    card: e.detail.value
  34.  
    })
  35.  
    },
  36.  
    // email
  37.  
    emailInput: function(e) {
  38.  
    this.setData({
  39.  
    email: e.detail.value
  40.  
    })
  41.  
    },
  42.  
    // 下一步完成
  43.  
    registerSuccessTap: function() {
  44.  
    var phone = this.data.phone;
  45.  
    var realName = this.data.realName;
  46.  
    var card = this.data.card;
  47.  
    var email = this.data.email;
  48.  
    var userName = this.data.userName;
  49.  
    var userPassword = this.data.userPassword;
  50.  
    var phonereg = /^1[345789]\d{9}$/;
  51.  
    var namereg = /^[\u4E00-\u9FA5]+$/;
  52.  
    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])$/;
  53.  
    var emailreg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
  54.  
    var that = this;
  55.  
    if (phone === ‘‘) {
  56.  
    wx.showToast({
  57.  
    title: ‘请输入手机号‘,
  58.  
    icon: ‘none‘,
  59.  
    duration: 2000,
  60.  
    mask: true
  61.  
    });
  62.  
    } else if (!phonereg.test(phone)) {
  63.  
    wx.showToast({
  64.  
    title: ‘请输入正确的手机号‘,
  65.  
    icon: ‘none‘,
  66.  
    duration: 2000,
  67.  
    mask: true
  68.  
    })
  69.  
    } else if (!namereg.test(realName)) {
  70.  
    wx.showToast({
  71.  
    title: ‘请输入正确的名字‘,
  72.  
    icon: ‘none‘,
  73.  
    duration: 2000,
  74.  
    mask: true
  75.  
    })
  76.  
    } else if (card === ‘‘) {
  77.  
    wx.showToast({
  78.  
    title: ‘请输入身份证‘,
  79.  
    icon: ‘none‘,
  80.  
    duration: 2000,
  81.  
    mask: true
  82.  
    })
  83.  
    } else if (!cardreg.test(card)) {
  84.  
    wx.showToast({
  85.  
    title: ‘请输入正确的身份证‘,
  86.  
    icon: ‘none‘,
  87.  
    duration: 2000,
  88.  
    mask: true
  89.  
    })
  90.  
    } else if (email === ‘‘) {
  91.  
    wx.showToast({
  92.  
    title: ‘请输入邮箱‘,
  93.  
    icon: ‘none‘,
  94.  
    duration: 2000,
  95.  
    mask: true
  96.  
    })
  97.  
    } else if (!emailreg.test(email)) {
  98.  
    wx.showToast({
  99.  
    title: ‘请输入正确的邮箱‘,
  100.  
    icon: ‘none‘,
  101.  
    duration: 2000,
  102.  
    mask: true
  103.  
    })
  104.  
    } else {
  105.  
    // 初始化云
  106.  
    wx.cloud.init({
  107.  
    env: ‘wubaib-9543f7‘,
  108.  
    traceUser: true
  109.  
    });
  110.  
    // 初始化数据库
  111.  
    const db = wx.cloud.database();
  112.  
    db.collection(‘userInformation‘).add({
  113.  
    // data 字段表示需新增的 JSON 数据
  114.  
    data: {
  115.  
    realName: realName,
  116.  
    userName: userName,
  117.  
    userPassword: userPassword,
  118.  
    phone: phone,
  119.  
    email: email,
  120.  
    card: card
  121.  
    },
  122.  
    success: function(res) {
  123.  
    // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
  124.  
    console.log(res);
  125.  
    console.log(res.errMsg);
  126.  
    }
  127.  
    })
  128.  
    }
  129.  
    },
  130.  
     
  131.  
    /**
  132.  
    * 生命周期函数--监听页面显示
  133.  
    */
  134.  
    onShow: function() {
  135.  
    this.setData({
  136.  
    userName: app.appData.account.userName,
  137.  
    userPassword: app.appData.account.userPassword
  138.  
    })
  139.  
    },
  140.  
    })
  141.  
     
  142.  
    ?

登录

在登录页面,先获取用户输入的用户名和密码。在点击登录的时候,先根据userName调数据库的密码和用户输入的密码是否相等。如果相等将用户的信息保存到全局变量中。

  1.  
    ?
  2.  
    var app = getApp();
  3.  
    Page({
  4.  
    data: {
  5.  
    bindName: ‘‘,
  6.  
    bindPassword: ‘‘,
  7.  
    isChecked: false,
  8.  
    userName: ‘‘,
  9.  
    phone: ‘‘,
  10.  
    realName: ‘‘,
  11.  
    card: ‘‘,
  12.  
    email: ‘‘,
  13.  
    userId: ‘‘
  14.  
    },
  15.  
    // 点击注册账号
  16.  
    registerTap: function() {
  17.  
    wx.redirectTo({
  18.  
    url: ‘../register/register‘
  19.  
    })
  20.  
    },
  21.  
    // 获取用户名
  22.  
    bindNameInput: function(e) {
  23.  
    this.setData({
  24.  
    bindName: e.detail.value
  25.  
    })
  26.  
    var that = this;
  27.  
    if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
  28.  
    this.setData({
  29.  
    isChecked: true
  30.  
    })
  31.  
    } else if (that.data.bindName.length === 0) {
  32.  
    this.setData({
  33.  
    isChecked: false
  34.  
    })
  35.  
    }
  36.  
    },
  37.  
    // 获取密码
  38.  
    bindPasswordInput: function(e) {
  39.  
    this.setData({
  40.  
    bindPassword: e.detail.value
  41.  
    })
  42.  
    var that = this;
  43.  
    if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
  44.  
    this.setData({
  45.  
    isChecked: true
  46.  
    })
  47.  
    } else if (that.data.bindPassword.length === 0) {
  48.  
    this.setData({
  49.  
    isChecked: false
  50.  
    })
  51.  
    }
  52.  
    },
  53.  
    // 点击登录
  54.  
    bindingSuccess: function() {
  55.  
    var that = this;
  56.  
    var bindName = that.data.bindName;
  57.  
    var bindPassword = that.data.bindPassword;
  58.  
    if (bindName.length !== 0 && bindPassword.length !== 0) {
  59.  
    // 初始化云
  60.  
    wx.cloud.init({
  61.  
    env: ‘wubaib-9543f7‘,
  62.  
    traceUser: true
  63.  
    });
  64.  
    // 初始化数据库
  65.  
    const db = wx.cloud.database();
  66.  
    db.collection(‘userInformation‘).where({
  67.  
    userName: bindName
  68.  
    }).get().then(res => {
  69.  
    console.log(res.data);
  70.  
    if (res.data[0].userPassword === bindPassword) {
  71.  
    console.log("登录成功");
  72.  
    // 保存手机号,真实姓名,身份证号,邮箱 保存用户名
  73.  
    that.setData({
  74.  
    userName: res.data[0].userName,
  75.  
    phone: res.data[0].phone,
  76.  
    realName: res.data[0].realName,
  77.  
    card: res.data[0].card,
  78.  
    email: res.data[0].email,
  79.  
    userId: res.data[0]._id
  80.  
    })
  81.  
    app.appData.userinfo = {
  82.  
    phone: that.data.phone,
  83.  
    realName: that.data.realName,
  84.  
    card: that.data.card,
  85.  
    email: that.data.email
  86.  
    }
  87.  
    app.appData.account = {
  88.  
    userName: that.data.userName
  89.  
    }
  90.  
    app.appData.userId = {
  91.  
    userId: that.data.userId
  92.  
    }
  93.  
    wx.switchTab({
  94.  
    url: ‘../personalCenter/personalCenter‘,
  95.  
    })
  96.  
    } else {
  97.  
    wx.showToast({
  98.  
    title: ‘用户名或密码错误‘,
  99.  
    icon: ‘none‘,
  100.  
    duration: 2000
  101.  
    })
  102.  
    }
  103.  
    })
  104.  
    }
  105.  
    },
  106.  
    })
  107.  
     
  108.  
    ?

登录WXML

  1.  
    <view class=‘phoneNumberContainer‘>
  2.  
    <input placeholder=‘用户名‘ maxlength=‘11‘ bindinput="bindNameInput"></input>
  3.  
    </view>
  4.  
    <view class=‘passwordContainer‘>
  5.  
    <input placeholder=‘密码‘ password="true" bindinput="bindPasswordInput"></input>
  6.  
    </view>
  7.  
    <view class="{{isChecked?‘bindingChecked‘:‘bindingNormal‘}}" bindtap=‘bindingSuccess‘>立即登录</view>
  8.  
    <view class=‘registerContainer‘ bindtap=‘registerTap‘>注册账号</view>

注册第一步的WXML

  1.  
    <!--返回主页 -->
  2.  
    <view class=‘backHome‘ bindtap=‘backHomeTap‘>
  3.  
    <image src=‘/images/homeIcon.png‘ class=‘backHomeImg‘></image>
  4.  
    </view>
  5.  
    <!--头部 -->
  6.  
    <view class=‘headerContainer‘>
  7.  
    <!--创建账户 -->
  8.  
    <view class=‘headerListContainer headerListActive‘>
  9.  
    <view class=‘headerListView‘>1</view>
  10.  
    <text class=‘headerListText‘>创建账户</text>
  11.  
    </view>
  12.  
    <!--完善个人信息 -->
  13.  
    <view class=‘headerListContainer‘>
  14.  
    <view class=‘headerListView‘>2</view>
  15.  
    <text class=‘headerListText‘>完善个人信息</text>
  16.  
    </view>
  17.  
    <!--注册成功 -->
  18.  
    <view class=‘headerListContainer‘>
  19.  
    <view class=‘headerListView‘>3</view>
  20.  
    <text class=‘headerListText‘>注册成功</text>
  21.  
    </view>
  22.  
    <view class=‘transverseLineLeft‘></view>
  23.  
    <view class=‘transverseLineright‘></view>
  24.  
    </view>
  25.  
    <view class=‘mainContainer‘>
  26.  
    <!--用户名 -->
  27.  
    <view class=‘mainListContainer‘>
  28.  
    <view class=‘mainListText‘>用户名</view>
  29.  
    <input class=‘mainListInput‘ placeholder=‘请输入数字,字母或中文‘ maxlength=‘25‘ bindinput=‘userNameInput‘></input>
  30.  
    </view>
  31.  
    <!--密码 -->
  32.  
    <view class=‘mainListContainer‘>
  33.  
    <view class=‘mainListText‘>密码</view>
  34.  
    <input class=‘mainListInput‘ placeholder=‘长度6~14位‘ password=‘true‘ maxlength=‘14‘ bindinput=‘userPasswordInput‘></input>
  35.  
    </view>
  36.  
    <!--确认密码 -->
  37.  
    <view class=‘mainListContainer‘>
  38.  
    <view class=‘mainListText‘>确认密码</view>
  39.  
    <input class=‘mainListInput‘ placeholder=‘请再次输入密码‘ password=‘true‘ maxlength=‘14‘ bindinput=‘userPasswordAgainInput‘></input>
  40.  
    </view>
  41.  
    </view>
  42.  
    <!--agree -->
  43.  
    <view class=‘agreeContainer‘>
  44.  
    <checkbox class=‘agreeCheckbox‘ checked="{{check}}" bindtap="checkboxChange"/>
  45.  
    <text>我已阅读并接受</text>
  46.  
    <text class=‘clause‘>《用户注册条款》</text>
  47.  
    </view>
  48.  
    <!--nextButton -->
  49.  
    <view class=‘nextButton‘ bindtap=‘perfectInforTap‘>下一步,完善个人信息</view>
  50.  
    <!--binding -->
  51.  
    <view class=‘bindingContainer‘>
  52.  
    <text>已有账号</text>
  53.  
    <text class=‘binding‘ bindtap=‘bindingTap‘>请绑定</text>
  54.  
    </view>

注册第二步WXML

  1.  
    <!--返回主页 -->
  2.  
    <view class=‘backHome‘ bindtap=‘backHomeTap‘>
  3.  
    <image src=‘/images/homeIcon.png‘ class=‘backHomeImg‘></image>
  4.  
    </view>
  5.  
    <!--头部 -->
  6.  
    <view class=‘headerContainer‘>
  7.  
    <!--创建账户 -->
  8.  
    <view class=‘headerListContainer headerListOldActive‘>
  9.  
    <view class=‘headerListView‘>1</view>
  10.  
    <text class=‘headerListText‘>创建账户</text>
  11.  
    </view>
  12.  
    <!--完善个人信息 -->
  13.  
    <view class=‘headerListContainer headerListActive‘>
  14.  
    <view class=‘headerListView‘>2</view>
  15.  
    <text class=‘headerListText‘>完善个人信息</text>
  16.  
    </view>
  17.  
    <!--注册成功 -->
  18.  
    <view class=‘headerListContainer‘>
  19.  
    <view class=‘headerListView‘>3</view>
  20.  
    <text class=‘headerListText‘>注册成功</text>
  21.  
    </view>
  22.  
    <view class=‘transverseLineLeft‘></view>
  23.  
    <view class=‘transverseLineright‘></view>
  24.  
    </view>
  25.  
    <!--main -->
  26.  
    <view class=‘mainContainer‘>
  27.  
    <!--手机 -->
  28.  
    <view class=‘mainListContainer‘>
  29.  
    <view class=‘mainListText‘>手机</view>
  30.  
    <input class=‘mainListInput‘ placeholder=‘请输入手机号码‘ maxlength="11" bindinput=‘phoneInput‘></input>
  31.  
    </view>
  32.  
    <!--真实姓名 -->
  33.  
    <view class=‘mainListContainer‘>
  34.  
    <view class=‘mainListText‘>真实姓名</view>
  35.  
    <input class=‘mainListInput‘ placeholder=‘请输入真实姓名‘ maxlength=‘25‘ bindinput=‘nameInput‘></input>
  36.  
    </view>
  37.  
    <!--证件类型 -->
  38.  
    <view class=‘mainListContainer‘>
  39.  
    <view class=‘mainListText‘>证件类型</view>
  40.  
    <view class=‘cardText‘>*居民身份证</view>
  41.  
    </view>
  42.  
    <!--证件号码 -->
  43.  
    <view class=‘mainListContainer‘>
  44.  
    <view class=‘mainListText‘>证件号码</view>
  45.  
    <input class=‘mainListInput‘ type=‘idcard‘ placeholder=‘请输入身份证号码‘ maxlength="18" bindinput=‘cardInput‘></input>
  46.  
    </view>
  47.  
    <!--邮箱 -->
  48.  
    <view class=‘mainListContainer‘>
  49.  
    <view class=‘mainListText‘>邮箱</view>
  50.  
    <input class=‘mainListInput‘ placeholder=‘请输入常用的邮箱地址‘ bindinput=‘emailInput‘></input>
  51.  
    </view>
  52.  
    </view>
  53.  
    <!--nextButton -->
  54.  
    <view class=‘nextButton‘ bindtap=‘registerSuccessTap‘>下一步,完成</view>

 

微信小程序云开发

上一篇:微信小程序 - 浮层引导(示例)


下一篇:更改微信会员卡包内展示信息