Detailed explanation of WeChat applet input input examples-JS Tutorial-php.cn

This article mainly introduces the relevant information on the implementation of input input and dynamic setting buttons of the WeChat applet. I hope this article can help everyone. Friends in need can refer to it. I hope it can help everyone.

Implementation of WeChat applet input input and dynamic setting button

[Requirement] When the mobile phone number has been filled in and the agreement has been checked, the "immediately" The "Login" button becomes bright and can be clicked; if any of the buttons are not satisfied, the button is grayed out and cannot be clicked; the SMS verification code is obtained, and the countdown prompts the operation; a toast pop-up window prompts the content that does not meet the requirements.

   手机号      图形验证码        验证码   {{captchaText}}      已阅读并同意 《用户使用协议》  立即登录        {{toastText}}

Copy after login

// 获取全局应用程序实例对象 const app = getApp() Page({ data: { //toast默认不显示 isShowToast: false, mobile: '', imgCode: '', code: '', // inviteCode: '', errorContent: '请输入手机号', timer: 60, captchaText: '获取验证码', captchaSended: false, isReadOnly: false, capKey: '', sendRegist: false, imgCodeSrc: '', phoneAll: false, checkAgree:true, checkboxValue:[1], }, // 显示弹窗 showToast(txt, duration = 1500) { //设置toast时间，toast内容 this.setData({ count: duration, toastText: txt }); var _this = this; // toast时间 _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000; // 显示toast _this.setData({ isShowToast: true, }); // 定时器关闭 setTimeout(function () { _this.setData({ isShowToast: false }); }, _this.data.count); }, // 双向绑定mobile mobileInput(e) { this.setData({ mobile: e.detail.value }); if(this.data.mobile.length===11){ this.setData({ phoneAll: true }); }else if(this.data.mobile.length<11){ this.setData({ phoneAll: false }); } }, // 双向绑定img验证码 imgCaptchaInput(e) { this.setData({ imgCode: e.detail.value }); }, // 双向绑定sms验证码 smsCaptchaInput(e) { this.setData({ code: e.detail.value }); }, // 同意协议 checkboxChange(e) { this.data.checkboxValue = e.detail.value; if(this.data.checkboxValue[0]==1){ this.setData({ checkAgree: true }); }else { this.setData({ checkAgree: false }); } }, // 获取短信验证码 getSMS() { var that = this.data; if (!that.mobile) { this.showToast('请输入手机号'); } else if (that.mobile.length != 11 || isNaN(that.mobile)) { this.showToast('请输入正确手机号'); } else if (that.imgCode.length != 4) { this.showToast('请输入正确图片验证码'); } else { if (that.captchaSended) return; this.setData({ captchaSended: true }) app.api.getSMSByMobileAndCaptcha({ mobile: that.mobile, capKey: that.capKey, code: that.imgCode, type:1 }).then((result) => { this.showToast(result.message); if (result.code != 1) { this.getImgCode(); this.setData({ captchaSended: false, }); } else { var counter = setInterval(() => { that.timer--; this.setData({ timer: that.timer, captchaText: `${that.timer}秒`, isReadOnly: true }); if (that.timer === 0) { clearInterval(counter); that.captchaSended = false; that.captchaText = '获取验证码'; this.setData({ timer: 60, captchaText: '获取验证码', captchaSended: false }) } }, 1000); } }); } }, // 获取图形码 getImgCode() { var capKey = "zdx-weixin" + Math.random(); this.setData({ imgCodeSrc: "http://prezdx.geinihua.com/invite/WeChat/verify?capKey=" + capKey, capKey: capKey }); }, //用户使用协议 xieyi() { wx.navigateTo({ url: '../userXieyi/userXieyi' }) }, // 注册 regist() { var that = this.data; if(!that.checkAgree||!that.phoneAll){ return } // sessionCheck为1，目的是防止微信code码先于session过期 var code = wx.getStorageSync('wxCode'); var sessionCheck = wx.getStorageSync('sessionCheck'); wx.setStorageSync('mobile',that.mobile); if (!that.mobile) { this.showToast('请输入手机号'); } else if (that.mobile.length != 11 || isNaN(that.mobile)) { this.showToast('请输入正确手机号'); } else if (that.code.length != 6) { this.showToast('请输入正确验证码'); } else { wx.showLoading({ title: '加载中...', }); app.api.loginByCaptcha({ mobile: that.mobile, smsCode: that.code, code: code, sessionCheck:sessionCheck, }).then((res) => { wx.hideLoading(); if (res.code == 2||res.code==1) { //注册成功 wx.setStorageSync('token', res.businessObj.token); wx.setStorageSync('userId',res.businessObj.userId); this.sucessCb(res); app.globalData.isLogin = true; //设置为登录成功 } else { this.showToast(res.message); } }); } }, // 成功回调 sucessCb(res) { wx.redirectTo({ url: '/pages/index/index' }) }, onLoad: function () { this.getImgCode(); var that=this; if(wx.getStorageSync('mobile')){ that.setData({ mobile: wx.getStorageSync('mobile'), }) } if(this.data.mobile.length===11){ this.setData({ phoneAll: true }); } }, })

Copy after login

Related recommendations:

vue Get Detailed explanation of input input value

javascript input input box fuzzy prompt function detailed explanation

Detailed explanation of WeChat development input input box

The above is the detailed content of Detailed explanation of WeChat applet input input examples. For more information, please follow other related articles on the PHP Chinese website!