微信小程序实现注册、登录页面的小功能整理,希望对大家有帮助。

1. 正则验证手机号码

var mobile = that.data.phone;
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    if (!myreg.test(mobile)) {
      wx.showToast({
        title:'手机号有误!',
        icon:'success',
        duration: 1500
      })
      return ;
    }
    wx.showToast({
      title:'手机号正确!',
      icon:'success',
      duration: 1500
    })

2. 60秒倒计时

发送短信验证码后会有60秒的倒计时功能。

网上有很多这种插件,很方便

比如: http://smsow.zhenzikj.com/doc/sdk.html

使用方法

1.引入插件countdown.js

var CountDown = require('../../utils/countdown.js');

2.在 onLoad 周期初始化

onLoad:function () {
   this.countdown =new CountDown(this);
}

3. 在获取验证码的按钮上增加captchaDisabled、captchaTxt 分别用于控制倒计时过程中是否可以点击、倒计时秒数提示

<button class='codeBtn' bindtap='getSmsCaptcha' disabled='{{captchaDisabled}}'>{{captchaTxt}}</button>

4. 调用start方法触发倒计时

getSmsCaptcha(e) {
   this.countdown.start();
}

3. 发送短信验证码

小编使用的是榛子云短信(http://smsow.zhenzikj.com/doc/sdk.html)的发送验证码短信。

目前提供了普通版和云函数版,建议下载云函数版的。两个版本中都提供了对验证码的支持,你无需生成验证码,SDK已经帮你都弄好了。

如何使用

1)配置域名

在微信公众平台-小程序管理中配置域名https://smsdeveloper.zhenzikj.com,如下图:

2) 引入sdk

var zhenzisms = require('../../utils/zhenzisms.js');

3)初始化

zhenzisms.client.init('https://sms_developer.zhenzikj.com','你的榛子云appId','你的榛子云appSecret');

4) 发送验证码短信

zhenzisms.client.sendCode(function (res) {
      wx.showToast({
        title: res.data.data,
        icon:'none',
        duration: 2000
      })
    }, that.data.phone,'验证码为:{code}','', 60 * 5, 4);

参数1:请求后的用于接收返回结果的回调函数

参数number:接收者手机号码

参数3:短信模板,其中{code}为验证码占位符,会自动替换

参数messageId:该条信息的唯一标识,可用于查询

参数seconds:验证码有效期,单位是秒

参数length:验证码长度,比如4位或6位

返回结果是json格式的字符串, code: 发送状态,0为成功。非0为发送失败,可从data中查看错误信息

当然,你也可以使用云函数版的,请参考文档: http://smsow.zhenzikj.com/doc/weixinmp_yun_sdk_doc2.html

微信小程序注册、登录小功能都在这的更多相关文章

  1. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  2. 微信小程序注册流程

    响应公司号召,跟上时代潮流,接下来我将独自开发微信小程序,接下来我介绍下注册流程,后续会补上小程序开发心得. 注册流程 注册之前,需要使用一个邮箱,该邮箱作为登录小程序的账号,这个邮箱不能被微信开放平 ...

  3. 使用Shiro+JWT完成的微信小程序的登录(含讲解)

    使用Shiro+JWT完成的微信小程序的登录 源码地址https://github.com/Jirath-Liu/shiro-jwt-wx 微信小程序用户登陆,完整流程可参考下面官方地址,本例中是按此 ...

  4. 微信小程序产品定位及功能介绍

    产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...

  5. 微信小程序之登录连接django,以及用户的信息授权认证

    小结: 1 如何自定义组件 - 组件和页面一样,也是由四个文件组成,所以我们自定义组件的时候,模拟pages文件夹,把所有的所有的组件都放在一个文件夹中,每个组件又由一个文件夹包裹,方便管理,在对应目 ...

  6. 微信小程序注册

    小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验.开发者可以根据平台提供的能力,快速地开发一个小程序. 开放内容包括: 1.开放注册范围:企业.政府.媒体.其他组织: ...

  7. 微信小程序开发教程,大多数人都搞错的八个问题

    小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列 ...

  8. 微信小程序获取登录手机号

    小程序获取登录用户手机号. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发. 首先,放置一个 button 按钮,将 ...

  9. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  10. 微信小程序注册和简单配置

    微信小程序注册 1.直接搜索微信小程序,按照流程进行注册 2.如果有微信公众号,可以在公众号内部点小程序,进入注册流程 小程序中的概念 开发设置 在开发设置中获取AppID和AppSecret App ...

随机推荐

  1. OL3-Cesium 二三维鼠标事件统一处理

    like the github issue: https://github.com/openlayers/ol3-cesium/issues/344#issuecomment-214098148 th ...

  2. python 链表推导式x for xx in yy

    一.(x for xx in yy )当x为固定参数 如: n = 10 # 生成n个0 matrix = [0 for i in range(n)]# 这里面0代表返回值,后面的for循环就是返回的 ...

  3. linux 上使用pm2启动nodejs服务

    1.安装pm2: npm install -g pm2 2.在启动文件夹内新建文件processes.json: {   "apps": [     {       "n ...

  4. JSONObject没有parseObject方法

    一定是你引入的包不对,你把上面的import 删掉,重新导入包就可以了. 在这之前加入依赖: ` net.sf.json-lib json-lib 2.4 <dependency> < ...

  5. centos7.8 安装 redis5.0.2

    1.安装gcc依赖 redis是由C语言开发,因此安装之前必须要确保服务器已经安装了gcc,可以通过如下命令查看机器是否安装: gcc -v 如果没有安装则通过以下命令安装: yum install ...

  6. 日志 LOG / Debug

    有很多时候我们想要查看日志文件,发现服务器已经被重启了,然后原来的日志就被打包存起来了,这个时候生成的gz日志文件我们就没有办法直接去查看了. 所以这个时候我们就需要zcat+日志名.gz来查看,还可 ...

  7. 新年快乐!体验Windows7黄金版,祝你2023财源广进!

    新年快乐!体验Windows7黄金版,祝你2023财源广进! 首先,开机画面表示出它的土豪,并说明,它并不来自Microsoft. 然后: 它是2016年出现的. 改成64位的. 然后许可: 自定义: ...

  8. ADT 更新遇到的一个BUG解决方案【转】

    蠻長一陣子沒有更新ADT,正好Android 5.0 Release有一段時間,就順勢更新: 當按下Next後進行更新ADT 23.0.4 途中卻發生如下圖的問題: An error occurred ...

  9. 吴恩达老师机器学习课程chapter08——降维

    吴恩达老师机器学习课程chapter08--降维 本文是非计算机专业新手的自学笔记,高手勿喷. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第十四章. 本章节只有结论,没有任 ...

  10. php微信公众号开发之生成带参数的二维码

    参考微信公众平台:https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric ...