微信小程序雲開發-登錄功能（手機號驗證碼登錄）

一、需求分析

使用手機號碼和隨機短信驗證碼登錄。

 

二、創建雲函數

創建雲函數，命名為sendSMS，實現將獲取到的隨機驗證碼發送到用戶手機短信上。

// 雲函數入口文件
const cloud = require('wx-server-sdk')

//cloud.init()
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
//雲函數的功能：發送短信驗證碼

// 雲函數入口函數
exports.main = async (event, context) => {
  const result = await cloud.openid.cloudbase.sendSms({
    env:cloud.DYNAMIC_CURRENT_ENV,
    phone_number_list:[
       "+86"+event.phoneNumber
    ],
    content:"【公司名稱】驗證碼為："+event.RandomPhoneCode,
  })

}

 

三、代碼實現

1、loadByPhone.wxml

<!-- 手機號碼 -->
<text class="text1">手機號碼</text>
<view class="phoneNum">
<input type="text" placeholder="請輸入手機號碼" bindinput="getPhoneNumber"></input>
</view>
<!-- 驗證碼 -->
<text class="text1">驗證碼</text>
<view class="phoneCode">
<input type="text" placeholder="請輸入驗證碼" bindinput="getPhoneCode" ></input>
<button type="primary" size="mini" bindtap="sendPhoneCode">發送驗證碼</button>
</view>
<!-- 登錄 -->
<view class="loadButton">
<button type="primary" bindtap="loadByPhone">登錄</button>
</view>

2、loadByPhone.wxss

.text1{
  margin:20rpx;
}
.phoneNum input{
  margin: 20rpx;
  padding-left: 10rpx;
  height: 80rpx;
  border: 1rpx solid #c3c3c3;
}
.phoneCode{
  display: flex;
  align-items: center;
}
.phoneCode input{
  width: 60%;
  margin: 20rpx;
  border: 1rpx solid #c3c3c3;
  padding-left: 10rpx;
  height: 80rpx;
}
.phoneCode button{
  height: 80rpx;
  vertical-align: middle;
}

.loadButton button{
  margin-top: 50rpx;
  width: 94% !important;
}

3、loadByPhone.js

 知識點歸納整理：

• 點擊發送驗證碼按鈕時候的校驗功能
• 點擊【登錄】按鈕時候的校驗功能
• 自定義函數 generateMixed(n)，獲取隨機驗證碼
• 調用雲函數sendSMS，實現將獲取的短信驗證碼發送到用戶真實手機短信中

//自定義全局變量，存儲輸入的手機號碼和驗證碼
  let phoneNumber = ''
  let phoneCode = ''
  //自定義全局變量，存儲獲取到的隨機驗證碼
  let RandomPhoneCode = ''
Page({

  data: {

  },

  //獲取用戶輸入的手機號碼
  getPhoneNumber(e){
      console.log("輸入的手機號碼",e);
      phoneNumber = e.detail.value
  },
  //獲取用戶輸入的驗證碼
  getPhoneCode(e){
      console.log("輸入的短信驗證碼",e);
      phoneCode = e.detail.value
  },
  //發送驗證碼
  sendPhoneCode(){
    console.log("點擊了發送短信驗證碼的按鈕");
    //調用生成驗證碼的函數generateMixed(n)獲取4位驗證碼，並將生成的4位驗證碼賦給自定義變量RandomPhoneCode
    RandomPhoneCode = this.generateMixed(4)
    console.log("生成的隨機驗證碼",RandomPhoneCode);
    //如果手機號碼不是11位，給予提示，並終止代碼執行
    if(phoneNumber.length!=11){
      wx.showToast({
        title: '請輸入11位手機號碼',
        icon:"none"
      })
      return
    }
    //調用雲函數，實現發送短信驗證碼到真實手機號碼上
    wx.cloud.callFunction({
      name:"sendSMS",
      data:{
        phoneNumber:phoneNumber,
        RandomPhoneCode:RandomPhoneCode
      }
    }).then(res=>{
      console.log("驗證碼發送到手機短信成功",res);
    }).catch(err=>{
      console.log("驗證碼發送到手機短信失敗",err);
    })
  },

  //實現驗證登錄功能
  loadByPhone(){
    //如果手機號碼不是11位，給予提示，並終止代碼執行
    if(phoneNumber.length!=11){
      wx.showToast({
        title: '請輸入11位手機號碼',
        icon:"none"
      })
      return
    }
    //如果輸入的驗證碼為空或者輸入的驗證碼不等於獲取到的隨機驗證碼，給與提示，並終止代碼執行
    if(phoneCode.length==0){
      console.log("輸入的驗證碼",phoneCode);
      wx.showToast({
        title: '請輸入短信驗證碼',
        icon:"none"
      })
      return
    }
    //校驗用戶輸入的驗證碼是否等於獲取的隨機驗證碼
    if(phoneCode!=null&phoneCode==RandomPhoneCode){
      wx.showToast({
        title: '登錄成功',
        icon:"success",
        duration:2000,
        success:function(){
          setTimeout(function(){
            wx.switchTab({
              url: '/pages/index/index',
            })
          },2000)
        }
      })
    }else{
      wx.showToast({
        title: '驗證碼錯誤',
        icon:"none"
      })
    }
  },

  //自定義函數。生成隨機驗證碼，n代表幾位
  generateMixed(n) {
    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'];
    let res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    return res;
  },
 
})

 

四、效果展示

 

 

 

 

 

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

【補充說明】

1、使用雲開發手機獲取短信驗證碼的條件

• 必須是企業小程序（目前個人小程序無法使用短信發送）

• 必須開通靜態網站功能

• 必須開通雲開發

【說明】在哪里開通靜態網站？進入【微信開發者工具】>【雲開發】>【更多】>【靜態網站】進行開通。

 2、報錯分析

如果是個人小程序，在調用雲函數發送驗證碼的時候，會有如下報錯。