微信小程序如何實現手機號登錄

蝸牛 互聯網技術資訊 2022-07-02 38 0

這篇文章主要講解了“微信小程序如何實現手機號登錄”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“微信小程序如何實現手機號登錄”吧!

1.wxml

<form?bindsubmit="formsubmit">
??<view>手機號<input?type="text"?placeholder="請輸入手機號"?bindinput="getphone"?name="phone"/></view>
??<view>
????驗證碼<input?type="text"?placeholder="請輸入驗證碼"?name="code"/>
????<button?disabled="{{disabled}}"?bindtap="click">{{message}}</button>
??</view>
??<button?form-type="submit">登錄</button>
</form>

微信小程序如何實現手機號登錄  微信小程序 第1張

2.js(正則驗證、倒計時、驗證碼)

/**
???*?頁面的初始數據
???*/
??data:?{
????phone:'',
????message:"獲取驗證碼",
????disabled:false
??},
??getphone:function(e){
????this.setData({
??????phone:e.detail.value
????})
??},
??click(){
????var?that?=?this
????let?phone?=?this.data.phone;
????console.log(phone)
????if(!(/^(13|15|17|18|19)\d{9}$/.test(phone))){
??????wx.showToast({
????????title:?'手機號不正確',
????????icon:'none'
??????})
????}
????if((/^(13|15|17|18|19)\d{9}$/.test(phone))){
??????//定時任務
??????var?souse?=?30
??????var?timer?=?setInterval(function(){
????????that.setData({
??????????message:souse?+?"秒后重試",
??????????disabled:true
????????})
????????souse?--
????????if(souse?==?0){
??????????that.setData({
????????????message:"發送驗證碼",
????????????disabled:false
??????????})
??????????clearInterval(timer)
????????}
??????},1000)
??????wx.request({
????????url:?'http://www.wenk.com/index.php/admin/sendCode',?//僅為示例,并非真實的接口地址
????????data:?{
??????????phone
????????},
????????success?(res)?{
??????????console.log(res)
????????}
??????})
????}
??},

微信小程序如何實現手機號登錄  微信小程序 第2張

3.提交表單

formsubmit(e){
????console.log(e)
????let?phone?=?e.detail.value.phone
????let?code?=?e.detail.value.code
??????wx.request({
????????url:?'http://www.wenk.com/admin/login',?//僅為示例,并非真實的接口地址
????????method:'post',
????????data:?{
??????????code,
??????????phone
????????},
????????success?(res)?{
??????????let?id?=?res.data.data.id
??????????wx.setStorageSync('id',id)
??????????wx.navigateTo({
????????????url:?'/pages/list/list',
??????????})
????????}
??????})
??},

4.驗證碼API接口

public?function?sendCode()
????{
????????$phone?=?input('phone');
?
????????//限制用戶30秒內只能發送一次
????????$send_time?=?Cache::get('time_key');
????????//判斷是否發送過
????????if?(time()?-?$send_time?<?30){
????????????return?json(['code'?=>?500,'msg'=>?'30秒內只能發送一次','data'?=>?[]]);
????????}
????????if?(empty($send_time)){
????????????$time?=?time();
????????????Cache::set('time_key',$time,30);
????????}
?
????????//調用驗證碼接口
????????$res?=?Cond::sendCode($phone);//封裝的邏輯層
????????if?(!$res){
????????????return?json(['code'?=>?200,'msg'?=>?'發送成功','data'?=>?$res]);
????????}
????}

5.登錄API接口

public?function?login()
????{
????????$data?=?input();
????????$user?=?(new?\app\admin\model\Login())->where('phone',$data['phone'])->find();
????????if?($user?==?null){
????????????//如果第一次登錄,這里則改為添加入庫
????????????return?json(['code'?=>?2001,'msg'?=>?'賬號不存在','data'?=>?[]]);
????????}
????????$code?=?Cache::get('code');
????????if?($code?!=?$data['code']){
????????????return?json(['code'?=>?2001,'msg'?=>?'驗證碼錯誤','data'?=>?[]]);
????????}
//????????$id?=?$user['id'];
//????????$token?=??Jwt::jwt();
????????return?json(['code'?=>?200,'msg'?=>?'登陸成功','data'?=>?$user]);
????}

感謝各位的閱讀,以上就是“微信小程序如何實現手機號登錄”的內容了,經過本文的學習后,相信大家對微信小程序如何實現手機號登錄這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是蝸牛博客,小編將為大家推送更多相關知識點的文章,歡迎關注!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看