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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
javascript验证身份证号
Mar 03 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
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
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
js a标签点击事件
2017/03/30 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
python对数组进行反转的方法
2015/05/20 Python
Python定时执行之Timer用法示例
2015/05/27 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
简述python Scrapy框架
2020/08/17 Python
python 实现批量图片识别并翻译
2020/11/02 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Python制作表白爱心合集
2022/01/22 Python