⼩程序云开发-登录功能（⼿机号验证码登录）⼀、需求分析
使⽤⼿机号码和随机短信验证码登录。
⼆、创建云函数
创建云函数，命名为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{
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 = ateMixed(4)
27 console.log("⽣成的随机验证码",RandomPhoneCode);
28//如果⼿机号码不是11位，给予提⽰，并终⽌代码执⾏
29if(phoneNumber.length!=11){
30 wx.showToast({
31 title: '请输⼊11位⼿机号码',
32 icon:"none"
33 })
34return
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位，给予提⽰，并终⽌代码执⾏
53if(phoneNumber.length!=11){
54 wx.showToast({
55 title: '请输⼊11位⼿机号码',
56 icon:"none"
57 })
58return
59 }
60//如果输⼊的验证码为空或者输⼊的验证码不等于获取到的随机验证码，给与提⽰，并终⽌代码执⾏
61if(phoneCode.length==0){
62 console.log("输⼊的验证码",phoneCode);
63 wx.showToast({
64 title: '请输⼊短信验证码',
65 icon:"none"
66 })
67return
68 }
69//校验⽤户输⼊的验证码是否等于获取的随机验证码
70if(phoneCode!=null&phoneCode==RandomPhoneCode){
71 wx.showToast({
html怎么实现登录验证功能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 = "";
95for (var i = 0; i < n; i++) {
96var id = il(Math.random() * 35);
97 res += chars[id];
98 }
99return res;
100 },
101
102 })
四、效果展⽰
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~【补充说明】
1、使⽤云开发⼿机获取短信验证码的条件
必须是企业⼩程序（⽬前个⼈⼩程序⽆法使⽤短信发送）
必须开通静态⽹站功能
必须开通云开发
【说明】在哪⾥开通静态⽹站？进⼊【开发者⼯具】>【云开发】>【更多】>【静态⽹站】进⾏开通。
2、报错分析
如果是个⼈⼩程序，在调⽤云函数发送验证码的时候，会有如下报错。
发表评论