1.1.最近的项目中用到了阿里云的短信接口,这里来写一下,不得不说,阿里云的接口是很简单,
2.但是短信接口的权限,真的是好繁琐,关于服务器端开启短信模板,短信签名,和短信权限就不多做介绍了
3.这里我只做代码的实现介绍
4.一:在小程序端:
5.wxml文件中
!--pages/moblie/mobile.wxml--viewclass"mobile-container"viewclass'row'inputclass'mobile'type'number'placeholder'手机号'confirm-type'确认'bindinput'mobileChange'/input/viewviewclass'row'inputclass'code-input'type'number'placeholder'验证码'confirm-type'确认'bindinput'codeChange'/inputbuttonclass'code-btn'bindtap"sendCode"disabled'{{sendDisabled}}'{{codeText}}/button/viewviewclass'row'buttonclass'submit'bindtap"bindMobile"type'primary'提交/button/view/view6.wxss文件中
/*pages/moblie/mobile.wxss*/.mobile-container{height:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:040rpx;font-size:28rpx;}input{border-bottom:1pxsolid#E5E5E5;height:80rpx;}.row{display:flex;height:80rpx;margin:20rpx0;}.row.mobile{flex:5;}.row.code-input{flex:5;}.row.code-btn{flex:2;font-size:24rpx;text-align:center;line-height:80rpx;}.row.submit{width:100%;border-radius:20rpx;height:90rpx;line-height:90rpx;font-size:35rpx;}7.js文件中:
//pages/moblie/mobile.jsvarappgetApp()varurlapp.globalData.urlvarutilsrequire('../../utils/util.js');Page({/***页面的初始数据*/data:{//用户输入的手机号mobile:'',//用户输入的验证码code:'',//服务器返回的验证码res_code:'',//用来控制获取验证码倒计时按钮的时效性sendDisabled:false,forbiddenTime:0,codeText:'获取验证码'},/***手机号输入*/mobileChange:function(e){varthatthis;that.setData({mobile:e.detail.value});},/***验证码输入*/codeChange:function(e){varthatthis;that.setData({code:e.detail.value});},/***发送验证码*/sendCode:function(){varthatthis;letmobilethat.data.mobile;if(!mobile){utils.quickTip('请输入手机号');return;}if(!that.mobileValid(mobile)){utils.quickTip('请输入正确的手机号');return;}wx.request({url:url+'Wx_SendCode',data:{mobile:mobile},method:'POST',header:{"Content-Type":"application/x-www-form-urlencoded"},success:function(res){letdatares.data;that.setData({sendDisabled:true,res_code:data.phone_code,});that.reflashTime(120);}})},/***绑定手机号*/bindMobile:function(){varthatthisletmobilethat.data.mobile;if(!mobile){utils.quickTip('请输入手机号');return;}letcodethat.data.code;letres_codethat.data.res_code;if(!code){utils.quickTip('请输入验证码');return;}if(coderes_code){varopenidwx.getStorageSync('openid');//将手机号添加入用户信息表中wx.request({url:url+'Wx_AddPnone',data:{openid:openid,mobile:that.data.mobile},method:'POST',header:{"Content-Type":"application/x-www-form-urlencoded"},success:function(res){console.log(res);//提示用户wx.showToast({title:'绑定成功',icon:'success',success:function(){setTimeout(function(){wx.switchTab({url:'/pages/self/self',});},1000);}});}})}else{utils.quickTip('验证码错误!');return;}},/***刷新验证码重新获取时间*/reflashTime(time){varthatthis;letindexsetInterval(function(){time-1;if(time0){that.setData({forbiddenTime:0,sendDisabled:false,codeText:'获取验证码'});indexnull;}else{that.setData({forbiddenTime:time,codeText:'重新获取'+time+'s'});}},1000);},/***手机号校验*/mobileValid(mobile){varmyreg/^[1][3,4,5,7,8][0-9]{9}$/;if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(mobile)){returnfalse;}else{returntrue;}},/***生命周期函数--监听页面加载*/onLoad:function(options){varthatthis},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})8.二:接下来介绍后端怎么接受,以及阿里云短信接口的使用
9.首先把在阿里云下载出来的sdk打开,把api_sdk命名为alisms,这里只是为了引入方便,因为还需要引入腾讯的支付接口,
10.为了方便分辨用的那个sdk所以重新命名,不需要其他sdk的完全可以不用重命名,目录结构普如下,放在extends目录下
11.1.
12.接下来,可以看到,目录中有一个名为SendSms的php文件,这是我们自己写的类文件,通过此方法即可实现
13.调用阿里云的短信接口:
14.内容如下所示:
?php/***CreatedbyPhpStorm.*User:Administrator*Date:2018/7/15*Time:8:14*/namespacealisms;//引入阿里云sdk的命名空间useAliyunCoreConfig;useAliyunCoreProfileDefaultProfile;useAliyunCoreDefaultAcsClient;useAliyunApiSmsRequestV20170525SendSmsRequest;//引入autoload.php,EXTEND_PATH就是指tp5根目录下的extend目录,系统自带常量。alisms为我们复制api_sdk过来后更改的目录名称require_onceEXTEND_PATH.'alisms/vendor/autoload.php';Config::load();//加载区域结点配置classSendSms{//关键的配置,我们用成员属性public$accessKeyIdnull;//阿里云短信获取的accessKeyIdpublic$accessKeySecretnull;//阿里云短信获取的accessKeySecretpublic$signNamenull;//短信签名,要审核通过public$templateCodenull;//短信模板ID,记得要审核通过的publicfunctionsend($mobile,$templateParam){//获取成员属性$accessKeyId$this-accessKeyId;$accessKeySecret$this-accessKeySecret;$signName$this-signName;$templateCode$this-templateCode;//短信API产品名(短信产品名固定,无需修改)$product"Dysmsapi";//短信API产品域名(接口地址固定,无需修改)$domain"dysmsapi.aliyuncs.com";//暂时不支持多Region(目前仅支持cn-hangzhou请勿修改)$region"cn-hangzhou";//初始化用户Profile实例$profileDefaultProfile::getProfile($region,$accessKeyId,$accessKeySecret);//增加服务结点DefaultProfile::addEndpoint("cn-hangzhou","cn-hangzhou",$product,$domain);//初始化AcsClient用于发起请求$acsClientnewDefaultAcsClient($profile);//初始化SendSmsRequest实例用于设置发送短信的参数$requestnewSendSmsRequest();//必填,设置雉短信接收号码$request-setPhoneNumbers($mobile);//必填,设置签名名称$request-setSignName($signName);//必填,设置模板CODE$request-setTemplateCode($templateCode);//可选,设置模板参数if($templateParam){$request-setTemplateParam(json_encode($templateParam));}//发起访问请求$acsResponse$acsClient-getAcsResponse($request);//返回请求结果,这里为为数组格式$resultjson_decode(json_encode($acsResponse),true);return$result;}}15.然后就可以在我们的控制器方法中调用他了,可以看到这里的方法名就是我的微信小程序中wx.request的url方法名
//接收短信验证码publicfunctionWx_SendCode(){//获取对象,如果上面没有引入命名空间,可以这样实例化:$smsnewalismsSendSms()$smsnewSendSms();//设置关键的四个配置参数,其实配置参数应该写在公共或者模块下的config配置文件中,然后在获取使用,这里我就直接使用了。$sms-accessKeyId'LTAIljPpRVABAg';$sms-accessKeySecret'IY1eKafGGafURwMbwdnYWJmmYuBR';$sms-signName'新灿教育';$sms-templateCode'SMS_139459227';//$mobile为微信小程序端传过来的的手机号$mobilerequest()-param('mobile');//模板参数,自定义了随机数,你可以在这里保存在缓存或者cookie等设置有效期以便逻辑发送后用户使用后的逻辑处理$codemt_rand(100000,999999);$templateParamarray("code"$code);$result$sms-send($mobile,$templateParam);//类中有说明,默认返回的数组格式,如果需要json,在自行修改类,或者在这里将$result转换后在输出$result['phone_code']$code;returnjson_encode($result);}好了,接下来返回的phpone_code即为我们的验证码16.欢迎大家的指教!
tp5微信小程序使用阿里云短信接口完成验证码验证-微信小程序中接短信验证码-微信小程序短信验证
浏览量:2673
时间:
来源:JspFnta
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。










