mpvue+网易云短信接口实现小程序短信登录

上一篇简单介绍了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页面:

小程序的模态框

  
    
  
  
    
  
  发送验证码

基本逻辑是页面加载进来,先判断是否有登录,因为有登录的我会存储于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了