微信小程序云开发 之 登录注册界面 详细教程

---

前言

好久没更新博客了 ，最近做了一个云开发的小程序。过程之中遇到了很多问题，毕竟自己是学后端的。今天也参加了网易实习生的笔试题，感觉平时过于懒散 ，因为以后每天一更，牛客网每日一练，加油！接下来我将给大家分享自己制作小程序的步骤，避免大家踩坑。

源码附在最后

一、前期的准备（很重要）

1.程序的需求

一定要明白程序的需求是什么 ，需要做哪些方面的功能。

2.微信开发者文档

一定要学会看文档，当你是独自完成开发，看官方文档尤其重要，他会帮助你解决你所遇到的80%的问题。
   附官方文档连接：https://developers.weixin.qq.com/miniprogram/dev/framework/

3.数据库的设计

1. 需求分析
2. 概念结构设计
3. 逻辑结构设计
4. 数据库物理设计
5. 数据库的实施
6. 数据库运行与维护
   一个完整的数据库需要完成这几步，这确实很重要，我当时在做程序时，更新了三次数据库结构，就是因为一开始没有把全部的需求理清楚，所以只能一改在改。

在线画图的工具
ProcessOn画图工具： https://www.processon.com
对于css样式
可以参考菜鸟教程：https://www.runoob.com
JavaScrip
可以参考Bootstrap中文文档JavaScript :https://v3.bootcss.com/javascript
颜色参数：
可以参考中国色： http://zhongguose.com

这些在制作小程序时都会有所帮助。
好了前几准备已经完毕，那么接下来打开你的微信开发者工具。

二、小程序设计阶段

1.选择开发方式

如果你是前端人员，你可以使用云开发，这里比较方便，没有太多的后端设计部分，如果你是后端开发人员建议不使用云开发，这样比较锻炼自己，我是出于需求，要快速上线，所以选择了云开发。

2.云开发

第一步：注册微信小程序，获取小程序的 AppID

进入注册界面：https://mp.weixin.qq.com

选择右下方的小程序 --> 前往注册

这里需要准备一个邮箱，一个邮箱只能申请一个小程序AppID，填写相关信息之后，进入个人页面

在完善小程序信息后，选择开发者设置，这里可以看到你的AppID,在项目中需要配置。
接下俩向下找到–>域名服务–>开通云开发–>同意相关文件–>之后你就可以看你的云开发环境ID，也需要在项目中配置。在获取小程序AppID以及云开发环境ID之后。打开微信开发者工具。

第二步、创建小程序项目

1. 打开微信开发者工具，新建小程序，将获取的AppID填入。
   
2. 创建完之后，在点击云开发控制台窗口里的设置图标，在环境变量的标签页找到环境名称和环境 ID。
   并且在开发者工具中打开源代码文件夹 miniprogram 里的 app.js，找到如下代码：

wx.cloud.init({
   
      // 在env中此填入云开发环境 ID, 环境 ID 可打开云控制台查看
      env: '',
      traceUser: true,
    })
```javascript

3. 下载 Nodejs
   这里官方文档给的比教详细：https://developers.weixin.qq.com/community/business/doc/000e26815e8de0db1ecae5a035b00d
   

跟着官方文档把云函数部署完成后，就可以开始页面的编写了

第三、登录界面的设计

1.登录

 登录：在js逻辑层，就需要我们对输入框中的信息和云数据库中 的信息进行匹配，匹配通过才可以进行下一个界面。那么在前端，我们需要用户输入已经存入数据的正确信息。 
 那么获取前端的输入框的数据，将其传递给js层
 在前端，我们需要绑定数据，使用bindinput绑定js层函数，输入时触发
 前端界面代码块：

   <view  class="inpname">
	 <text>姓名：</text>
     <input type="text" maxlength="8" cursor-spacing="180px" placeholder="输入姓名"  model:value="{
    {name}}" bindinput="inpname" />
   </view>
  <view class="inpnumber">
	  <text>学号：</text>
      <input type="number" maxlength="8" cursor-spacing="180px"   placeholder="输入学号"   model:value="{
  {number}}"bindinput="inpnumber"/>
 </view>

js层代码块：
将前端获取输入信息传递给js层的data里面

data:{
   
  name:'',
  number:''
}
 inpname:function(event){
   
     this.setData({
   
       name:event.detail.value,
     })
  },
  inpnumber:function(event){
   
    this.setData({
   
       number:event.detail.value,
    })
  },
  

然后将调用云数据，将输入的信息this.data.name与数据库的信息循环遍历进行匹配，当匹配成功时，进行下一页面。

注意： 很多同学，可能直接使用event.detail.value将其直接赋值给数据库的字段，这样绕开js层时不可取的。可以去看下框架内容。

2.注册

注册是往数据库里面添加一个新的用户信息，此时，我们不仅需要对输入的信息与数据库信息进行对比，看是否已经存在，当不存在时，直接向数据库添加数据，如果存在，则进行提示已被注册，注册失败。

     const db = wx.cloud.database()
     const _ = db.command     //获取数据库查询及更新指令
    db.collection("云数据库名").where({