mpvue網(wǎng)易云短信接口實現(xiàn)小程序短信登錄的示例代碼

更新時間：2020年04月03日 11:32:26 作者：Banshee

這篇文章主要介紹了mpvue網(wǎng)易云短信接口實現(xiàn)小程序短信登錄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

上一篇簡單介紹了mpvue實現(xiàn)快遞單號查詢,慢慢發(fā)現(xiàn)mpvue真的和vue很像,但它有幾乎十分的吻合小程序的語法規(guī)范,剛開始用起來會覺得特點的爽,但涉及到細節(jié)卻是有很多采坑的地方.今天利用網(wǎng)上的網(wǎng)易云接口,再結合mpvue簡單寫一寫小程序短信驗證登錄.

簡單封裝的一個網(wǎng)絡請求文件,網(wǎng)易云接口網(wǎng)上大佬們GitHub上還是比較的多而且開源

const baseURL = "https://*****:1717"; //基路徑

exports.http = function({url,method,data,headers,success}){

  mpvue.showLoading({
    title: '加載中...',
  })
  mpvue.request({
  //請求鏈接
  url:baseURL+url,
  //請求方式
  method:method,
  //參數(shù)
  data:data,
  //請求頭
  header:headers,
  success:res=>{
    console.log(res.data);
    success(res);
    //加載框~~~~
    mpvue.hideLoading();
    mpvue.showToast({
      title:res.data.msg
    })
  }
  })
}

home頁面:

小程序的模態(tài)框

<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"
 >發(fā)送驗證碼</button>
</modal>
</view>

基本邏輯是頁面加載進來,先判斷是否有登錄,因為有登錄的我會存儲于Storage里面,若沒有登錄就彈出模態(tài)框并登錄后將用戶信息存儲于Storage里面

//給默認值
 data() {
  return {
   loginData: {
    show: true,
    mobile: 1383838438,
    code: ""
   }
 },

mounted里面判斷一下是否有登錄狀態(tài)

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;
  },
//發(fā)送驗證碼

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網(wǎng)易云短信接口實現(xiàn)小程序短信登錄的示例代碼的文章就介紹到這了,更多相關mpvue 小程序短信登錄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: