使用云函数发送短信验证码

前端代码：

wxml:  
     <!-- 手机号 -->
        <view class="kaidian-ziliao-content flex">
            <view class="ziliao-content-name xing">手机号码</view>
            <input type="text" placeholder="请输入手机号码" placeholder-style="font-size:26rpx;" value="{{mobile}}" style="font-size: 26rpx;" bindinput="mobile" />
        </view>
        <!-- 验证码 -->
        <view class="kaidian-ziliao-content flex">
            <view class="ziliao-content-name xing">验 证 码</view>
            <view class="ziliao-content-right flex">
                <input type="text" placeholder="请输入验证码" value="{{codeInput}}" placeholder-style="font-size:26rpx;" bindinput="codeInput" value="{{codeInput}}" style="font-size: 26rpx; width: 240rpx;" />
                <view class="fasongCode" bindtap="{{!maxTimeOnly ? 'mobileCode' : ''}}" style="font-size: {{maxTimeOnly ? '22rpx' : '24rpx'}};">{{maxTimeMsg}}</view>
            </view>
        </view>

js：点击验证码按钮

  // 手机号码验证
var code = 'aaa' //生成验证码，用来发送短信验证,这个code一定要放到全局，否则发送到手机上就是undefined
page({
    data:{
         codeInput:'',//手机验证码
        maxTime:60,//60秒倒计时
        maxTimeOnly:false, //控制倒计时
        maxTimeMsg:'发送验证码',
    }    
    mobileCode(){
        var that = this
        let mobileNum = /^1[34578]\d{9}$/  //验证电话号码
        // let mobileNum = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        var {mobile} = that.data     //获取到input输入的手机号码
        if(mobileNum.test(mobile)){       //手机号码格式验证
            wx.showToast({
                icon:'none',
                title: '验证码已发送,请注意查收！',
            })
               // 60秒后重新获取验证码
            var inter = setInterval(function() {  //开启1秒执行一次定时器：注意需要为定时器命名否则无法关闭定时器
                that.setData({
                    maxTime: that.data.maxTime - 1, //一秒执行一次的秒数-1
                    maxTimeMsg:that.data.maxTime+'s后重新发送', //点击按钮后需要动态改变为此内容
                    maxTimeOnly:true ，       //这里是为页面做了个三元运算符，为真的话按钮就无法绑定这个函数，为假则可以绑定此函数
               });
                if (that.data.maxTime < 0) { //在这里做判断如果倒计时为0
                clearInterval(inter)   //则关闭定时器
                that.setData({    //将数据重新刷新
                    maxTimeMsg:'发送验证码',
                    maxTime: 60,    
                    maxTimeOnly:false
                });
                }
            }, 1000);      //1000为1秒钟执行一次
            code = that.generateMixed(6)  //调用方法执行6位随机数，想向用户发几位验证码就写几，这个方法我会放在下面
            console.log('发送短信验证码：',code) //执行完上面的代码后就拿到了我们随机出来的验证码
            wx.cloud.callFunction({ //连接云函数
                name:'mobile', //云函数名称
                data:{   //传数据
                    mobile,  //手机号码
                    code,     //我们随机出来的验证码，传递给云函数，让云函数给用户发短信
                }
            }).then(res=>{
                console.log(res)
            })
        }else{
            wx.showToast({
                icon:'error',
                title: '手机号码有误',
            })
        }     
    },
})

js:获取随机验证码

     //获取随机验证码，n代表几位
    generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    let res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 10); //10为chars数组个数，数组里也可以写字母，只要这边个数写对就没问题
      res += chars[id];
    }
    return res;
    },

云函数代码

const cloud = require('wx-server-sdk')
cloud.init({
  env: 'flower-7gagi8mzf6917ccb' //替换自己的云环境id
})
exports.main = async (event, context) => {
  var {mobile,code} = event
  try {
    const result = await cloud.openapi.cloudbase.sendSms({
      env: 'flower-7gagi8mzf6917ccb', //替换自己的云环境id
      content: '验证码为'+code,
      phoneNumberList: [
        "+86"+mobile
      ]
    })
    return result
  } catch (err) {
    return err
  }
}

tips:值得一提的是如果只是操作了上面的流程，云函数还是会报错，此时我们需要，打开我们的云开发》点击静态网站，把这个打开后什么也不用操作

关于腾讯的短信费用，这边腾讯为我们赠送了100条的短信提供开发者测试使用

当然如果100条免费的用完之后我们可以点击设置》往下滑滑倒底部，可以选择购买