When we develop a small program, it will use the landing registration function. We usually small program promising to provide authorized users login function, but this can only get the user's avatar and nickname, how are we to achieve the kind of small program registration and login account passwords it, today to bring you hands-on learning applet Log develop registration function.

Old rules, look at the effect of FIG.

The figure can be seen by our main achieve the following functions

1, the account password
2, account password Registration
3, logout
Here we look at the specific implementation

First, the principle to explain

Sign up for our account because the password is the account password set by the user to the database, the login account and password also taken to verify from the database. So we must have a database. If you use traditional databases do, too much trouble, so we help today applet cloud development database to do.

Second, write a small cloud development program

Cloud development of the knowledge I have said many times, do not know what the cloud is to develop the students can look at my history paper, or look at cloud development Basics video I recorded: "Zero-based entry-five hours applet cloud development "
matters to write cloud development when there are several points to note to tell you that the next

1, first registration procedures to obtain appid small, because only you can use appid Cloud Development
2, remember to initialize the cloud development environment id in app.js years, as shown below

Third, the user settings stored in user database (sets)

In the cloud development management background, click database, click the + sign, add user set (data table), below

Fourth, write the registration code

The code is very simple, I am here to give you the code corresponding stickers.

1, registration page wxml file

2, the registration page js file

Page({
data: {
name: '',
zhanghao: '',
mima: ''
},
//获取用户名
getName(event) {
console.log('获取输入的用户名', event.detail.value)
this.setData({
  name: event.detail.value
})
},
//获取用户账号
getZhangHao(event) {
console.log('获取输入的账号', event.detail.value)
this.setData({
  zhanghao: event.detail.value
})
},
// 获取密码
getMiMa(event) {
console.log('获取输入的密码', event.detail.value)
this.setData({
  mima: event.detail.value
})
},

//注册
zhuce() {
let name = this.data.name
let zhanghao = this.data.zhanghao
let mima = this.data.mima
console.log("点击了注册")
console.log("name", name)
console.log("zhanghao", zhanghao)
console.log("mima", mima)
//校验用户名
if (name.length < 2) {
  wx.showToast({
    icon: 'none',
    title: '用户名至少2位',
  })
  return
}
if (name.length > 10) {
  wx.showToast({
    icon: 'none',
    title: '用户名最多10位',
  })
  return
}
//校验账号
if (zhanghao.length < 4) {
  wx.showToast({
    icon: 'none',
    title: '账号至少4位',
  })
  return
}
//校验密码
if (mima.length < 4) {
  wx.showToast({
    icon: 'none',
    title: '密码至少4位',
  })
  return
}
//注册功能的实现
wx.cloud.database().collection('user').add({
  data: {
    name: name,
    zhanghao: zhanghao,
    mima: mima
  },
  success(res) {
    console.log('注册成功', res)
    wx.showToast({
      title: '注册成功',
    })
    wx.navigateTo({
      url: '../login/login',
    })
  },
  fail(res) {
    console.log('注册失败', res)
  }
})
}
})

3, wxss registration page (style) page is very simple

I only do simple style landscaping, mainly to achieve the function.

Fifth, the preparation of the landing page code

1, landing page wxml file

2, js landing pages (logical write) page

Page({
data: {
zhanghao: '',
mima: ''
},
//获取输入的账号
getZhanghao(event) {
//console.log('账号', event.detail.value)
this.setData({
  zhanghao: event.detail.value
})

},
//获取输入的密码
getMima(event) {
// console.log('密码', event.detail.value)
this.setData({
  mima: event.detail.value
})
},
//点击登陆
login() {
let zhanghao = this.data.zhanghao
let mima = this.data.mima
console.log('账号', zhanghao, '密码', mima)
if (zhanghao.length < 4) {
  wx.showToast({
    icon: 'none',
    title: '账号至少4位',
  })
  return
}
if (mima.length < 4) {
  wx.showToast({
    icon: 'none',
    title: '账号至少4位',
  })
  return
}

//登陆
wx.cloud.database().collection('user').where({
  zhanghao: zhanghao
}).get({
  success(res) {
    console.log("获取数据成功", res)
    let user = res.data[0]
    console.log("user", user)
    if (mima == user.mima) {
      console.log('登陆成功')
      wx.showToast({
        title: '登陆成功',
      })
      // wx.navigateTo({
      //   url: '../home/home?name=' + user.name,
      // })
      wx.navigateTo({
        url: '/pages/me/me',
      })
      //保存用户登陆状态
      wx.setStorageSync('user', user)
    } else {
      console.log('登陆失败')
      wx.showToast({
        icon: 'none',
        title: '账号或密码不正确',
      })
    }
  },
  fail(res) {
    console.log("获取数据失败", res)
  }
})

}
})

3, simple style

Sixth, the preparation of individual centers show and not landing in the landing, including logout function

1, wxml file as follows

2, js file as follows, logout and login status are stored inside


Page({
data: {
loginOK: false
},
//去登陆页
denglu() {
wx.navigateTo({
  url: '/pages/login/login',
})
},
//去注册页
zhuce() {
wx.navigateTo({
  url: '/pages/index/index',
})
},
onShow() {
let user = wx.getStorageSync('user')
if (user && user.name) {
  this.setData({
    loginOK: true,
    name: user.name
  })
} else {
  this.setData({
    loginOK: false
  })
}
},

//退出登陆
tuichu() {
wx.setStorageSync('user', null)
let user = wx.getStorageSync('user')
if (user && user.name) {
  this.setData({
    loginOK: true,
    name: user.name
  })
} else {
  this.setData({
    loginOK: false
  })
}
}

})


- 3，个人中心登陆成功的状态如下
![ ](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWJiNmQzMWQxNjBmZjQ5MjA?x-oss-process=image/format,png)

#### 到这里我们就完整的实现了小程序的登陆注册功能了，虽然比较简单，没有做密码加密等一些复杂的操作，但是我们基本的登陆注册原理就是这样实现的，你只有先把最基础的登陆注册功能实现，学习后面复杂的登陆注册，验证码登陆等一系列知识，才会游刃有余。

我把这节登陆注册功能的实现录制了一套课程出来，感兴趣的同学可以去看下，支持下石头哥。

Applet landing implementation of the registration function