微信小程序注册、登录小功能都在这
微信小程序实现注册、登录页面的小功能整理,希望对大家有帮助。
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
微信小程序注册、登录小功能都在这的更多相关文章
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...
- 微信小程序注册流程
响应公司号召,跟上时代潮流,接下来我将独自开发微信小程序,接下来我介绍下注册流程,后续会补上小程序开发心得. 注册流程 注册之前,需要使用一个邮箱,该邮箱作为登录小程序的账号,这个邮箱不能被微信开放平 ...
- 使用Shiro+JWT完成的微信小程序的登录(含讲解)
使用Shiro+JWT完成的微信小程序的登录 源码地址https://github.com/Jirath-Liu/shiro-jwt-wx 微信小程序用户登陆,完整流程可参考下面官方地址,本例中是按此 ...
- 微信小程序产品定位及功能介绍
产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...
- 微信小程序之登录连接django,以及用户的信息授权认证
小结: 1 如何自定义组件 - 组件和页面一样,也是由四个文件组成,所以我们自定义组件的时候,模拟pages文件夹,把所有的所有的组件都放在一个文件夹中,每个组件又由一个文件夹包裹,方便管理,在对应目 ...
- 微信小程序注册
小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验.开发者可以根据平台提供的能力,快速地开发一个小程序. 开放内容包括: 1.开放注册范围:企业.政府.媒体.其他组织: ...
- 微信小程序开发教程,大多数人都搞错的八个问题
小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列 ...
- 微信小程序获取登录手机号
小程序获取登录用户手机号. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发. 首先,放置一个 button 按钮,将 ...
- 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)
微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...
- 微信小程序注册和简单配置
微信小程序注册 1.直接搜索微信小程序,按照流程进行注册 2.如果有微信公众号,可以在公众号内部点小程序,进入注册流程 小程序中的概念 开发设置 在开发设置中获取AppID和AppSecret App ...
随机推荐
- 【DM论文阅读杂记】推荐系统 注意力机制
Paper Title Real-time Attention Based Look-alike Model for Recommender System Basic algorithm and ma ...
- CentOS 7安装配置vsftp并搭建FTP(一)
vsftp-VSFTP是一个基于GPL发布的类Unix系统上使用的FTP服务器软件.关于这个软件的详细信息 大家可以自行百度. 以上自己安装vsftp系统环境 二.查看自己的服务器是否安装了vsftp ...
- 用Nodemailer发个邮件不算难?
公司一直用邮箱做一些部门间协调的沟通留存,于是乎想用点"编程思维"做些"工作流"来自动化处理:但是公司用的邮箱有点难登呐! 选用的Nodejs 作为实现语言,那 ...
- C语言源文件如何编译为exe
先观看https://blog.csdn.net/u014772182/article/details/43348465来配置gcc环境随后在cmd中cd到目标文件夹gcc main.c -o ste ...
- REPLACE,TRANSLATE
REPLACE 1.语法 replace(string,from_str,to_str) 2.说明: 针对string,将from_str中的字符替换为to_str中字符. 3.示例: /**说明:( ...
- pyspark 中的rdd api 编码练习
1,使用pyspark 的rdd api 进行了数据文件的处理,包括构建RDD, 统计分析RDD ,从文件中读取数据RDD,从文件中构建 rdd的模式shema. 然后通过模式,从rdd中生成data ...
- sql-log
使用插件必须 先设置打印sql日志级别 debug 不然打不出来 SQL Params Setter插件 Ctrl+V mybaties log
- 图像高斯滤波的Verilog实现
高斯滤波的原理: 高斯滤波是一种线性平滑滤波,适用于消除高斯噪声,广泛应用于图像处理的减噪过程.通俗的讲,高斯滤波就是对整幅图像进行加权平均的过程,每一个像素点的值,都由其本身和邻域内的其他像素值经过 ...
- 百题计划-6 codeforces 651 div2 E. Binary Subsequence Rotation 01序列集合划分,2个队列处理
https://codeforces.com/contest/1370/problem/E 队列元素以末尾字符为结尾的序列就好了,这里队列里的元素不重要,队列size重要 #include<bi ...
- for in | for in 比较 解释 | 以后找知识点先从这里面搜索
const obj = { a: 1, b: 2, c: 3 } for (let i in obj) { console.log(i) // a // b // c } for (let i of ...