云开发(微信-小程序)笔记(十三)---- 注册登陆

简介: 云开发(微信-小程序)笔记(十三)---- 注册登陆

云开发(微信-小程序)笔记(十二)---- 搜索

1.简介

注册,登陆是软件的最常见的页面功能,此章与下一节将围绕着注册登陆功能进行优化。

2.注册

2-1.在app.json添加注册页面

"pages": [
    "pages/zhuce/zhuce", //添加的
    "pages/index/index",  //自带的
]

保存,就可以看见pages目录下有zhuce的子目录出现。

2-2.编写zhuce.js文件

自定义要求如下
账号(4~10位)
手机号(11位)
密码(6~25位)

// pages/zhuce/zhuce.js
Page({
  data: {
    name: '',
    phone: '',
    password: ''
  },
  //获取用户账号
  getName(e) {
    this.setData({
      name: e.detail.value
    })
  },
  //回去用户的手机号
  getphone(e){
    this.setData({
      phone: e.detail.value
    })
  },
  //获取用户密码
  getpassword(e) {
    this.setData({
      password: e.detail.value
    })
  },
  //注册功能
  zhuce() {
    //从data中拿取变量
    let password = this.data.password
    let name = this.data.name
    let phone = this.data.phone
    //账号的判断(4~10)
    if (name.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }
    if (name.length > 10) {
      wx.showToast({
        icon: 'none',
        title: '账号最多10位',
      })
      return
    }
    //判断电话号码(11位)
    if (phone.length < 11){
      wx.showToast({
        icon: 'none',
        title: '电话号码至少11位',
      })
      return
    }
    if (phone.length > 11){
      wx.showToast({
        icon: 'none',
        title: '电话号码最多11位',
      })
      return
    }
    //密码判断(6~25)
    if (password.length < 6) {
      wx.showToast({
        icon: 'none',
        title: '密码至少6位',
      })
      return
    }
    if (password.length > 25) {
      wx.showToast({
        icon: 'none',
        title: '密码最多25位',
      })
      return
    }
    //实现注册
    wx.cloud.database().collection('user').add({
      data: {
        name: name,
        password: password,
        phone: phone
      },
      success(res) {
        console.log('注册成功', res)
        wx.showToast({
          icon: 'success',
          title: '注册成功',
        })
      },
      fail(res) {
        console.log('注册失败', res)
      }
    })
  },
})

2-3.编写zhuce.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "注册"
}

2-4.编写zhuce.wxml文件(编写看的见的页面)

<!--pages/zhuce/zhuce.wxml-->
输入账号
<input bindinput="getName"></input>
输入手机号
<input bindinput="getphone"></input>
输入密码
<input bindinput="getpassword"></input>
<button bindtap="zhuce" type="default">注册</button>

2-5.编写zhuce.wxss文件(边框等一些样式)

