上一篇簡單介紹了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了