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 相关文章推荐
js简单实现Select互换数据的方法
Aug 17 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
给初学PHP的5个入手程序
2006/11/23 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP生成树的方法
2015/07/28 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
pip install命令安装扩展库整理
2021/03/02 Python
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
学术研讨会主持词
2015/07/04 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle