微信小程序短信验证码-短信验证码

 今天做小程序,遇到了短信验证码,所以就总结一下:

我今天也是第一次微信短信验证码, 做完发现真的好简单.但是要找对方向和步骤,不然还是需要费点时间.

 废话不多说,看步骤

   第一: ui给到界面图,先排好界面

   第二: 看开发购买短信服务, 可以去阿里 ,腾讯 ,华为....好多短信服务的企业,我就不列举了,我买的是阿里的,因为我的服务器就是阿里的,所以就买的一个阿里的

   第三: 说买其实也没有花钱,他有一个100免费测试版,我们去阿里注册完成之后,就可以购买一个100条短信测试版

 在搜索框中搜索 : 短信服务

 这里有一个免费开通

   

按照他的步骤即可完成免费开通测试版 记住只有100条

    第四:  

       开通好了之后,就需要完成一些列的申请/认证操作,如果不会的话,可以问客服,阿里的客服还是可以的,我第一次做的时候就是打了很多电话,问了很多客服.

    第五:  线上测试一下,绑定测试手机号,完成测试

接下来要改的地方就两个,第一个就是自己买的服务器,第二个就是要发的验证号码

接下来就是要获取sdk,其实就是accesskey

完成之后,开始后端编写,我这里就用node做后端,其实Java是一样的.

node:

const Core = require('@alicloud/pop-core'); // 需要一个阿里的插件
// 配置信息  
const client = new Core({
  accessKeyId: '自己的sdkid',
  accessKeySecret: '自己的sdk密码',
  endpoint: 'https://dysmsapi.aliyuncs.com', // 固定不动,写死的
  apiVersion: '2017-05-25' // 固定不动,写死的
});

// 短信模板ID和签名名称，这些需要在阿里云短信服务控制台创建  
const templateId = '这个是短信模板的code';
const signName = '这个是短信模板的name';

//验证码产生的方法 定义一个生成验证码的方法
function zymcode() {
  let str = ""
  for (let i = 0; i < 6; i++) {
    str += Math.floor(Math.random() * 10)
  }
  return str
}



//发送验证码的方法
// 发送短信验证码  
async function sendSmsVerificationCode(phoneNumber, code) {
  try {
    // 构建请求参数  
    const params = {
      PhoneNumbers: phoneNumber,
      SignName: signName,
      TemplateCode: templateId,
      TemplateParam: JSON.stringify({ "code": code }) // 根据你的模板格式，替换相应的参数  
    };
    // 发送短信请求  
    const response = await client.request('SendSms', params);
    if (response && response.Code === 'OK') {
      console.log('短信发送成功');
      return true;
    } else {
      console.error('短信发送失败:', response);
      return false;
    }
  } catch (err) {
    console.error('发送短信时发生错误:', err);
    return false;
  }
}

//验证码接口方法
router.post("/yzm", (req, res) => {
  // console.log("验证码进来");
  //获取手机号
  let tel = req.body.tele
  // 接收短信的手机号码和验证码  
  const phoneNumbers = tel;
  const code = zymcode();
  let rr = sendSmsVerificationCode(phoneNumbers, code)

  if (rr) {
    res.send({
      code: 200,
      message: "暂无数据",
      data: {
        yzm: code
      }
    })
  } else {
    res.send({
      code: 401,
      message: "验证码发送失败",
      data: {}
    })
  }
})

前端代码:

<view class="logincontent">
				<u--form labelPosition="left" :model="obj" :rules="rules" ref="uForm" class="formbox">
					<u-form-item prop="tele" borderBottom ref="item1">
						<u--input placeholder="请输入手机号码" prefixIcon="phone-fill"
							prefixIconStyle="font-size: 22px;color: #909399" v-model="obj.tele"
							border="none"></u--input>
					</u-form-item>
					<u-form-item prop="yzm" borderBottom>
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="请输入验证码" border="none" prefixIcon="lock-fill"
							prefixIconStyle="font-size: 22px;color: #909399" v-model="obj.yzm">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="请输入验证码" border="none" prefixIcon="lock-fill"
								prefixIconStyle="font-size: 22px;color: #909399" v-model="obj.yzm">
							<!-- #endif -->
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->

					</u-form-item>

				</u--form>
				<u-button type="primary" @click="gotoLogin" class="cccccc">登录</u-button>
				<u-button type="primary" @click="gotoRegister" class="cccccc">注册</u-button>
			</view>

这样就完事了 ,很简单!