上一篇简单介绍了mpvue实现快递单号查询,慢慢发现mpvue真的和vue很像,但它有几乎十分的吻合小程序的语法规范,刚开始用起来会觉得特点的爽,但涉及到细节却是有很多采坑的地方。今天利用网上的网易云接口,再结合mpvue简单写一写小程序短信验证登录。
简单封装的一个网络请求文件,网易云接口网上大佬们GitHub上还是比较的多而且开源
const baseURL=" https://* * * * *: 1717”;//基路径
出口。http=function ({url、方法、数据头,成功}){
mpvue.showLoading ({
标题:“加载中……”
})
mpvue.request ({//请求链接
url: baseURL +网址,//请求方式
方法:方法,//参数
数据:数据,//请求头
标题:标题,
成功:res=祝辞{
console.log (res.data);
成功(res);//加载框~ ~ ~ ~
mpvue.hideLoading ();
mpvue.showToast ({
标题:res.data.msg
})
}
})
}
之前
<强>家页面:
小程序的模态框
& lt; view>
& lt;模态
v=" loginData.show "
title=暗锹肌?
confirmText="立即登录”
cancelText="取消登录”
@confirm=" gotoLogin "
@cancel=" cancelLogin "
cancelColor=" # CC0033”
confirmColor=" # CCFF66”
比;
& lt;标签类=癶-label”比;
& lt;输入类型=皌el”占位符=扒胧淙胧只拧皏模型=" loginData。移动getMoblie“@click=/比;
& lt;/label>
& lt;标签类=癶-label”比;
& lt;输入类型=笆俊闭嘉环?扒胧淙胙橹ぢ搿皏模型=" loginData。代码getCode“@click=/比;
& lt;/label>
& lt;按钮
type="主"
大?" defaultSize "
加载="加载"
@click=" sendCode "
hover-class=" defaultTap "
在发送验证码& lt;/button>
& lt;/modal>
& lt;/view>
基本逻辑是页面加载进来,先判断是否有登录,因为有登录的我会存储于存储里面,若没有登录就弹出模态框并登录后将用户信息存储于存储里面
//给默认值
数据(){
返回{
loginData: {
显示:没错,
手机:1383838438,
代码:"
}
}，
之前
里安装面判断一下是否有登录状态
安装(){
this.loginData。展示=! wx.getStorageSync (“isLogin”);
}
之前
方法里面写入登录和取消登录事件:
方法:{//去登录
gotoLogin () {//效验验证码
http ({
url:“/验证码验证”,
方法:“获得”,
数据:{
电话:this.loginData.mobile,
验证码:this.loginData.code
}，
成功:res=比;{
如果(res.data。代码==200){//将牌和手机号以存入前端缓存
wx。setStorageSync (“isLogin”,真正的);
wx。setStorageSync (“moblie”, this.loginData.mobile);
}//让弹框消失
this.loginData。显示=false;
}
}）;
}，//取消登录
cancelLogin () {
console.log (“888”);
(this.loginData。显示=false),
wx.showToast ({
标题:“游客访问”
}）;
}，//获取手机号
getMoblie () {
console.log (“000”);
console.log (this.loginData.mobile);
this.loginData.mobile;
}，//获取验证码
getCode () {
this.loginData.code;
}，//发送验证码
sendCode () {
http ({
url:“/验证码/派”,
方法:“获得”,
数据:{
电话:this.loginData.mobile
}，
成功:res=比;{
console.log (res.data);
wx.hideLoading ();
wx.showToast ({
标题:res.data.code
}）;
}
}）;
}
}
然后就好了
到此这篇关于mpvue网易云短信接口实现小程序短信登录的示例代码的文章就介绍到这了,更多相关mpvue小程序短信登录内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
