时间:2021-05-26
上一篇简单介绍了mpvue实现快递单号查询,慢慢发现mpvue真的和vue很像,但它有几乎十分的吻合小程序的语法规范,刚开始用起来会觉得特点的爽,但涉及到细节却是有很多采坑的地方.今天利用网上的网易云接口,再结合mpvue简单写一写小程序短信验证登录.
简单封装的一个网络请求文件,网易云接口网上大佬们GitHub上还是比较的多而且开源
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了
到此这篇关于mpvue网易云短信接口实现小程序短信登录的示例代码的文章就介绍到这了,更多相关mpvue 小程序短信登录内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制。本文使用的是榛子云短信平台(http://sms
php调用云片网接口发送短信的实现方法云片网发送短信/***[SendSmsdescription]*@param[string]$tpl_content[发送
简介由于项目在注册、登录、找回密码时需要发送短信验证的功能,我们使用腾讯云短信做。为什么要用腾讯云短信呢?因为注册就送100条免费短信的额度。实现注册腾讯云注册
本文介绍了SpringSecurityOauth2.0实现短信验证码登录示例,分享给大家,具体如下:定义手机号登录令牌/***@authorlengleng*@
第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvu