短信验证
wxml：
<view class="container" >
<view class="section">
<text>手机号码</text>
<input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="inputPhoneNum" auto-focus />
<text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg">发送</text>
<text wx:if="{{alreadySend}}" class="sendMsg" >{{second+"s"}}</text>
</view>
<view class="section">
<text>短信验证</text>
<input placeholder="短信验证码" type="number" bindinput="addCode" />
</view>
<button type="{{buttonType}}" disabled="{{disabled}}" bindtap="onSubmit">确定</button>
</view>
js：
// pages/dxyz/dxyz.js
var app = getApp()
var url = app.globalData.url
var team = app.globalData.team
Page({
/**
* 页面的初始数据
*/
data: {
yanse1: 'color:#989898',
yanse2: 'color:#989898',
yanse3: 'color:#989898',
//短信
send: false,
alreadySend: false,
second: 60,
disabled: true,
buttonType: 'default',
phoneNum: '',
code: '',
otherInfo: '',
openid: null,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
that.setData({
yanse1: 'color:#03A9FF',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
,
/**
* 获取短信验证码
*/
// 手机号部分
inputPhoneNum: function (e) {
let phoneNum = e.detail.value
if (phoneNum.length === 11) {
let checkedNum = this.checkPhoneNum(phoneNum)
if (checkedNum) {
this.setData({
phoneNum: phoneNum
})
console.log('phoneNum' + this.data.phoneNum)
wx.setStorageSync("phoneNum", this.data.phoneNum)
this.showSendMsg()
this.activeButton()
}
} else {
this.setData({
phoneNum: ''
})
this.hideSendMsg()
}
},
checkPhoneNum: function (phoneNum) {
let str = /^1\d{10}$/
if (str.test(phoneNum)) {
return true
} else {
wx.showToast({
title: '手机号不正确',
image: '../../images/fail.png'
})
return false
}
},
showSendMsg: function () {
if (!this.data.alreadySend) {
this.setData({
send: true
})
}
},
hideSendMsg: function () {
this.setData({
send: false,
disabled: true,
buttonType: 'default'
})
},
sendMsg: function () {
var phoneNum = wx.getStorageSync("phoneNum");
wx.request({
url: url + '/fabu/fabu!send.action?phoneNum=' + phoneNum,
header: {
'content-type': 'application/json'
},
method: 'POST',
success: function (res) {
console.log(res)
wx.setStorageSync("yzm", res.data.object)
}
})
this.setData({
alreadySend: true,
send: false
})
this.timer()
},
timer: function () {
let promise = new Promise((resolve, reject) => {
let setTimer = setInterval(
() => {
this.setData({
second: this.data.second - 1
})
if (this.data.second <= 0) {
this.setData({
second: 60,
alreadySend: false,
send: true
})
resolve(setTimer)
}
}
, 1000)
})
promise.then((setTimer) => {
clearInterval(setTimer)
})
},
// 验证码
addCode: function (e) {
this.setData({
code: e.detail.value
})
this.activeButton()
console.log('code' + this.data.code)
},
// 按钮
activeButton: function () {
let { phoneNum, code } = this.data
console.log(code)
if (phoneNum && code) {
this.setData({
disabled: false,
buttonType: 'primary'
})
} else {
this.setData({
disabled: true,
buttonType: 'default'
})
}
},
onSubmit: function () {
var yzm = wx.getStorageSync("yzm")
var code = this.data.code
var phoneNum = this.data.phoneNum;
var openid = app.globalData.openid;
if (code == yzm) {
wx.request({
url: url + '/fabu!cunphone.action?phoneNum=' + phoneNum + "&openid=" + openid,
header: {
'content-type': 'application/json'
},
method: 'POST',
success: function (res) {
console.log(res)
wx.redirectTo({
url: '../fabu/fabu'
});
},
fail: function (res) {
console.log(res)
}
})
} else {
wx.showToast({
title: '验证码错误',
icon: 'succes',
duration: 1000,
mask: true
})
}
}
,
})
css：
page{
font-size: 14px;
background-color: white;
}
/*短信*/
.container {
font-size: 16px;
}
.section {
display: flex;
margin: 16rpx;
padding: 16rpx;
border-bottom: 1rpx solid #CFD8DC;
}
text {
width: 200rpx;
}
button {
margin: 16rpx;
}
.sendMsg {
font-size: 12;
margin-right: 0;
padding: 0;
height: inherit;
width: 80rpx;
}
后台部分：
//发送审核通过短信方法
public String send() throws ClientException{
String phone = request.getParameter("phoneNum");
//设置超时时间-可自行调整
System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
System.setProperty("sun.net.client.defaultReadTimeout", "10000");
//初始化ascClient需要的几个参数
final String product = "Dysmsapi";//短信API产品名称
final String domain = "dysmsapi.aliyuncs.com";//短信API产品域名
//替换成你的AK
final String accessKeyId = "LTAIBGcrOhlmkl5J";//你的accessKeyId,参考本文档步骤2
final String accessKeySecret = "QGNrX1XmxwE8KIJypQaYzFLHCaODK3";//你的accessKeySecret，参考本文档步骤2
//初始化ascClient,暂时不支持多region
IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId,
accessKeySecret);
try {
DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
} catch (ClientException e) {
e.printStackTrace();
}
IAcsClient acsClient = new DefaultAcsClient(profile);
//组装请求对象
SendSmsRequest request = new SendSmsRequest();
//必填:待发送手机号。支持以逗号分隔的形式进行批量调用，批量上限为20个手机号码,批量调用相对于单条调用及时性稍有延迟,验证码类型的短信推荐使用单条调用的方式
request.setPhoneNumbers(phone);
//必填:短信签名-可在短信控制台中找到
request.setSignName("工程机械社群");
//必填:短信模板-可在短信控制台中找到
request.setTemplateCode("SMS_128360022");
int code = (int)((Math.random()*9+1)*100000);
//可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时,此处的值为
request.setTemplateParam("{\"code\":\""+code+"\"}");
//请求失败这里会抛ClientException异常
SendSmsResponse sendSmsResponse = null;
try {
sendSmsResponse = acsClient.getAcsResponse(request);
System.err.println(sendSmsResponse.getMessage());
} catch (ClientException e) {
e.printStackTrace();
}
if(sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK")) {
System.err.println("短信发送成功");
}else{
}
jsonresult = new JsonResult();
jsonresult.setObject(code);
return "jsonresult";
}
