微信小程序云开发-登录功能（手机号验证码登录）

时间：2024-02-24 13:59:23

一、需求分析

使用手机号码和随机短信验证码登录。

 

二、创建云函数

创建云函数，命名为sendSMS，实现将获取到的随机验证码发送到用户手机短信上。

 1 // 云函数入口文件
 2 const cloud = require(\'wx-server-sdk\')
 3 
 4 //cloud.init()
 5 cloud.init({
 6   env: cloud.DYNAMIC_CURRENT_ENV
 7 })
 8 //云函数的功能：发送短信验证码
 9 
10 // 云函数入口函数
11 exports.main = async (event, context) => {
12   const result = await cloud.openid.cloudbase.sendSms({
13     env:cloud.DYNAMIC_CURRENT_ENV,
14     phone_number_list:[
15        "+86"+event.phoneNumber
16     ],
17     content:"【公司名称】验证码为："+event.RandomPhoneCode,
18   })
19 
20 }

 

三、代码实现

1、loadByPhone.wxml

 1 <!-- 手机号码 -->
 2 <text class="text1">手机号码</text>
 3 <view class="phoneNum">
 4 <input type="text" placeholder="请输入手机号码" bindinput="getPhoneNumber"></input>
 5 </view>
 6 <!-- 验证码 -->
 7 <text class="text1">验证码</text>
 8 <view class="phoneCode">
 9 <input type="text" placeholder="请输入验证码" bindinput="getPhoneCode" ></input>
10 <button type="primary" size="mini" bindtap="sendPhoneCode">发送验证码</button>
11 </view>
12 <!-- 登录 -->
13 <view class="loadButton">
14 <button type="primary" bindtap="loadByPhone">登录</button>
15 </view>

2、loadByPhone.wxss

 1 .text1{
 2   margin:20rpx;
 3 }
 4 .phoneNum input{
 5   margin: 20rpx;
 6   padding-left: 10rpx;
 7   height: 80rpx;
 8   border: 1rpx solid #c3c3c3;
 9 }
10 .phoneCode{
11   display: flex;
12   align-items: center;
13 }
14 .phoneCode input{
15   width: 60%;
16   margin: 20rpx;
17   border: 1rpx solid #c3c3c3;
18   padding-left: 10rpx;
19   height: 80rpx;
20 }
21 .phoneCode button{
22   height: 80rpx;
23   vertical-align: middle;
24 }
25 
26 .loadButton button{
27   margin-top: 50rpx;
28   width: 94% !important;
29 }

3、loadByPhone.js

 知识点归纳整理：

  • 点击发送验证码按钮时候的校验功能
  • 点击【登录】按钮时候的校验功能
  • 自定义函数 generateMixed(n)，获取随机验证码
  • 调用云函数sendSMS，实现将获取的短信验证码发送到用户真实手机短信中
  1 //自定义全局变量，存储输入的手机号码和验证码
  2   let phoneNumber = \'\'
  3   let phoneCode = \'\'
  4   //自定义全局变量，存储获取到的随机验证码
  5   let RandomPhoneCode = \'\'
  6 Page({
  7 
  8   data: {
  9 
 10   },
 11 
 12   //获取用户输入的手机号码
 13   getPhoneNumber(e){
 14       console.log("输入的手机号码",e);
 15       phoneNumber = e.detail.value
 16   },
 17   //获取用户输入的验证码
 18   getPhoneCode(e){
 19       console.log("输入的短信验证码",e);
 20       phoneCode = e.detail.value
 21   },
 22   //发送验证码
 23   sendPhoneCode(){
 24     console.log("点击了发送短信验证码的按钮");
 25     //调用生成验证码的函数generateMixed(n)获取4位验证码，并将生成的4位验证码赋给自定义变量RandomPhoneCode
 26     RandomPhoneCode = this.generateMixed(4)
 27     console.log("生成的随机验证码",RandomPhoneCode);
 28     //如果手机号码不是11位，给予提示，并终止代码执行
 29     if(phoneNumber.length!=11){
 30       wx.showToast({
 31         title: \'请输入11位手机号码\',
 32         icon:"none"
 33       })
 34       return
 35     }
 36     //调用云函数，实现发送短信验证码到真实手机号码上
 37     wx.cloud.callFunction({
 38       name:"sendSMS",
 39       data:{
 40         phoneNumber:phoneNumber,
 41         RandomPhoneCode:RandomPhoneCode
 42       }
 43     }).then(res=>{
 44       console.log("验证码发送到手机短信成功",res);
 45     }).catch(err=>{
 46       console.log("验证码发送到手机短信失败",err);
 47     })
 48   },
 49 
 50   //实现验证登录功能
 51   loadByPhone(){
 52     //如果手机号码不是11位，给予提示，并终止代码执行
 53     if(phoneNumber.length!=11){
 54       wx.showToast({
 55         title: \'请输入11位手机号码\',
 56         icon:"none"
 57       })
 58       return
 59     }
 60     //如果输入的验证码为空或者输入的验证码不等于获取到的随机验证码，给与提示，并终止代码执行
 61     if(phoneCode.length==0){
 62       console.log("输入的验证码",phoneCode);
 63       wx.showToast({
 64         title: \'请输入短信验证码\',
 65         icon:"none"
 66       })
 67       return
 68     }
 69     //校验用户输入的验证码是否等于获取的随机验证码
 70     if(phoneCode!=null&phoneCode==RandomPhoneCode){
 71       wx.showToast({
 72         title: \'登录成功\',
 73         icon:"success",
 74         duration:2000,
 75         success:function(){
 76           setTimeout(function(){
 77             wx.switchTab({
 78               url: \'/pages/index/index\',
 79             })
 80           },2000)
 81         }
 82       })
 83     }else{
 84       wx.showToast({
 85         title: \'验证码错误\',
 86         icon:"none"
 87       })
 88     }
 89   },
 90 
 91   //自定义函数。生成随机验证码，n代表几位
 92   generateMixed(n) {
 93     let chars = [\'0\', \'1\', \'2\', \'3\', \'4\', \'5\', \'6\', \'7\', \'8\', \'9\', \'A\', \'B\', \'C\', \'D\', \'E\', \'F\', \'G\', \'H\', \'I\', \'J\', \'K\', \'L\', \'M\', \'N\', \'O\', \'P\', \'Q\', \'R\', \'S\', \'T\', \'U\', \'V\', \'W\', \'X\', \'Y\', \'Z\'];
 94     let res = "";
 95     for (var i = 0; i < n; i++) {
 96       var id = Math.ceil(Math.random() * 35);
 97       res += chars[id];
 98     }
 99     return res;
100   },
101  
102 })

 

四、效果展示

 

 

 

 

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【补充说明】

1、使用云开发手机获取短信验证码的条件

  • 必须是企业小程序（目前个人小程序无法使用短信发送）

  • 必须开通静态网站功能

  • 必须开通云开发

【说明】在哪里开通静态网站？进入【微信开发者工具】>【云开发】>【更多】>【静态网站】进行开通。

 2、报错分析

如果是个人小程序，在调用云函数发送验证码的时候，会有如下报错。

相关文章