微信公众号开发

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

本文主要是介绍微信小程序云开发 之 登录注册界面 详细教程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、前期的准备(很重要)
    • 1.程序的需求
    • 2.微信开发者文档
    • 3.数据库的设计
  • 二、小程序设计阶段
    • 1.选择开发方式
    • 2.云开发
      • 第一步:注册微信小程序,获取小程序的 AppID
      • 第二步、创建小程序项目
  • 第三、登录界面的设计
    • 1.登录
    • 2.注册
    • 3.优化
  • 附源码


前言

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

源码附在最后

一、前期的准备(很重要)

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
  1. 下载 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({
     //_openid: app.globalData.openid 
    })
    .field({   //查询后需要显示的字段信息
      uName:true,
      uNumber:true,
      create:true
    }) 
    .get()    //返回查询到的字段信息
    .then(res => {     //与返回的信息进行匹配
       if(res.data.uName == this.data.name){
          console.log('注册失败')
       }
       else if(res.data.uName == this.data.number){
         console.log('注册失败')
       }
       else{    //当信息未必注册时,我们在将前端页面获取的信息加入数据库中
         db.collection("云数据库名").add({
          data:{ 
            uName:this.data.name,         //将获取的数据存入相应字段中
            uNumber:this.data.number,
            create:1
         }, success: (res) => {
              console.log('注册失败')
            },fail: (res) => {
             console.log('注册失败')
           }
        })         
       }           
  }).catch(err => {
       console.log('注册失败')
    })
    }
   }

3.优化

在登录和注册界面需要右提示,且当用户某一项信息未填时,我们需要提示用户填写相应信息:
为此,我们需要在js层定义一个变量;
当获取的姓名为空时,将”姓名为空“赋值给变量,并在前端页面进行显示;
同理,当学号为空,注册成功,注册失败,登录失败等提示信息在不同的条件下赋值给该变量,使其在不同的条件下,在前端显示相应的信息。
在这里插入图片描述
在这里插入图片描述

代码如下:
定义变量 在data 中定义prompt
前端页面:

	<view >
    <text>{{prompt}}</text>
    </view>

js页面:

if (this.data.name== '') {
    this.setData({
      prompt: '姓名不能为空'
    })
  }
    else if (this.data.number == '') {
    this.setData({
     prompt: '学号不能为空'
    })
  }
   else {
    this.setData({
      prompt: ''
    })

这样对于信息的提方面就比较完善了。

附源码

大家可以自己去尝试,如果有问题欢迎和我交流!

 <view class="frame">
      <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>
    </view>
		<view class="error">
    <text>{{prompt}}</text>
    </view>

js页面:

const app = getApp()

Page({
  data:{
    name:'',
    number:'',
    prompt: '',
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    hasUserInfo: false,
    logged: false,
    takeSession: false,
    requestResult: '',
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') // 如需尝试获取用户信息可改
  },
  //页面初始化
  onl oad:function(openid){
    this.setData({
      prompt: ''
    })
    wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('登录失败!' + res.errMsg)
        }
      }
    })
  },
  inpname:function(event){
     this.setData({
       name:event.detail.value,
     })
  },
  inpnumber:function(event){
    this.setData({
       number:event.detail.value,
    })
  },
  //登录
 login:function(){
   this.setData({
   prompt: ''
   })
     let i=0
    if (this.data.name== '') {
    this.setData({
      prompt: '姓名不能为空'
    })
  }
    else if (this.data.number == '') {
    this.setData({
      prompt: '学号不能为空'
    })
  }
   else {
    this.setData({
      prompt: ''
    })
    const db = wx.cloud.database()
    const _ = db.command     //获取数据库查询及更新指令
    db.collection("云函数名").where({
     
    })
    .field({
      uName:true,
      uNumber:true,
      create:true
    })
    .get()    
    .then(res => {
       for(i=0;i<res.data.length;i++){
         if(this.data.name == res.data[i].uName){
            if(this.data.number == res.data[i].uNumber){
               if(res.data[i].create == 1){
                this.setData({
                  prompt: ''
                 })
                wx.navigateTo({ 
                  url: '../  /' //页面跳转
                })
               }
                else {
                  this.setData({
                    prompt: ''
                   })
                  wx.switchTab({
                    url: '../  /'//跳转到主界面
                  })
                }   
            }else{
              this.setData({
                prompt: '姓名或学号输入错误1'
               })
            }
         }
         else{
           this.setData({
            prompt: '姓名或学号输入错误'
           })
         }
        }
  }).catch(err => {
 
      this.setData({
        prompt:''
      })
    })
  }
  },


// 注册
enroll:function(){
    this.setData({
      prompt: ''
     })
    if (this.data.name == '') {
    this.setData({
      prompt: '姓名不能为空'
    })
  }
    else if (this.data.number == '') {
    this.setData({
      prompt: '学号不能为空'
    })
  }
   else {
    const db = wx.cloud.database()
    const _ = db.command     //获取数据库查询及更新指令
    db.collection("云函数名").where({
     //_openid: app.globalData.openid 
    })
    .field({
      uName:true,
      uNumber:true,
      create:true
    })
    .get()    
    .then(res => {     
       if(res.data.uName == this.data.name){
         this.setData({
          prompt:'姓名已被注册!'
         })
       }
       else if(res.data.uName == this.data.number){
         this.setData({
           prompt:'学号已被注册!'
         })
       }
       else{
         this.setData({
           prompt:''
         })
         db.collection("云函数名").add({
          data:{
            uName:this.data.name,
            uNumber:this.data.number,
            create:1
         }, success: (res) => {
              this.setData({
            prompt: '注册成功,请登录!'
            })
            },fail: (res) => {
             this.setData({
               prompt: '注册失败!'
              })
           }
        })         
       }           
  }).catch(err => {
      this.setData({
        prompt:'注册失败,姓名或学号已被注册3'
      })
    })
    }
   }
})


后续界面持续更新中,毕竟我是后端开发的,哪里写的不对欢迎评论区指点!

这篇关于微信小程序云开发 之 登录注册界面 详细教程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!