/* pages/zhuce/zhuce.wxss */
input{
  border: 1px solid gray;
  margin: 10rpx;
  border-radius: 10rpx;

2-6.效果图

8944a3956b697809c513d5b27d3ef55.png

3.登陆

3-1.在app.json添加登陆页面

"pages": [
    "pages/longin/longin",  //登陆页面
    "pages/zhuce/zhuce",  //之前添加

3-2.编写longin.js文件

自定义要求

账号要在4~6位

用户输入的密码与数据库的密码进行比对

// pages/longin/longin.js
Page({
  data: {
    name: '',
    password: ''
  },
  //获取用户账号
  getName(e) {
    this.setData({
      name: e.detail.value
    })
  },
  //获取用户密码
  getpassword(e) {
    this.setData({
      password: e.detail.value
    })
  },
  //登陆
  denglu() {
    let name = this.data.name
    let password = this.data.password
    //账号的判断(4~10)
    if (name.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }
    if (name.length > 10) {
      wx.showToast({
        icon: 'none',
        title: '账号最多10位',
      })
      return
    }
    wx.cloud.database().collection('user').where({
        name: name
      })
      .get({
        success(res) {
          console.log('获取数据成功', res)
          let user = res.data[0]
          if (password == user.password) {
            console.log('登陆成功')
            wx.showToast({
              icon: 'success',
              title: '登陆成功',
            })
            // //登陆成功后实现跳页
            // wx.navigateTo({
            //   url: '/pages/goods/goods?name=' + user.name,
            // })
          } else {
            console.log('登陆失败')
            wx.showToast({
              icon: 'none',
              title: '密码或账号不正确',
            })
          }
        },
        fail(res) {
          console.log('获取数据失败', res)
        }
      })
  }
})

3-3.编写longin.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "登陆"
}

3-4.编写longin.wxml文件

<!--pages/longin/longin.wxml-->
输入账号
<input bindinput="getName"></input>
输入密码
<input bindinput="getpassword"></input>
<button bindtap="denglu" type="default">登陆</button>

3-5.编写longin.wxss文件

/* pages/longin/longin.wxss */
input{
  border: 1px solid gray;
  margin: 10rpx;
  border-radius: 10rpx;
}

3-6.效果图

4.实现注册完成后,跳转登陆页

主要优化如下

4-1.修改longin.js文件

// pages/longin/longin.js
Page({
  data: {
    name: '',
    password: ''
  },
  //获取用户账号
  getName(e) {
    this.setData({
      name: e.detail.value
    })
  },
  //获取用户密码
  getpassword(e) {
    this.setData({
      password: e.detail.value
    })
  },
  //登陆
  denglu() {
    let name = this.data.name
    let password = this.data.password
    //账号的判断(4~10)
    if (name.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }
    if (name.length > 10) {
      wx.showToast({
        icon: 'none',
        title: '账号最多10位',
      })
      return
    }
    wx.cloud.database().collection('user').where({
        name: name
      })
      .get({
        success(res) {
          console.log('获取数据成功', res)
          let user = res.data[0]
          if (password == user.password) {
            console.log('登陆成功')
            wx.showToast({
              icon: 'success',
              title: '登陆成功',
            })
            //登陆成功后实现跳转商品详情页
            wx.navigateTo({
               url: '/pages/goods/goods?name=' + user.name,//携带账号进行跳页
             })
          } else {
            console.log('登陆失败')
            wx.showToast({
              icon: 'none',
              title: '密码或账号不正确',
            })
          }
        },
        fail(res) {
          console.log('获取数据失败', res)
        }
      })
  },
  //跳转到注册页,进行注册
  getlongin(){
    wx.navigateTo({
      url: '/pages/zhuce/zhuce', //跳转到注册页
    })
  }
})

这里的商品详情页在云开发(微信-小程序)笔记(八)----云存储,你来了(中)里有

4-2.修改longin.wxml文件

<!--pages/longin/longin.wxml-->
输入账号
<input bindinput="getName"></input>
输入密码
<input bindinput="getpassword"></input>
<button bindtap="denglu" type="default">登陆</button>
<button bindtap="getlongin" type="default">注册</button>

4-3.修改zhuce.js文件

// pages/zhuce/zhuce.js
Page({
  data: {
    name: '',
    phone: '',
    password: ''
  },
  //获取用户账号
  getName(e) {
    this.setData({
      name: e.detail.value
    })
  },
  //回去用户的手机号
  getphone(e){
    this.setData({
      phone: e.detail.value
    })
  },
  //获取用户密码
  getpassword(e) {
    this.setData({
      password: e.detail.value
    })
  },
  //注册功能
  zhuce() {
    //从data中拿取变量
    let password = this.data.password
    let name = this.data.name
    let phone = this.data.phone
    //账号的判断(4~10)
    if (name.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }
    if (name.length > 10) {
      wx.showToast({
        icon: 'none',
        title: '账号最多10位',
      })
      return
    }
    //判断电话号码(11位)
    if (phone.length < 11){
      wx.showToast({
        icon: 'none',
        title: '电话号码至少11位',
      })
      return
    }
    if (phone.length > 11){
      wx.showToast({
        icon: 'none',
        title: '电话号码最多11位',
      })
      return
    }
    //密码判断(6~25)
    if (password.length < 6) {
      wx.showToast({
        icon: 'none',
        title: '密码至少6位',
      })
      return
    }
    if (password.length > 25) {
      wx.showToast({
        icon: 'none',
        title: '密码最多25位',
      })
      return
    }
    //实现注册
    wx.cloud.database().collection('user').add({
      data: {
        name: name,
        password: password,
        phone: phone
      },
      success(res) {
        console.log('注册成功', res)
        wx.showToast({
          icon: 'success',
          title: '注册成功',
        })
        //注册成功后跳转登陆页
        wx.navigateTo({
          url: '/pages/longin/longin'//跳转登陆页
        })
      },
      fail(res) {
        console.log('注册失败', res)
      }
    })
  },
})

5.登陆后携带数据到商品详情页(goods)

商品详情页在云开发(微信-小程序)笔记(八)----云存储,你来了(中)里有,这里有些修改如下

5-1.优化goods.js部分

// pages/goods/goods.js
Page({
  data:{
     name: ''
  },
  //请求商品信息
  getList(){
    wx.cloud.database().collection('Goods').get()
    .then(res => {
      console.log('请求成功!',res)
      wx.stopPullDownRefresh() //停止刷新动画
      this.setData({
        list: res.data
      })
    })
    .catch(res => {
      console.log('请求失败!',res)
    })
  },
  //请求商品数据
  onLoad(options){
    //携带的数据
    this.setData({
      name: options.name
    })
    wx.startPullDownRefresh()  //开启刷新动画
    this.getList()
  },
  //监听用户下拉动作,并更新商品信息
  onPullDownRefresh: function(){
    console.log('下拉刷新监听中!')
    //自动开启刷新动画
    this.getList()
  },
  //点击后,跳转页面
  go(e){
    console.log(e.currentTarget.dataset.id)
    wx.navigateTo({
      url: '/pages/goods-1/goods-1?id=' + e.currentTarget.dataset.id,
    })
  },
})

5-2.优化goods.wxml部分

<!--pages/goods/goods.wxml-->
<text>{{name}},欢迎你的到来!</text>
<view wx:for="{{list}}">
  <view class="it" bindtap="go" data-id="{{item._id}}">
    <image src="{{item.img}}" class="img"></image>
    <text>商品名:{{item.name}},价格:{{item.price}}</text>
  </view>
</view>

6.效果图(视频)

https://live.csdn.net/v/208539

小程序注册登陆效果图

云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)

感谢大家,点赞,收藏,关注,评论!

目录
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
15天前
|
小程序 Android开发
|
4天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
20 3
|
10天前
|
小程序
|
11天前
|
小程序 数据安全/隐私保护
|
10天前
|
小程序
|
16天前
|
小程序
|
16天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
14天前
|
小程序

热门文章

最新文章