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

})

}

})
}


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页面:
home页面:小程序的模态框



v-if="loginData.show"
title="登录"
confirmText="立即登录"
cancelText="取消登录"
@confirm="gotoLogin"
@cancel="cancelLogin"
cancelColor="#CC0033"
confirmColor="#CCFF66"
>









type="primary"

size="defaultSize"

loading="loading"

@click="sendCode"

hover-class="defaultTap"
>发送验证码




v-if="loginData.show"
title="登录"
confirmText="立即登录"
cancelText="取消登录"
@confirm="gotoLogin"
@cancel="cancelLogin"
cancelColor="#CC0033"
confirmColor="#CCFF66"
>









type="primary"

size="defaultSize"

loading="loading"

@click="sendCode"

hover-class="defaultTap"
>发送验证码

基本逻辑是页面加载进来,先判断是否有登录,因为有登录的我会存储于Storage里面,若没有登录就弹出模态框并登录后将用户信息存储于Storage里面
//给默认值
data() {

return {

loginData: {

show: true,

mobile: 1383838438,

code: ""

}
},

//给默认值
data() {

return {

loginData: {

show: true,

mobile: 1383838438,

code: ""

}
},
mounted里面判断一下是否有登录状态
mounted() {

this.loginData.show = !wx.getStorageSync("isLogin");

}

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

});

}
});
}
}
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了