溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
上一篇簡單介紹了mpvue實現快遞單號查詢,慢慢發現mpvue真的和vue很像,但它有幾乎十分的吻合小程序的語法規范,剛開始用起來會覺得特點的爽,但涉及到細節卻是有很多采坑的地方.今天利用網上的網易云接口,再結合mpvue簡單寫一寫小程序短信驗證登錄.
簡單封裝的一個網絡請求文件,網易云接口網上大佬們GitHub上還是比較的多而且開源
const baseURL = "https://*****:1717"; //基路徑
exports.http = function({url,method,data,headers,success}){
mpvue.showLoading({
title: '加載中...',
})
mpvue.request({
//請求鏈接
url:baseURL+url,
//請求方式
method:method,
//參數
data:data,
//請求頭
header:headers,
success:res=>{
console.log(res.data);
success(res);
//加載框~~~~
mpvue.hideLoading();
mpvue.showToast({
title:res.data.msg
})
}
})
}
home頁面:
小程序的模態框
<view> <modal v-if="loginData.show" title="登錄" confirmText="立即登錄" cancelText="取消登錄" @confirm="gotoLogin" @cancel="cancelLogin" cancelColor="#CC0033" confirmColor="#CCFF66" > <label class="h-label"> <input type="tel" placeholder="請輸入手機號" v-model="loginData.mobile" @click="getMoblie" /> </label> <label class="h-label"> <input type="number" placeholder="請輸入驗證碼" v-model="loginData.code" @click="getCode" /> </label> <button type="primary" size="defaultSize" loading="loading" @click="sendCode" hover-class="defaultTap" >發送驗證碼</button> </modal> </view>
基本邏輯是頁面加載進來,先判斷是否有登錄,因為有登錄的我會存儲于Storage里面,若沒有登錄就彈出模態框并登錄后將用戶信息存儲于Storage里面
//給默認值
data() {
return {
loginData: {
show: true,
mobile: 1383838438,
code: ""
}
},
mounted里面判斷一下是否有登錄狀態
mounted() {
this.loginData.show = !wx.getStorageSync("isLogin");
}
methods里面寫入登錄和取消登錄事件:
methods: {
//去登錄
gotoLogin() {
//效驗驗證碼
http({
url: "/captcha/verify",
method: "GET",
data: {
phone: this.loginData.mobile,
captcha: this.loginData.code
},
success: res => {
if (res.data.code == 200) {
//將token和手機號以存入前端緩存
wx.setStorageSync("isLogin", true);
wx.setStorageSync("moblie", this.loginData.mobile);
}
//讓彈框消失
this.loginData.show = false;
}
});
},
//取消登錄
cancelLogin() {
console.log("888");
(this.loginData.show = false),
wx.showToast({
title: "游客訪問"
});
},
//獲取手機號
getMoblie() {
console.log("000");
console.log(this.loginData.mobile);
this.loginData.mobile;
},
//獲取驗證碼
getCode() {
this.loginData.code;
},
//發送驗證碼
sendCode() {
http({
url: "/captcha/sent",
method: "GET",
data: {
phone: this.loginData.mobile
},
success: res => {
console.log(res.data);
wx.hideLoading();
wx.showToast({
title: res.data.code
});
}
});
}
}
然后就OK了
到此這篇關于mpvue網易云短信接口實現小程序短信登錄的示例代碼的文章就介紹到這了,更多相關mpvue 小程序短信登錄內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
