微信小程序登录注册——云开发

微信小程序登录注册页面_云开发_调用云数据库

1.界面展示

2.代码

1.云开发初始化

app js

//app.js
  App({
    onLaunch: function() {
    //云开发初始化
    wx.cloud.init({
      env: 'ljb-7tdjm',
      traceUser: true
    })
  }
 })

云开发初始化，env为自己的云端环境ID

2.register页面

wxml

<!--pages/register/register.wxml-->
<view>
<i-input  bind:change='inputName' maxlength="15" title="账号"
 autofocus placeholder="请输入账号" />
<i-input  bind:change='inputPassword' type="password" 
maxlength="15" title="密码" autofocus placeholder="请输入密码" />
<i-button bindtap='register' type="success">注册</i-button>
</view>

js

let app = getApp();
//获取云数据库引用
const db = wx.cloud.database();
const admin = db.collection('adminlist');
let name = null;
let password = null;

Page({
  data: {
   
  },
 
  //输入用户名
  inputName: function (event) {
    name = event.detail.detail.value
  },
  //输入密码
  inputPassword(event) {
    password = event.detail.detail.value
  },
  //注册
  register() {
    let that = this;
    let flag = false  //是否存在 true为存在
    //查询用户是否已经注册
    admin.get({
      success: (res) => {
        let admins = res.data;  //获取到的对象数组数据
         console.log(admins);
        for (let i = 0; i < admins.length; i++) {  //遍历数据库对象集合
          if (name === admins[i].name) { //用户名存在
            flag = true;
              break;
          }
        }
        if (flag === true) {    //已注册
          wx.showToast({
            title: '账号已注册！',
            icon: 'success',
            duration: 2500
          })
        } else {  //未注册
          that.saveuserinfo()
        }
      }
    })
  },
  //注册用户信息
  saveuserinfo() {
    let that = this;
    admin.add({  //添加数据
      data: {
        name: name,
        password: password
      }
    }).then(res => {
      console.log('注册成功！')
      wx.showToast({
        title: '注册成功！',
        icon: 'success',
        duration: 3000
      })
      wx.redirectTo({
        url: '/pages/login/login',
      })
    })
  }
})

const admin = db.collection(‘填写自己的云开发集合名称’);

2.login页面

wxml

<view class="header">
<text>微平台-学生端</text>
</view>
<view>
<i-input bind:change='inputName' maxlength="15" title="账号"
 placeholder="请输入账号" />
<i-input bind:change='inputPassword' maxlength="15" 
title="密码" type="password" placeholder="请输入密码" />
<i-button bindtap='login' type="primary">登录</i-button>
<i-button bindtap='register' type="success">注册</i-button>
</view>

js

// pages/login/login.js
let app = getApp();
// 获取云数据库引用
const db = wx.cloud.database();
const admin = db.collection('adminlist');
let name = null;
let password = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  //输入用户名
  inputName: function (event) {
    name = event.detail.detail.value
  },
  //输入密码
  inputPassword(event) {
    password = event.detail.detail.value
  },
  //登陆
  login() {
    let that = this;
    //登陆获取用户信息
    admin.get({
      success: (res) => {
        let user = res.data;
        // console.log(res.data);
        for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
          if (name === user[i].name) { //用户名存在
            if (password !== user[i].password) {  //判断密码是否正确
              wx.showToast({
                title: '密码错误！！',
                icon: 'success',
                duration: 2500
              })
            } else {
              console.log('登陆成功！')
              wx.showToast({
                title: '登陆成功！！',
                icon: 'success',
                duration: 2500
              })
              wx.switchTab({
                url: "../index/index",
              })
            }
          } else {   //不存在
            wx.showToast({
              title: '无此用户名！！',
              icon: 'success',
              duration: 2500
            })
          }
        }
      }
    })
  },
  register() {
    wx.navigateTo({
      url: '/pages/register/register'
    })
  }
  })
  
```中期课程小微小程序https://download.csdn.net/download/lujiebin/11241027源码
仅供学习交流~~~