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页面:
小程序的模态框
<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了
推荐阅读
Taro项目处理sass适配问题
{代码...} 一次解决办法:项目根目录创建deploy.sh文件,文件内容添加命令行修复sass不支持Taro项目问题 {代码...} 使用:git bash,执行sh deploy.sh,控制台会自动修复,然后重启项目后运行就不会再报此错误了
Banshee阅读 293
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...
寒青赞 54阅读 7.8k评论 11
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...
jenemy赞 46阅读 6k评论 12
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...
乌柏木赞 66阅读 6.2k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 39阅读 6.3k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 43阅读 7.4k评论 6
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^<...
XboxYan赞 43阅读 2.9k评论 14
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。