- 微信小程序注册、登录小功能都在这
微信小程序实现注册、登录页面的小功能整理,希望对大家有帮助。 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
2019-07-29 - 微信小程序云开发,快速生成短信验证码
使用微信小程序云函数实现注册短信验证码的管理,并不是一件分分钟的事,目前想要存储验证码只能放到数据库中,因为存储后才能和用户提交上来的验证码做比较。 管理验证码主要涉及到:生成、存储、校验、有效期管理、2条短信间隔时间控制等、云数据库的操作,小编可是用了整整一天才完成的。 下面推荐一个第三方的短信接口,支持小程序云函数发送短信验证码,而且SDK已经实现了上述的所有功能,不妨试一试。 下载地址: http://smsow.zhenzikj.com/doc/sdk.html 如何使用 1.安装 下载后的SDK在cloudfunctions文件夹下会包含zhenzisms文件夹,您直接把这个文件夹拷到您的项目中即可。 miniprogram文件夹下包含使用示例,您可以参考这个完成开发。 注: 使用云函数开发无需配置域名的 2.申请账号,获取AppId、AppSecret 免费注册地址: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html 使用注册账号登录用户中心,在"我的应用"-> "详情"中可以查询AppId、AppSecret AppId、AppSecret是用于开发者使用账号和秘钥, 以下的所有api中都需要用到 3.修改SDK中的AppId、AppSecret 打开SDK中云函数的index.js文件,填写appId、appSecret [图片] 4.发送短信 此方法sendCode是专用于发送短信验证码的,调用该方法会自动生成验证码并存储在数据库中,当用户提交信息后可以通过validateCode方法比对验证码是否正确。 首先,您需要在云开发控制台中创建名称为sms-record的集合,用于存放验证码信息的,这个集合您无需维护。如下图: [图片] 其次,修改集合的权限,如下图: [图片] 使用方法: [代码]wx.cloud.callFunction({[代码] [代码] [代码][代码]name: [代码][代码]'zhenzisms'[代码][代码],[代码] [代码] [代码][代码]data: {[代码] [代码] [代码][代码]$url: [代码][代码]'sendCode'[代码][代码],[代码] [代码] [代码][代码]apiUrl: [代码][代码]'https://sms_developer.zhenzikj.com'[代码][代码],[代码] [代码] [代码][代码]message: [代码][代码]'您的验证码为:{code}'[代码][代码],[代码] [代码] [代码][代码]number: [代码][代码]'18511111111'[代码][代码],[代码] [代码] [代码][代码]messageId: [代码][代码]'aaabbb'[代码][代码],[代码] [代码] [代码][代码]seconds: 60,[代码] [代码] [代码][代码]length: 4[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]}).then((res) => {[代码] [代码] [代码][代码]console.log(res.result.msg);[代码] [代码] [代码][代码]}).[代码][代码]catch[代码][代码]((e) => {[代码] [代码] [代码][代码]//console.log(e);[代码] [代码] [代码][代码]});[代码]apiUrl为请求地址,个人开发者使用https://sms_developer.zhenzikj.com,企业开发者使用https://sms.zhenzikj.com send方法用于单条发送短信 参数$url:方法名称,固定不变的 参数message:发送短信的模板,您可以修改成您需要的,其中{code}会自动替换为验证码的 参数number:接收者手机号码 参数messageId:该条信息的唯一标识,可用于查询 参数seconds:验证码的有效期,单位秒 参数length:验证码的长度,比如常用的4位或6位 返回结果是json格式的字符串, code: 发送状态,0为成功。非0为发送失败,可从data中查看错误信息 注: 测试发送短信内容不要使用"你好"或"12132"全数字形式,这种短信内容没有具体的意义,可能会被运营商屏蔽 注:目前两条验证码短信获取的间隔时间是60秒,如需取消间隔时间或重新设置您需要修改sdk中的index.js文件,如下图: [图片] 6.校验验证码 此方法validateCode需要和方法sendCode配合使用,用于校验用户提交上来的验证码和系统生成的是否一致 [代码]wx.cloud.callFunction({[代码] [代码] [代码][代码]name: [代码][代码]'zhenzisms'[代码][代码],[代码] [代码] [代码][代码]data: {[代码] [代码] [代码][代码]$url: [代码][代码]'validateCode'[代码][代码],[代码] [代码] [代码][代码]apiUrl: [代码][代码]'https://sms_developer.zhenzikj.com'[代码][代码],[代码] [代码] [代码][代码]number: [代码][代码]'18511111111'[代码][代码],[代码] [代码] [代码][代码]code: [代码][代码]'6313'[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]}).then((res) => {[代码] [代码] [代码][代码]console.log(res.result.msg);[代码] [代码] [代码][代码]}).[代码][代码]catch[代码][代码]((e) => {[代码] [代码] [代码][代码]console.log(e);[代码] [代码] [代码][代码]});[代码]apiUrl为请求地址,个人开发者使用https://sms_developer.zhenzikj.com,企业开发者使用https://sms.zhenzikj.com 参数$url:方法名称,固定不变的 参数number:发送短信的手机号码 参数code:用户输入的验证码 返回结果是json对象,其中code项是错误代码,msg项是错误描述。code说明 success: 校验成功,empty:未调用sendCode方法生成验证码, code_expired:验证码已过期,过期时间是通过sendCode方法的参数seconds控制,code_error:验证码错误
2019-07-25 - 微信小程序云函数生成、存储、比对短信验证码的完整SDK工具
微信小程序云开发管理短信验证码并不是一件容易的事情,它不像其他web服务器开发中可以将验证码存放到session或者cookie中,你只能将其存到云开发的数据库中,实现起来非常困难。一个简单的需要短信验证码的注册、登录功能可能需要花费1、2天的工期。 可以完成验证码的生成、存储、有效期管理、校验等所有操作。 考虑到实现困难,榛子云短信(http://smsow.zhenzikj.com)为大家实现了所有验证码管理的功能实现,你只需要调用sdk中的云函数即可。下面让我们看看有多简单: 使用前准备: 首先,您需要在云开发控制台中创建名称为sms-record的集合,用于存放验证码信息的,这个集合您无需维护。如下图: [图片] 其次,修改集合的权限,如下图: [图片] 1. 发送验证码短信 [代码]wx.cloud.callFunction({[代码] [代码] [代码][代码]name: [代码][代码]'zhenzisms'[代码][代码],[代码] [代码] [代码][代码]data: {[代码] [代码] [代码][代码]$url: [代码][代码]'sendCode'[代码][代码],[代码] [代码] [代码][代码]apiUrl: [代码][代码]'https://sms_developer.zhenzikj.com'[代码][代码],[代码] [代码] [代码][代码]message: [代码][代码]'您的验证码为:{code}'[代码][代码],[代码] [代码] [代码][代码]number: [代码][代码]'18511111111'[代码][代码],[代码] [代码] [代码][代码]messageId: [代码][代码]'aaabbb'[代码][代码],[代码] [代码] [代码][代码]seconds: 60[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]}).then((res) => {[代码] [代码] [代码][代码]console.log(res.result.msg);[代码] [代码] [代码][代码]}).[代码][代码]catch[代码][代码]((e) => {[代码] [代码] [代码][代码]//console.log(e);[代码] [代码] [代码][代码]});[代码]apiUrl为请求地址,个人开发者使用https://sms_developer.zhenzikj.com,企业开发者使用https://sms.zhenzikj.com send方法用于单条发送短信 参数$url:方法名称,固定不变的 参数message:发送短信的模板,您可以修改成您需要的,其中{code}会自动替换为验证码的 参数number:接收者手机号码 参数messageId:该条信息的唯一标识,可用于查询 参数seconds:验证码的有效期,单位秒 返回结果是json格式的字符串, code: 发送状态,0为成功。非0为发送失败,可从data中查看错误信息 注:目前两条验证码短信获取的间隔时间是60秒,如需取消间隔时间或重新设置您需要修改sdk中的index.js文件,如下图: [图片] 2. 如何校验用户输入的验证码 [代码]wx.cloud.callFunction({[代码] [代码] [代码][代码]name: [代码][代码]'zhenzisms'[代码][代码],[代码] [代码] [代码][代码]data: {[代码] [代码] [代码][代码]$url: [代码][代码]'validateCode'[代码][代码],[代码] [代码] [代码][代码]apiUrl: [代码][代码]'https://sms_developer.zhenzikj.com'[代码][代码],[代码] [代码] [代码][代码]number: [代码][代码]'18511111111'[代码][代码],[代码] [代码] [代码][代码]code: [代码][代码]'6313'[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]}).then((res) => {[代码] [代码] [代码][代码]console.log(res.result.msg);[代码] [代码] [代码][代码]}).[代码][代码]catch[代码][代码]((e) => {[代码] [代码] [代码][代码]console.log(e);[代码] [代码] [代码][代码]});[代码]apiUrl为请求地址,个人开发者使用https://sms_developer.zhenzikj.com,企业开发者使用https://sms.zhenzikj.com 参数$url:方法名称,固定不变的 参数number:发送短信的手机号码 参数code:用户输入的验证码 返回结果是json对象,其中code项是错误代码,msg项是错误描述。code说明 success: 校验成功,empty:未调用sendCode方法生成验证码, code_expired:验证码已过期,过期时间是通过sendCode方法的参数seconds控制,code_error:验证码错误 完整实例和SDK下载: http://smsow.zhenzikj.com/doc/sdk.html 使用文档: http://smsow.zhenzikj.com/doc/weixinmp_yun_sdk_doc2.html
2019-07-24 - 小程序发送短信验证码完整工具
第一家提供小程序发送短信sdk的平台,支持小程序前端发送、云函数、带路由的云函数,以及60秒倒计时插件。 微信小程序(验证码)版,你完全不用生成、存储、校验 验证码,SDK都帮你去实现了。 微信小程序云函数版, 该版本更安全,避免了他人获取源码后,短信发送账号丢失。 详情查看 : http://smsow.zhenzikj.com/doc/sdk.html 官网: http://smsow.zhenzikj.com [图片] 如何发送短信 [代码]zhenzisms.client.sendCode([代码][代码]function[代码][代码](res){[代码][代码] [代码][代码]console.log(res.data);[代码][代码] [代码][代码]}, number, [代码][代码]'验证码为:{code}'[代码][代码], messageId, seconds, length);[代码]只需要写上{code}这个占位符,sdk自动生成验证码并替换 seconds:验证码有效期,单位是秒, 比如5分钟 length:验证码长度,比如4位或6位 2. 用户填好后如何校验验证码 [代码]var[代码] [代码]result = zhenzisms.client.validateCode(number, code);[代码]参数number:发送短信的手机号码 参数code:用户输入的验证码 返回结果是字符串, ok: 校验成功,empty:未生成验证码, number_error: 手机号码不一致, code_error:验证码不一致, code_expired:验证码已过期
2019-07-15 - 发送短信验证码后60秒倒计时
微信小程序发送短信验证码后60秒倒计时功能,效果图: [图片] 完整代码 index.wxml [代码]<!--index.wxml-->[代码][代码]<view class=[代码][代码]"container"[代码][代码]>[代码][代码] [代码][代码]<view class=[代码][代码]"section"[代码][代码]>[代码][代码] [代码][代码]<text>手机号码:</text>[代码][代码] [代码][代码]<input placeholder=[代码][代码]"请输入手机号码"[代码] [代码]type=[代码][代码]"number"[代码] [代码]maxlength=[代码][代码]"11"[代码] [代码]bindinput=[代码][代码]"inputPhoneNum"[代码] [代码]auto-focus />[代码][代码] [代码][代码]<text wx:if=[代码][代码]"{{send}}"[代码] [代码]class=[代码][代码]"sendMsg"[代码] [代码]bindtap=[代码][代码]"sendMsg"[代码][代码]>发送</text>[代码][代码] [代码][代码]<text wx:if=[代码][代码]"{{alreadySend}}"[代码] [代码]class=[代码][代码]"sendMsg"[代码] [代码]>{{second+[代码][代码]"s"[代码][代码]}}</text>[代码][代码] [代码][代码]</view>[代码][代码]</view>[代码] index.wxss [代码]/**index.wxss**/[代码][代码].userinfo {[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码].section {[代码][代码]display[代码][代码]: flex;[代码][代码]margin[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]padding[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]border-bottom[代码][代码]: [代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]#CFD8DC[代码][代码];[代码][代码]}[代码][代码] [代码] [代码]text {[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]200[代码][代码]rpx;[代码][代码]}[代码][代码] [代码] [代码]button {[代码][代码] [代码][代码]margin[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]}[代码][代码] [代码] [代码].sendMsg {[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]12[代码][代码];[代码][代码] [代码][代码]margin-right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: inherit;[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码]}[代码]index.js [代码]//index.js[代码][代码]//获取应用实例[代码][代码]const app = getApp()[代码][代码] [代码] [代码]Page({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]send: true,[代码][代码] [代码][代码]alreadySend: false,[代码][代码] [代码][代码]second: [代码][代码]60[代码][代码],[代码][代码] [代码][代码]disabled: true,[代码][代码] [代码][代码]phoneNum: [代码][代码]''[代码][代码] [代码][代码]},[代码][代码] [代码][代码]// 手机号部分[代码][代码] [代码][代码]inputPhoneNum: function (e) {[代码][代码] [代码][代码]let phoneNum = e.detail.value[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]phoneNum: phoneNum[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]sendMsg: function () {[代码][代码] [代码][代码]var phoneNum = this.data.phoneNum;[代码][代码] [代码][代码]if(phoneNum == [代码][代码]''[代码][代码]){[代码][代码] [代码][代码]wx.showToast({[代码][代码] [代码][代码]title: [代码][代码]'请输入手机号码'[代码][代码],[代码][代码] [代码][代码]icon: [代码][代码]'none'[代码][代码],[代码][代码] [代码][代码]duration: [代码][代码]2000[代码][代码] [代码][代码]})[代码][代码] [代码][代码]return ;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]//此处省略发送短信验证码功能[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]alreadySend: true,[代码][代码] [代码][代码]send: false[代码][代码] [代码][代码]})[代码][代码] [代码][代码]this.timer()[代码][代码] [代码][代码]},[代码][代码] [代码][代码]showSendMsg: function () {[代码][代码] [代码][代码]if (!this.data.alreadySend) {[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]send: true[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},[代码][代码] [代码][代码]hideSendMsg: function () {[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]send: false,[代码][代码] [代码][代码]disabled: true,[代码][代码] [代码][代码]buttonType: [代码][代码]'default'[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]timer: function () {[代码][代码] [代码][代码]let promise = new Promise((resolve, reject) => {[代码][代码] [代码][代码]let setTimer = setInterval([代码][代码] [代码][代码]() => {[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]second: this.data.second - [代码][代码]1[代码][代码] [代码][代码]})[代码][代码] [代码][代码]if (this.data.second <= [代码][代码]0[代码][代码]) {[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]second: [代码][代码]60[代码][代码],[代码][代码] [代码][代码]alreadySend: false,[代码][代码] [代码][代码]send: true[代码][代码] [代码][代码]})[代码][代码] [代码][代码]resolve(setTimer)[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码], [代码][代码]1000[代码][代码])[代码][代码] [代码][代码]})[代码][代码] [代码][代码]promise.then((setTimer) => {[代码][代码] [代码][代码]clearInterval(setTimer)[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码]})[代码]完整的短信验证码登录实例参考: https://blog.csdn.net/zuoliangzhu/article/details/81219900
2019-04-17 - 推荐一款短视频小程序
一款功能强大的仿抖音短视频微信小程序,包含短视频发布、图片发布、点赞、评论、分享、下载到手机、赞赏等并可展示相应数据。使用微信一键登录,个人中心包含个人信息展示、已发布作品、作品收藏、播放数、点赞数。个人中心列表短视频可自动截图,以提高显示性能。 后端使用php+mysql,非常简单上手,本人提供答疑服务,代码有不明白的随时问我,我都会进行讲解。 已知Bug:某些ios版本视频上的View标签完全看不到,就像是视频被全屏播放,安卓手机表现正常,此为微信小程序官网bug官方将在下一版本修复。 个人微信:tangniyuqi(添加备注短视频) 购买地址:http://market.zhenzikj.com/detail/79.html 微信扫下面的小程序码: [图片]
2019-04-17 - 榛子应用市场-你需要的毕业微信小程序都在这
智能垃圾回收小程序 智能垃圾回收小程序,支持拍照识别、语音录入识别,包含垃圾分类题库测试。 下载地址: http://market.zhenzikj.com/detail/103.html [图片][图片][图片][图片][图片][图片][图片] 通用答题小程序 通用答题小程序,支持多种题库,可以设置答题场景。 支持答题模式和背题模式 支持模拟答题场景,可自定义答题时间和答题数量 左右滑动就可以进入下一题,操作灵活 可以作为商业使用,也可以作为学生的毕业设计使用,提供源码。 新增了背题模式。 下载: http://market.zhenzikj.com/detail/105.html [图片][图片][图片][图片][图片][图片][图片][图片][图片] 外卖点餐小程序 小程序+java后台 点餐外卖小程序。 适用于线下餐厅支持外卖。 也可用于毕业设计 下载: http://market.zhenzikj.com/detail/111.html [图片][图片][图片][图片][图片]
2020-03-13 - 微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端。效果图: [图片] 代码: index.wxml [代码]<!--index.wxml-->[代码][代码]<view class=[代码][代码]"container"[代码][代码]>[代码][代码] [代码][代码]<view class=[代码][代码]'row'[代码][代码]>[代码][代码] [代码][代码]<input placeholder=[代码][代码]'请输入姓名'[代码] [代码]bindinput=[代码][代码]'bindNameInput'[代码][代码]/> [代码][代码] [代码][代码]</view>[代码][代码] [代码] [代码] [代码][代码]<view class=[代码][代码]'row'[代码][代码]>[代码][代码] [代码][代码]<input placeholder=[代码][代码]'请输入手机号'[代码] [代码]bindinput=[代码][代码]'bindPhoneInput'[代码][代码]/> [代码][代码] [代码][代码]</view>[代码][代码] [代码][代码]<view class=[代码][代码]'row'[代码][代码]>[代码][代码] [代码][代码]<input placeholder=[代码][代码]'请输验证码'[代码] [代码]bindinput=[代码][代码]'bindCodeInput'[代码] [代码]style=[代码][代码]'width:70%;'[代码][代码]/> [代码][代码] [代码][代码]<button class=[代码][代码]'codeBtn'[代码] [代码]bindtap=[代码][代码]'getCode'[代码] [代码]hidden=[代码][代码]'{{hidden}}'[代码] [代码]disabled=[代码][代码]'{{btnDisabled}}'[代码][代码]>{{btnValue}}</button>[代码][代码] [代码][代码]</view>[代码][代码] [代码][代码]<view>[代码][代码] [代码][代码]<button class=[代码][代码]'save'[代码] [代码]bindtap=[代码][代码]'save'[代码] [代码]>保存</button>[代码][代码] [代码][代码]</view>[代码][代码] [代码] [代码]</view>[代码] index.js [代码]//index.js[代码][代码]var[代码] [代码]zhenzisms = require([代码][代码]'../../utils/zhenzisms.js'[代码][代码]);[代码][代码]//获取应用实例[代码][代码]const app = getApp();[代码][代码] [代码] [代码]Page({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]hidden: [代码][代码]true[代码][代码],[代码][代码] [代码][代码]btnValue:[代码][代码]''[代码][代码],[代码][代码] [代码][代码]btnDisabled:[代码][代码]false[代码][代码],[代码][代码] [代码][代码]name: [代码][代码]''[代码][代码],[代码][代码] [代码][代码]phone: [代码][代码]''[代码][代码],[代码][代码] [代码][代码]code: [代码][代码]''[代码][代码],[代码][代码] [代码][代码]second: 60[代码][代码] [代码][代码]},[代码][代码] [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码] [代码] [代码] [代码][代码]},[代码][代码] [代码][代码]//姓名输入[代码][代码] [代码][代码]bindNameInput(e) {[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]name: e.detail.value[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]//手机号输入[代码][代码] [代码][代码]bindPhoneInput(e) {[代码][代码] [代码][代码]console.log(e.detail.value);[代码][代码] [代码][代码]var[代码] [代码]val = e.detail.value;[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]phone: val[代码][代码] [代码][代码]})[代码][代码] [代码][代码]if[代码][代码](val != [代码][代码]''[代码][代码]){[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]hidden: [代码][代码]false[代码][代码],[代码][代码] [代码][代码]btnValue: [代码][代码]'获取验证码'[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码]else[代码][代码]{[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]hidden: [代码][代码]true[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},[代码][代码] [代码][代码]//验证码输入[代码][代码] [代码][代码]bindCodeInput(e) {[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]code: e.detail.value[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]//获取短信验证码[代码][代码] [代码][代码]getCode(e) {[代码][代码] [代码][代码]console.log([代码][代码]'获取验证码'[代码][代码]);[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]zhenzisms.client.init([代码][代码]'https://sms_developer.zhenzikj.com'[代码][代码], [代码][代码]'appId'[代码][代码], [代码][代码]'appSecret'[代码][代码]);[代码][代码] [代码][代码]zhenzisms.client.send([代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]if[代码][代码](res.data.code == 0){[代码][代码] [代码][代码]that.timer();[代码][代码] [代码][代码]return[代码] [代码];[代码][代码] [代码][代码]}[代码][代码] [代码][代码]wx.showToast({[代码][代码] [代码][代码]title: res.data.data,[代码][代码] [代码][代码]icon: [代码][代码]'none'[代码][代码],[代码][代码] [代码][代码]duration: 2000[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}, [代码][代码]'15801636347'[代码][代码], [代码][代码]'验证码为:3322'[代码][代码]);[代码][代码] [代码] [代码] [代码][代码]},[代码][代码] [代码][代码]timer: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]let promise = [代码][代码]new[代码] [代码]Promise((resolve, reject) => {[代码][代码] [代码][代码]let setTimer = setInterval([代码][代码] [代码][代码]() => {[代码][代码] [代码][代码]var[代码] [代码]second = [代码][代码]this[代码][代码].data.second - 1;[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]second: second,[代码][代码] [代码][代码]btnValue: second+[代码][代码]'秒'[代码][代码],[代码][代码] [代码][代码]btnDisabled: [代码][代码]true[代码][代码] [代码][代码]})[代码][代码] [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].data.second <= 0) {[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]second: 60,[代码][代码] [代码][代码]btnValue: [代码][代码]'获取验证码'[代码][代码],[代码][代码] [代码][代码]btnDisabled: [代码][代码]false[代码][代码] [代码][代码]})[代码][代码] [代码][代码]resolve(setTimer)[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码], 1000)[代码][代码] [代码][代码]})[代码][代码] [代码][代码]promise.then((setTimer) => {[代码][代码] [代码][代码]clearInterval(setTimer)[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]//保存[代码][代码] [代码][代码]save(e) {[代码][代码] [代码][代码]console.log([代码][代码]'姓名: '[代码] [代码]+ [代码][代码]this[代码][代码].data.name);[代码][代码] [代码][代码]console.log([代码][代码]'手机号: '[代码] [代码]+ [代码][代码]this[代码][代码].data.phone);[代码][代码] [代码][代码]console.log([代码][代码]'验证码: '[代码] [代码]+ [代码][代码]this[代码][代码].data.code);[代码][代码] [代码] [代码] [代码][代码]//省略提交过程[代码][代码] [代码][代码]}[代码][代码]})[代码] index.wxss [代码]/**index.wxss**/[代码][代码]page{[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]background[代码][代码]: linear-gradient([代码][代码]#5681d7[代码][代码], [代码][代码]#486ec3[代码][代码]);[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码]}[代码][代码].container{[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码] [代码][代码]justify-[代码][代码]content[代码][代码]: space-around;[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]90%[代码][代码];[代码][代码] [代码][代码]margin[代码][代码]: [代码][代码]50[代码][代码]rpx [代码][代码]auto[代码][代码];[代码][代码]}[代码][代码] [代码] [代码].row{[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]relative[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]border-radius: [代码][代码]10[代码][代码]rpx;[代码][代码] [代码][代码]background[代码][代码]: [代码][代码]#fff[代码][代码];[代码][代码] [代码][代码]margin-bottom[代码][代码]: [代码][代码]20[代码][代码]rpx;[代码][代码] [代码][代码]padding-left[代码][代码]: [代码][代码]20[代码][代码]rpx;[代码][代码] [代码][代码]box-sizing: border-box;[代码][代码]}[代码][代码].row input{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]height[代码][代码]:[代码][代码]100%[代码][代码];[代码][代码]}[代码][代码].codeBtn{[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]absolute[代码][代码];[代码][代码] [代码][代码]right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]top[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#bbb[代码][代码];[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]30%[代码][代码];[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]26[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码] [代码][代码]line-height[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码]}[代码][代码].subBtn{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]200[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码] [代码][代码]background[代码][代码]: [代码][代码]#fff[代码][代码];[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#000[代码][代码];[代码][代码] [代码][代码]border-radius: [代码][代码]50[代码][代码]rpx;[代码][代码] [代码][代码]line-height[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码]}[代码] 完整下载: http://smsow.zhenzikj.com/doc/sdk.html
2019-01-06