上一篇简单介绍了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了
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 大自然环保音乐系列《风花雪月》4CD/DTS[WAV分轨]
- 模拟之声慢刻CD甄妮《86精选[日本母带]》[低速原抓WAV+CUE]
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场