小程序实战（2） | 用户注册界面搭建

之前讲了一些关于小程序、服务器、外部UI调用、云函数使用、数据库搭建，环境配置等**，在这里进行小程序的项目实战，来搭建一下用户注册界面，​这样可以加深巩固一下学习过的内容。这里是老刘，继续分享学习经验，供大家一同探讨交流​。

一、需求草图

      我们先在word中进行编辑，当然也可以用其它的工具进行页面设计，这里方便起见，老刘在word中画了一个草图，包含以下信息​：用户名、密码、确认密码、身份*号、手机号、疫苗接种次数、以及确认注册和取消注册的按钮​。

二、需求分析

•       界面部分，我们可以选用Vant Weapp来进行搭建​；
•       数据库部分，我们仍然选用小程序自带的数据库；
•       云函数部分，我们需要使用到云函数来返回AppID以及openID​；
•       环境配置，使用原有的小程序模板（删减后）进行框架搭建​。

三、项目启动

1. 界面部分

      Vant Weapp调用的几个关键点​：

      在pages文件夹鼠标右键调用出外部终端​。

      分别输入以下指令​：

npm init -y //回车

npm i @vant/weapp -s --production //回车      

关闭终端窗口，然后点击工具-->构建npm      在json文件中添加如下代码​，由于我们只是使用了field和button控件​，只需要将这两个加入进来就可以了。

{

  "usingComponents": {

    "van-field":"@vant/weapp/field/index",

    "van-button":"@vant/weapp/button/index"

  }

}

      我们在wxml文件中增加以下代码​：

<!--pages/UserRegister/UserRegister.wxml-->

<view class="juzhong">

  <text class="hello">用户注册 </text>

</view>

<van-cell-group>

  <van-field label="用户名" placeholder="请输入用户名" bind:change="onChange1" />

  <van-field type="password" label="设置密码" placeholder="请设置密码" bind:change="onChange2" />

  <van-field value="{{password1}}" type="password" label="确认密码" placeholder="请确认密码"  bind:change="onChange3" />

  <van-field label="身份*号" placeholder="请输入身份*号" bind:change="onChange4" />

  <van-field type ="number"label="手机号" placeholder="请输入手机号" bind:change="onChange5" />

  <van-field label="接种疫苗次数" placeholder="请填写接种疫苗次数" bind:change="onChange6" />

</van-cell-group>

<view class='container'>

  <button type="primary" size="mini" bindtap="zhuce">确认注册</button>

  <button type="primary" size="mini" bindtap="quxiaozhuce">取消注册</button>

</view>

<text>{{warn}}</text>

     在这里就不过多的说明了，如果需要了解每个参数的意义，可以上Weapp的网站查看帮助文件​。     运行一下，可以查看效果。

2.数据库部分

​

      在云开发控制台中，选择数据库，添加集合，命名为user，后续将注册的信息都会存储在​这个集合里面。

     数据库部分的调用几个关键点。

const db=wx.cloud.database().collection('user');

      使用add方法

复制

db.add({

          data:{

       

3.云函数部分

      建立云函数、上传部署云函数、使用云函数。上次已经做了相关的说明，这里就不再赘述，只是将云函数的代码展示出来。

// 云函数入口文件

const cloud = require('wx-server-sdk')

cloud.init({

  env: 'yx1000-0000000000',

  traceUser: true,

})

// 云函数入口函数

exports.main = async (event, context) => {

  const wxContext = cloud.getWXContext()

  return {

    event,

    openid: wxContext.OPENID,

    appid: wxContext.APPID,

    unionid: wxContext.UNIONID,

  }

}

4.数据传递及键逻辑处理

      我们需要将捕获用户在小程序中输入的数据，例如用户名、密码、等信息，并且需要将密码和再次输入的密码进行比对，通过按键事件将数据存储到​云端数据库里面。

​

      在wxml文件中的代码

bind：change="函数名"

      我们需要对这些函数进行搭建，将输入的内容传递出来。以onChange1为例。

  onChange1:function(event){   

    user=event.detail;

   // console.log(user)

  },

      用户在输入用户名称的时候，会触发这个函数，我们可以获取到用户输入的内容，并赋值给变量user。其它函数类似。

      键逻辑，判断两次输入的密码是否相同，如果相同，添加到数据库中，如果不相同，提示注册不成功。

if(password==password1)

{

  db.add({

      data:{

        _id:_id,

        _user:user,

        _password:password,

        _shenfenzheng:shenfenzheng,

        _UserPhone:UserPhone,

        _yimiao:yimiao

            },

         })

        

        this.setData({

          warn:"用户注册成功"

        })

}

else

{

          this.setData({

            warn:"用户注册失败"

          })

}

四、项目运行并查看

      运行代码，我们在界面上输入信息​。

      点击确认注册，在左边提示注册成功，打开云开发控制台，发现数据已经上传到云端​。

​      至此，整个项目完结。

结：

      将零散的知识系统化，并应用在实际的工作中​，才能够体现价值。
---------------------
作者：单片小菜
链接：https://bbs.21ic.com/icview-3220716-1-1.html
来源：21ic.com
此文章已获得原创/原创奖标签，著作权归21ic所有，任何人未经允许禁止转载。