前端开发
北京前端外包 电话:186-2237-7561
服务客户有中国移动、方正国际、中百集团等
Search:微信小程序
前言：最近做了一个小程序抽奖的活动，出现了部分用户恶意薅羊毛的现象，因此考虑接入腾讯云的验证码。其实腾讯的官方文档写的相当清晰：https://cloud.tencent.com/doc...前言：最近做了一个小程序抽奖的活动，出现了部分用户恶意薅羊毛的现象，因此考虑接入腾讯云的验证码。其实腾讯的官方文档写的相当清晰：https://cloud.tencent.com/doc... 不想啃文档的筒子们的就往下继续看吧~（虽然大同小异）整体效果整体效果整体效果1、小程序触发验证，跳转到验证码小程序2、在验证码小程序内通过验证，并携带参数跳回原来的小程序3、在原来的小程序内，监测携带回的参数，并作后续操作前提条件前提条件前提条件验证码接入前，需要先在验证码控制台中注册 AppID 和 AppSecret，注册完成后，您可以在控制台的基础配置中查看 AppID (下文extraData中使用) 以及 AppSecret。验证码控制台基础配置注意，这里的 appId 和 appSecret 和小程序后台的是不一致的！接入步骤接入步骤接入步骤1、在你需要的地方，唤起验证码小程序1、在你需要的地方，唤起验证码小程序首先在 app.json 配置 navigateToMiniProgramAppIdList，如下：{ "navigateToMiniProgramAppIdList": ["wx5a3a7366fd07e119"]}{ "navigateToMiniProgramAppIdList": ["wx5a3a7366fd07e119"]}这个appId是官方文档中直接提供的，搬上去就好。假设你的唤起方式是通过一个这样的按钮事件：验证验证toTCaptcha: function () {wx.navigateToMiniProgram({appId: 'wx5a3a7366fd07e119',path: '/pages/captcha/index',extraData: {appId: 'appId' //您申请的验证码的 appId}}) }toTCaptcha: function () {wx.navigateToMiniProgram({appId: 'wx5a3a7366fd07e119',path: '/pages/captcha/index',extraData: {appId: 'appId' //您申请的验证码的 appId}}) }2、在 app.js 获取验证结果2、在 app.js 获取验证结果2、在 app.js 获取验证结果由于小程序间相互跳转过程中产生的数据仅能在 app.js 中获取到，故需要在 app.js 的 onShow 中添加以下代码，来捕获验证结果 captchaResultApp({ // ... onShow: function(options) {// 解决各类回调的兼容问题if (!this.captchaTicketExpire) this.captchaTicketExpire = {};if (options.scene === 1038 && options.referrerInfo.appId === 'wx5a3a7366fd07e119') {const result = options.referrerInfo.extraData;if (result.ret === 0) {const ticket = result.ticket;if (!this.captchaTicketExpire[ticket]) {this.captchaResult = result;this.captchaTicketExpire[ticket] = true;}} else {// 用户关闭了验证码// 这里可以加上一些验证失败提示}} }, // ...});App({ // ... onShow: function(options) {// 解决各类回调的兼容问题if (!this.captchaTicketExpire) this.captchaTicketExpire = {};if (options.scene === 1038 && options.referrerInfo.appId === 'wx5a3a7366fd07e119') {const result = options.referrerInfo.extraData;if (result.ret === 0) {const ticket = result.ticket;if (!this.captchaTicketExpire[ticket]) {this.captchaResult = result;this.captchaTicketExpire[ticket] = true;}} else {// 用户关闭了验证码// 这里可以加上一些验证失败提示}} }, // ...});验证结果（captchaResult） 参数说明：3、将验证结果返回至服务端校验3、将验证结果返回至服务端校验3、将验证结果返回至服务端校验在小程序页面的 onShow 阶段，将验证结果及待提交的表单数据一起提交到服务器，进行校验。// page.jsconst app = getApp()Page({ data: {// ... }, onShow() {const captchaResult = app.captchaResult;app.captchaResult = null; // 验证码的票据为一次性票据，取完需要置空if (captchaResult && captchaResult.ret === 0) {// 将验证码的结果返回至服务端校验，以及后续的操作// const ticket = captchaResult.ticket;// const randstr = captchaResult.randstr;} }, // ...});// page.jsconst app = getApp()Page({ data: {// ... }, onShow() {const captchaResult = app.captchaResult;app.captchaResult = null; // 验证码的票据为一次性票据，取完需要置空if (captchaResult && captchaResult.ret === 0) {// 将验证码的结果返回至服务端校验，以及后续的操作// const ticket = captchaResult.ticket;// const randstr = captchaResult.randstr;} }, // ...});用一个词描述这个开发过程：搬上去！以上就是本文的全部内容，希望对大家的学习有所帮助。
"Mon Jan 06 2021 09:10:28 GMT+0800 (中国标准时间)""Mon Jan 06 2021 09:10:28 GMT+0800 (中国标准时间)"一般服务"Mon Jan 06 2021 09:10:28 GMT+0800 (中国标准时间)""Mon Jan 06 2021 09:10:28 GMT+0800 (中国标准时间)"一般服务器获取到的日期都是这样的，我们需要对其进行格式化在utils目录创建filter.wxs文件filter.wxs//日期格式化var formatTime = function (strDate, format = "yyyy-MM-dd hh:mm:ss") { // 解决ios出现NaN问题 var realDate = strDate ? getDate(strDate.replace(getRegExp('-', 'g'), '/')) : getDate(); var regYear = getRegExp("(y+)", "i"); var date = [["M+", realDate.getMonth() + 1],["d+", realDate.getDate()],["h+", realDate.getHours()],["m+", realDate.getMinutes()],["s+", realDate.getSeconds()],["q+", Math.floor((realDate.getMonth() + 3) / 3)],["S+", realDate.getMilliseconds()], ]; var reg1 = regYear.exec(format); if (reg1) {format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length)); } for (var i = 0; i var reg2 = getRegExp("(" + date[i][0] + ")").exec(format);if (reg2) {format = format.replace(reg2[1], reg2[1].length == 1 ? v : ("00" + date[i][1]).substring(("" + date[i][1]).length));} } return format;}module.exports = { formatTime: formatTime,//日期格式化}//日期格式化var formatTime = function (strDate, format = "yyyy-MM-dd hh:mm:ss") { // 解决ios出现NaN问题 var realDate = strDate ? getDate(strDate.replace(getRegExp('-', 'g'), '/')) : getDate(); var regYear = getRegExp("(y+)", "i"); var date = [["M+", realDate.getMonth() + 1],["d+", realDate.getDate()],["h+", realDate.getHours()],["m+", realDate.getMinutes()],["s+", realDate.getSeconds()],["q+", Math.floor((realDate.getMonth() + 3) / 3)],["S+", realDate.getMilliseconds()], ]; var reg1 = regYear.exec(format); if (reg1) {format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length)); } for (var i = 0; i var reg2 = getRegExp("(" + date[i][0] + ")").exec(format);if (reg2) {format = format.replace(reg2[1], reg2[1].length == 1 ? v : ("00" + date[i][1]).substring(("" + date[i][1]).length));} } return format;}module.exports = { formatTime: formatTime,//日期格式化}wxml创建时间：{{filter.formatTime(item.creatTime, 'yyyy-MM-dd hh:mm:ss')}}创建时间：{{filter.formatTime(item.creatTime, 'yyyy-MM-dd hh:mm:ss')}}渲染页面直接引用，并且进行日期格式化调用7
最开始的时候，在小程序中实现吸顶效果，开发工具看起来还挺好的，但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重，无法及时将操作处理结果及时传递到视图层。setDat最开始的时候，在小程序中实现吸顶效果，开发工具看起来还挺好的，但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重，无法及时将操作处理结果及时传递到视图层。setDatasetData后面就对代码进行了调整，避免不停的去setData效果图效果图吸顶前吸顶后代码部分代码部分wxml 新品推荐限时优惠火爆热搜猜你喜欢 新品推荐限时优惠火爆热搜猜你喜欢 wxssview, text { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}.navbar-wrap { width: 100%;}.navbar-wrap .column { width: 100%; height: 80rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around; background: #fff; border-bottom: solid 1px #eee; top: 0; left: 0; z-index: 100;}.navbar-wrap .column.fixed { position: fixed;}/* 以下的代码不重要 */.navbar-wrap .column .block { width: 25%; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 30rpx; color: #333; letter-spacing: 1px; position: relative;}.navbar-wrap .column .block::after { content: ""; width: 60%; height: 3px; border-radius: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: transparent;}.navbar-wrap .column .block.active { color: #1490ce; font-weight: bold;}.navbar-wrap .column .block.active::after { background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%);}view, text { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}.navbar-wrap { width: 100%;}.navbar-wrap .column { width: 100%; height: 80rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around; background: #fff; border-bottom: solid 1px #eee; top: 0; left: 0; z-index: 100;}.navbar-wrap .column.fixed { position: fixed;}/* 以下的代码不重要 */.navbar-wrap .column .block { width: 25%; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 30rpx; color: #333; letter-spacing: 1px; position: relative;}.navbar-wrap .column .block::after { content: ""; width: 60%; height: 3px; border-radius: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: transparent;}.navbar-wrap .column .block.active { color: #1490ce; font-weight: bold;}.navbar-wrap .column .block.active::after { background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%);}jsPage({ data: {navbarInitTop: 0, //导航栏初始化距顶部的距离isFixedTop: false, //是否固定顶部 }, /*** 生命周期函数--监听页面加载*/ onLoad: function(options) { }, /*** 生命周期函数--监听页面显示*/ onShow: function() {var that = this;if (that.data.navbarInitTop == 0) {//获取节点距离顶部的距离wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {if (rect && rect.top > 0) {var navbarInitTop = parseInt(rect.top);that.setData({navbarInitTop: navbarInitTop});}}).exec();} }, /*** 监听页面滑动事件*/ onPageScroll: function(e) {var that = this;var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度//判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;//为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等if (that.data.isFixedTop === isSatisfy) {return false;}that.setData({isFixedTop: isSatisfy}); }})Page({ data: {navbarInitTop: 0, //导航栏初始化距顶部的距离isFixedTop: false, //是否固定顶部 }, /*** 生命周期函数--监听页面加载*/ onLoad: function(options) { }, /*** 生命周期函数--监听页面显示*/ onShow: function() {var that = this;if (that.data.navbarInitTop == 0) {//获取节点距离顶部的距离wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {if (rect && rect.top > 0) {var navbarInitTop = parseInt(rect.top);that.setData({navbarInitTop: navbarInitTop});}}).exec();} }, /*** 监听页面滑动事件*/ onPageScroll: function(e) {var that = this;var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度//判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;//为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等if (that.data.isFixedTop === isSatisfy) {return false;}that.setData({isFixedTop: isSatisfy}); }})以上就是本文的全部内容，希望对大家的学习有所帮助。
