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

云开发（微信-小程序）笔记（十二）---- 搜索

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.效果图

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

小程序注册登陆效果图

云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）

感谢大家，点赞，收藏，关注，评论！