#申请原创# @21小跑堂 @21小跑堂 @21小跑堂
引：
之前讲了一些关于小程序、服务器、外部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方法
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文件中的代码
我们需要对这些函数进行搭建，将输入的内容传递出来。以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:"用户注册失败"
})
}
四、项目运行并查看
运行代码，我们在界面上输入信息。
点击确认注册，在左边提示注册成功，打开云开发控制台，发现数据已经上传到云端。
至此，整个项目完结。
结：
将零散的知识系统化，并应用在实际的工作中，才能够体现价值。
| 
楼主
标题置顶
标题高亮
结合当下疫情情势，开发用户注册界面小程序。过程讲解详细。