Taro教程之相亲类微信小程序—08发送短信验证码
2019-02-15 本文已影响1人
老夫撸代码
欢迎关注微信公众号 老夫撸代码
过完炮火连天的情人节，跟着老夫继续撸代码
今天的教程主要涉及到手机号发送验证码以及接入阿里云短信服务等
业务需求
获取用户手机号现在已经成为各种应用必须获取的用户信息，一般小程序中有两种方式：
- 获取微信绑定的手机号
- 发送手机号验证
上一讲教程中讲的是获取微信的手机号，这一讲主要是如何发送手机号验证码。
短信服务
目前每个云厂商都提供短信服务，这里我们使用阿里云的短信服务，进行发送验证码。
目前阿里云短信服务必须是企业才可以申请，所以以下所讲到的都是基于企业阿里云认证账号进行开发的。
短信服务的流程一般如下：
- 申请短信签名和模版
- 订购短信套餐包
- 进入系统设置
- 发送短信
- 业务统计
说明：
短信签名：短信签名是为客户提供一种快捷、方便的个性化签名方式。当客户发送短信时，短信平台会根据客户的设置，在短信内容里附加个性化签名，再发送给被叫手机客户。
根据用户属性来创建符合自身属性的签名信息。企业用户需要上传相关企业资质证明。短信签名需要审核通过后才可以使用，自2018年11月27日起，提交且未审核通过的签名支持修改。
签名示例
入驻企业为：阿里巴巴网络技术有限公司
可以提交的签名为：【阿里巴巴】
或者可以提交自己公司旗下的产品签名：【淘宝网】
具体参照官网介绍。
短信模板：包括国内短信模板和国际短信模板，根据自己的需要进行申请，具体规范参照官网介绍
短信服务api
阿里云已经提供了开发的sdk,我们只需要接入我们的程序就可以了。
在接入之前我们需要生成 AccessKey
AccessKey包括AccessKeyId和AccessKeySecret。
-
AccessKeyId用于标识用户。 -
AccessKeySecret是用来验证用户的密钥。AccessKeySecret必须保密。
安装PHP版本的SDK
用phpstorm打开MiaiApi,进入根目录后，运行如下命令：
composer require alibabacloud/client
安装完成后，在config/app.php,新增阿里云短信服务的配置信息：
/**
* 小程序的appid 和 appsecret
*/
'miniProgram' => array(
'app_id' => '',
'secret' => '',
// 下面为可选项
// 指定 API 调用返回结果的类型：array(default)/collection/object/raw/自定义类名
'response_type' => 'array',
'log' => [
'level' => 'debug',
'file' => __DIR__.'/../runtime/wechat.log',
],
),
/**
* 阿里云配置
*/
'AlibabaCloud' => array(
'sms' => array(
'AccessKey' => '',
'AccessKeySecret' => '',
'SignName' => '阿里云短信测试专用',
'RegisterTemplateCode' => 'SMS_89515010',
)
),
至此sdk就已经安装完成，接下来就可以撸代码了。
手机号绑定
WechatIMG94.png
在vscode中打开Taro项目
MIAI,新增如下文件：
src/pages/account/phone_register.jssrc/pages/account/phone_register.less
phone_register.js
import Taro, { Component } from "@tarojs/taro";
import { View,Image } from "@tarojs/components"
import api from "../../config/api";
import { AtInput, AtButton } from 'taro-ui'
import './phone_register.less'
class PhoneRegister extends Component{
config = {
navigationStyle: 'default',
navigationBarTitleText: '手机号绑定'
}
state={
userinfo:{},
value:'',
value2:'',
codeinfo:'发送验证码',
smsid:'',
codebtn:false
}
componentDidMount(){
Taro.getStorage({ key: 'userinfo' })
.then(res => {
this.state.userinfo = res.data
})
}
handleChange(e){
this.setState({
value: e
})
}
handleChange2(e){
this.setState({
value2:e
})
}
sendSMS(){
let that = this;
let i = 60;
let phone = this.state.value
let regex = /^[1][3,4,5,7,8][0-9]{9}$/;
if (regex.test(phone)){
this.setState({
codebtn: true
})
Taro.request({
url: api.sendSms,
data: {
session3rd: Taro.getStorageSync("session3rd"),
phone: this.state.value
},
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded" // 默认值
},
success: function (res) {
if(res.data.ret == 200 && res.data.data != false ){
that.setState({
smsid:res.data.data
})
Taro.showToast({
title:'发送成功',
icon:'none'
})
let t = setInterval(() => {
this.setState({
codeinfo: --i + 's'
})
}, 1000);
setInterval(() => {
this.setState({
codeinfo: '发送验证码',
codebtn:false
})
clearInterval(t)
}, 60000);
}else{
Taro.showToast({
title:'系统错误',
icon:'none'
})
that.setState({
codebtn:false
})
}
},
fail: function (err) {
console.log(err);
that.setState({
codebtn: false
})
}
})
}else{
Taro.showToast({
title:'请输入正确的手机号！',
icon:'none'
})
}
}
// 绑定手机号
submit(){
if(this.state.value == ''){
Taro.showToast({
title:'手机号不能为空',
icon:'none'
})
return
}
if(this.state.value2 == ''){
Taro.showToast({
title:'验证码不能为空',
icon:'none'
})
return
}
Taro.showLoading({
title:'正在绑定手机号',
mask:true
})
Taro.request({
url: api.bindPhone,
data: {
session3rd: Taro.getStorageSync("session3rd"),
id: this.state.smsid,
phone: this.state.value,
smscode:this.state.value2
},
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded" // 默认值
}
}).then(res => {
if(res.data.data == true){
Taro.showToast({'title':'绑定成功'})
}else{
Taro.showToast({
title:'绑定失败，请重试',
icon:'none'
})
}
}).catch(err => {
Taro.showToast({
title:'系统异常',
icon:'noe'
})
})
}
render(){
return (
<View className='container'>
<View className='header'>
<open-data type="userAvatarUrl"></open-data>
</View>
<View className='body'>
<View className='phone'>
<AtInput
name='value'
type='phone'
maxlength='11'
placeholder='请输入手机号'
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
</View>
<View className='code'>
<AtInput
name='value2'
type='number'
placeholder='请输入验证码'
value={this.state.value2}
onChange={this.handleChange2.bind(this)}
/>
<AtButton className='btn' disabled={this.state.codebtn} onClick={this.sendSMS} circle={true}>{this.state.codeinfo}</AtButton>
</View>
<View className='submit'>
<AtButton className='btn' onClick={this.submit} circle={true} >绑定手机号</AtButton>
</View>
</View>
</View>
)
}
}
export default PhoneRegister
代码解析：
-
sendSMS发送验证码。发送验证码的定时器使用setInterval -
submit绑定手机号
当然一定要在总入口app.js中配置页面。
......
关注微信公众号：老夫撸代码 回复数字 1008 获取完整教程以及代码仓库地址
关注微信公众号：老夫撸代码
老夫撸代码
