mpvue网易云短信接口实现小程序短信登录的示例代码


Posted in Javascript onApril 03, 2020

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

到此这篇关于mpvue网易云短信接口实现小程序短信登录的示例代码的文章就介绍到这了,更多相关mpvue 小程序短信登录内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 #Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 #Javascript
JS内置对象和Math对象知识点详解
Apr 03 #Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 #Javascript
JavaScript鼠标拖拽事件详解
Apr 03 #Javascript
Javascript组合继承方法代码实例解析
Apr 02 #Javascript
Javascript异步编程async实现过程详解
Apr 02 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
javascript中的面向对象
2017/03/30 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python实现石头剪刀布游戏
2021/01/20 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
国旗下演讲稿
2014/05/08 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python