发新帖本帖赏金 20.00元(功能说明)我要提问
返回列表

小程序实战(2) | 用户注册界面搭建

[复制链接]
27|1
手机看帖
扫描二维码
随时随地手机跟帖
单片小菜|  楼主 | 2022-5-9 17:06 | 显示全部楼层 |阅读模式
#申请原创# @21小跑堂 @21小跑堂 @21小跑堂


标题.png

引:

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


757106278cb16adfc7.png

一、需求草图

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

410046278cb59742a9.png

二、需求分析


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


三、项目启动

1. 界面部分

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

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


54546278cad08c376.png

      分别输入以下指令​:


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


      关闭终端窗口,然后点击工具-->构建npm


709376278cd173608d.png

      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的网站查看帮助文件​。

128886278cfda31d65.png

     运行一下,可以查看效果

525216278d0563ab21.png

2.数据库部分

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


384106278d173d285e.png

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


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文件中的代码

467776278d540d06a3.png

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:"用户注册失败"
          })
}
四、项目运行并查看

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

940466278d809d82b2.png

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

146106278d85aebe77.png


​      至此,整个项目完结。

结:

      将零散的知识系统化,并应用在实际的工作中​,才能够体现价值。

使用特权

评论回复

打赏榜单

21小跑堂 打赏了 20.00 元 2022-05-11
理由:恭喜通过原创文章审核!请多多加油哦!

评论

21小跑堂 2022-5-11 13:56 回复TA
结合当下疫情情势,开发用户注册界面小程序。过程讲解详细。 

相关帖子

发新帖 本帖赏金 20.00元(功能说明)我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则