#申请原创# @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:"用户注册失败"
- })
- }
四、项目运行并查看
运行代码，我们在界面上输入信息。
点击确认注册，在左边提示注册成功，打开云开发控制台，发现数据已经上传到云端。
至此，整个项目完结。
结：
将零散的知识系统化，并应用在实际的工作中，才能够体现价值。
| 
楼主
