E企盈小程序开发-热线：4006-838-530前言： 常用页面以及组件模板——手机号验证以及绑定 我们获取的微信用户信息，只是存储在微信服务器的基本信息，但是在很多的应用中，我们需要绑定到用户手机号来进行更多的业务逻辑，今天就给出一个简单的页面demo。 效果图： 页面效果就是这样，接下来上代码 bindPhone.wxmlimport src="../../template/loading/index.wxml" /template is="Loading" data="{{Loading}}" /view class="bindPhoneTitle" 验证手机号/viewform bindsubmit='formSubmit' view class="formItemPhone" label手机号/label input name="phone" placeholder="请输入手机号" data-id="phone" placeholder-class='inputClass' bindinput='Input' / /view view class="formItemPhone" label验证码/label input name="code" placeholder="请输入验证码" data-id="code" placeholder-class='inputClass' bindinput='Input' / button class='codeBtn' wx:if="{{!isGetCode}}" catchtap='getPhoneCode'{{btnTxt}}/button text class='code_toast' wx:else{{countDown}}s/text /view button class='formBtn {{formData.phone&&formData.code?"active":""}}' formType="submit"确定/button/form
bindPhone.wxss@import '../../template/loading/index.wxss';.bindPhoneTitle { width: 90%; padding: 50rpx 5% 127rpx; font-size: 48rpx; font-family: PingFangSC-Medium; font-weight: 500; color: rgba(51, 51, 51, 1);}.formItemPhone { width: 90%; margin: 0 5%; padding: 0 0 20rpx; border-bottom: 1px solid rgba(226, 228, 232, 1); margin-bottom: 40rpx; position: relative;}.formItemPhone label { display: inline-block; width: 25%; vertical-align: middle; margin-right: 10%; font-size: 32rpx; font-family: PingFangSC-Regular; font-weight: 400开通血糖监测小程序电话:4006-838-530; color: rgba(51, 51, 51, 1);}.formItemPhone input { display: inline-block; width: 65%; vertical-align: middle; font-size: 32rpx; font-family: PingFangSC-Medium; font-weight: 500; color: rgba(51, 51, 51, 1);}.inputClass { font-size: 32rpx; font-family: PingFangSC-Regular; font-weight: 400; color: rgba(189, 199, 210, 1);}.codeBtn { position: absolute; right: 0; bottom: 20rpx; font-size: 28rpx; font-family: PingFangSC-Regular; font-weight: 400; color: rgba(255, 139, 0, 1); background: transparent; padding: 0; border: none; outline: medium; border-radius: 0; z-index: 1000;}.codeBtn::after { border: none; outline: medium; border-radius: 0;}.code_toast { position: absolute; right: 15rpx; bottom: 20rpx; font-size: 28rpx; font-family: PingFangSC-Regular; font-weight: 400; color: rgba(189, 199, 210, 1);}.formBtn { width: 90%; height: 88rpx; background: rgba(189, 199, 210, 1); border-radius: 44rpx; line-height: 88rpx; font-size: 32rpx; font-family: PingFangSC-Medium; font-weight: 500; color: rgba(255, 255, 255, 1); border: none; outline: medium; margin-top: 175rpx;}.formBtn::after { border: none; outline: medium; border-radius: 44rpx;}.formBtn.active { background: rgba(255, 139, 0, 1); color: rgba(255, 255, 255, 1);}
bindPhone.jsimport PublicFun from '../../utils/PublicFun.js';const phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])d{8}$/;Page({ data: { btnTxt: '获取验证码', isGetCode: false, Loading: false, countDown: 60, formData: { phone: '', code: '' } }, onLoad(options) { }, formSubmit(e) { let that = this, formData = e.detail.value, errMsg = ''; that.setData({ Loading: true }) if (!formData.phone){ errMsg = '手机号不能为空！'; } if (!formData.code){ errMsg = '验证码不能为空！'; } if (formData.phone){ if (!phoneRexp.test(formData.phone)) { errMsg = '手机号格式有误！'; } } if (errMsg){ that.setData({ Loading: false }) PublicFun._showToast(errMsg); return f开通假花小程序电话:4006-838-530alse } //连接服务器进行验证码手机号验证操作 setTimeout(()={ that.setData({ Loading: false }) },1500) }, getPhoneCode() { let that = this, formData = that.data.formData, errMsg = '' ; errMsg = !formData.phone ? '手机号不能为空！' : formData.phone && !phoneRexp.test(formData.phone) ? '手机号格式有误！' : '' ; if (errMsg){ PublicFun._showToast(errMsg); return false } that.timer(); //连接服务器进行获取验证码操作 that.setData({ isGetCode: true }) }, timer() {//验证码倒计时 let that = this, countDown = that.data.countDown; let clock = setInterval(() = { countDown-- if (countDown = 0) { that.setData({ countDown: countDown }) } else { clearInterval(clock) that.setData({ countDown: 60, isGetCode: false, btnTxt: '重新获取' }) } }, 1000) }, Input(e) {//输入检索 let that = this, formData = that.data.formData, inputType = e.currentTarget.dataset.id, inputValue = e.detail.value; inputType === 'phone' ? formData.phone = inputValue : formData.code = inputValue; that.setData({ formData }) }})
附带：PublicFun.jsfunction _showToast(title) { wx.showToast({ icon: "none", title: title })}module.e开通穆勒鞋小程序电话:4006-838-530xports ={ _showToast}
Loading文件为模板文件，方便多次调用 loading.wxmltemplate name="Loading" view class="loading_box" wx:if="{{Loading}}" style='background: {{Class==="show"?"rgba(0, 0, 0, 0)":"rgba(255, 255, 255, .7)"}};' view class="loading_items" view class="loading3 loading3_1"/view view class="loading3 loading3_2"/view view class="loading3 loading3_3"/view /view /view/template
loading.wxss.loading_box { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; z-index: 1000;}.loading_items{ text-align: center; padding: 55% 0;}.loading_itemsview { display: inline-block;}.loading3 { width: 20rpx; height: 20rpx; background: #ff8b00; border-radius: 50%; margin-left: 15rpx;}.loading3_1 { -webkit-animation: loading3 1s linear infinite alternate; animation: loading3 1s linear infinite alternate;}.loading3_2 { -webkit-animation: loading3 1s linear infinite alternate; animation: loading3 1s linear infinite alternate; animation-delay: 0.5s;}.loading3_3 { -webkit-animation: loading3 1s linear infinite alternate; animation: loading3 1s linear infinite alternate; animation-delay: 1s;}@-webkit-keyframes loading3 { 0% { transform: scale(1); } 100% { transform: scale(0); }}@keyframes loading3 { 0% { transform: scale(1); } 100% { transform: scale(0); }}
最新评论