小程序云开发入门——登录注册页

最新推荐文章于 2024-04-05 00:33:24 发布

TaylorZ9826

最新推荐文章于 2024-04-05 00:33:24 发布

阅读量3.2k

点赞数 7

分类专栏：登陆注册文章标签：小程序云开发 javascript vue.js

本文链接：https://blog.csdn.net/TaylorZ9826/article/details/123066501

版权

准备工作

1.新建一个项目，选择不使用云开发，并填写好自己的APPID

2.删除pages->index文件夹下的index.js、index.wxml、index.wxss文件里的内容

3.设置输入的布局和样式

输入用户名
<input class="input"></input>
输入用户账号
<input class="input"></input>
输入您的密码
<input class="input"></input>

.input{
  border:1px solid gray;
  margin: 15rpx;
}

获取用户的输入值

1.在输入框中设置bindinput的三个获取函数getName、getZhangHao、getMiMa

2.js文件打印获取输入值

3.添加一个注册按钮

<button bindtap="zhuce" type="primary">注册</button>

//注册
  zhuce(){
    console.log('点击了注册')
  }

4.data里面定义name、zhanghao、mima三个变量，用来存值

分别在 getName、getZhangHao、getMiMa三个函数里面进行赋值

//  获取用户名
  getName(e) {
    console.log('获取用户名', e.detail.value)
    //赋值
    this.setData({
      name: e.detail.value
    })
  }

最后在注册点击按钮里面进行取值，存至数据库

//注册
  zhuce() {
    //取值
    let username=this.data.name
    let userzhanghao=this.data.zhanghao
    let usermima=this.data.mima
    console.log('点击了注册')
  }

校验用户输入值是否符合规范

可用if进行判别，弹窗进行提醒

//注册
  zhuce() {
    //取值
    let username = this.data.name
    let userzhanghao = this.data.zhanghao
    let usermima = this.data.mima
    console.log('点击了注册')
    //校验用户名
    if (username.length < 2) {
      wx.showToast({
        icon: 'error',
        title: '用户名至少2位',
      })
      //继续往下执行
      return
    }
    if (username.length > 10) {
      wx.showToast({
        icon: 'error',
        title: '用户名不超过10位',
      })
      return
    }
    //校验账号
    if (userzhanghao.length < 4) {
      wx.showToast({
        icon: 'error',
        title: '账号