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

上一篇简单介绍了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 小程序短信登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解如何使用微信小程序云函数发送短信验证码

    其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,SDK下载: http://smsow.zhenzikj.com/doc/sdk.html 1.安装 下载后的SDK在cloudfunctions文件夹下会包含3个云函数文件夹,如下: 由于目前IDE没有云函数导入功能,您需要手工创建同名的云函数,然后将云函数下的文件手工拷进去 注:下载的SDK是一个

  • 小程序实现短信登录倒计时

    在平时的短信登录中,当发送短信验证码后会显示倒计时,那么这个倒计时如何实现呢? wxml文件 <view class='Form'> <form bindsubmit="formSubmit" bindreset="formReset" class='forms'> <view class="fidpas"> <input type="number" class="phone

  • 微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class="container"> <view class='row'> <input placeholder='请输入姓名' bindinput='bindNameInput'/> </view> <view class='row'> <inpu

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

    上一篇简单介绍了mpvue实现快递单号查询,慢慢发现mpvue真的和vue很像,但它有几乎十分的吻合小程序的语法规范,刚开始用起来会觉得特点的爽,但涉及到细节却是有很多采坑的地方.今天利用网上的网易云接口,再结合mpvue简单写一写小程序短信验证登录. 简单封装的一个网络请求文件,网易云接口网上大佬们GitHub上还是比较的多而且开源 const baseURL = "https://*****:1717"; //基路径 exports.http = function({url,met

  • 微信小程序 获取手机号 JavaScript解密示例代码详解

    当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号. 刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被严格核验过的,然后就开始了获取手机号之旅,网上教程有很多,但不知什么原因,都是会少一些内容,有的只有前端代码,没有后端:有的后端代码是PHP,不是

  • 微信小程序form表单组件示例代码

    表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击<form/>表单中 formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. 属性名 类型 说明 report-submit Boolean 是否返回fo

  • 小程序外卖订单界面的示例代码

    1.效果界面 2.涉及功能 *左侧商品类型.右侧商品可以相互控制: *商品列表加减及购物车商品加减icon消失.显示: *商品每一次加减,页面视图变化(数量.价格变化.购物车置灰): 3.贴上所有代码 1.wxml <view class="container"> <view class="index-cont"> <!-- 左边类型 --> <view class="index-left"> &l

  • 微信小程序时间轴组件的示例代码

    我这里的标题是小程序的时间组件,其实我这里是将他写成了一个页面,当然,如果你有需求,将其做成一个自定义组件也可以~ 这玩意其实没有什么技术难点就是一个小页面,我这里就不赘述了.直接上代码: Remark.wxml: <view class="listview-container margin_bottom"> <block wx:for="{{newList}}" wx:key="index"> <view clas

  • 微信小程序实现折线图的示例代码

    插件地址:https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js 微信小程序折线图效果: 首先需要引入一个折线图的插件: XXX.xml 的代码: <canvas style="width: 400px; height: 500px;" canvas-id="yueEle" binderror="canvasIdErrorCallback" ><

  • 微信小程序实现轨迹回放的示例代码

    在微信小程序实现轨迹回放的效果 1.wxml <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" bindcontroltap="controltap" bindmarkertap="markertap" markers="{{markers}}" polyline

  • C语言小程序 计算第二天日期示例代码

    复制代码 代码如下: #include <stdio.h>#include <stdlib.h>#include <string.h>#include <time.h>int year, month, day;const int day_30 = 30;const int day_31 = 31;int day_month_2 = 0;char err_flag = 0;void compute(){ printf("输入年月日(1992-7-19

  • 微信小程序实现手机号登录

    本文实例为大家分享了微信小程序实现手机号登录的具体代码,供大家参考,具体内容如下 1.wxml <form bindsubmit="formsubmit">   <view>手机号<input type="text" placeholder="请输入手机号" bindinput="getphone" name="phone"/></view>   <vi

  • 微信小程序手机号码验证功能的实例代码

    wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi

随机推荐