一、创建自定义组件verification-code

verification-code.js

// pages/test1/verificationQr/verificationQr.js
var ctx;
Component({/*** 组件的属性列表*/properties: {width:{type: Number,value: 150},height: {type: Number,value: 48},count:{type:Number,value:4},fontSize: {type: Number,value: 34},fontFamily:{type: String,value: "SimHei"}},/*** 组件的初始数据*/data: {text: '',count: 4,width:90,height:28,fontSize:30,fontFamily:"SimHei"},ready() {this.setData({count:this.properties.count,width:this.properties.width,height:this.properties.height,fontSize:this.properties.fontSize,fontFamily:this.properties.fontFamily})this.drawPic(this)},/*** 组件的方法列表*/methods: {crash(){this.drawPic(this)},/**绘制验证码图片**/drawPic(that) {ctx = wx.createCanvasContext('canvas',this);/**绘制背景色**/ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清ctx.fillRect(0, 0, that.data.width, that.data.height)/**绘制文字**/var arr;var text = '';var str = 'ABCEFGHJKLMNPQRSTWXY123456789';for (var i = 0; i < that.data.count; i++) {var txt = str[randomNum(0, str.length)];ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色ctx.font = randomNum(20, 26) + 'px SimHei'; //随机生成字体大小var x = 10 + i * 20;var y = randomNum(25, 30);var deg = randomNum(-30, 30);//修改坐标原点和旋转角度ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 5, 0);text = text + txt;//恢复坐标原点和旋转角度ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);}/**绘制干扰线**/for (var i = 0; i < 4; i++) {ctx.strokeStyle = randomColor(40, 180);ctx.beginPath();ctx.moveTo(randomNum(0, that.data.width), randomNum(0, that.data.height));ctx.lineTo(randomNum(0, that.data.width), randomNum(0, that.data.height));ctx.stroke();}/**绘制干扰点**/for (var i = 0; i < 20; i++) {ctx.fillStyle = randomColor(0, 255);ctx.beginPath();ctx.arc(randomNum(0, that.data.width), randomNum(0, that.data.height), 1, 0, 2 * Math.PI);ctx.fill();}ctx.draw(false, function() {console.log(text)that.triggerEvent('result', { text });that.setData({text: text,})})}}
})
function randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);
}
/**生成一个随机色**/
function randomColor(min, max) {var r = randomNum(min, max);var g = randomNum(min, max);var b = randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";
}

verification-puzzle.json

{"component": true,"usingComponents": {}
}

verification-puzzle.wxml

<canvas style="width:{{width}}px;height:{{height}}px" canvas-id="canvas" bindtap='crash'></canvas>

二、在index页面使用

index.wxml

<verification-code id="verification"></verification-code>
<view bindtap="crash">刷新</view>

index.js

// pages/test/test/test.js
Page({/*** 页面的初始数据*/data: {},crash() {this.verification.crash()},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {this.verification = this.selectComponent('#verification')},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.json

{"usingComponents": {"verification-code": "/components/verification-code/verification-code"}
}

微信小程序-动态验证码相关推荐

学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
微信小程序动态添加view
微信小程序动态添加view //index.html<button bindtap='clickMe'> 添加</button> <input type='input' ...
微信小程序动态添加类名
微信小程序动态添加类名和vue的语法差不多,一个小测试 <view class="list-top"> <view data-num="1" ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序-动态获取appid
微信小程序动态获取appid 使用wx.getAccountInfoSync();方法. 具体实现方法如下: var accountInfo = wx.getAccountInfoSync(); va ...
微信小程序，验证码输入框
微信小程序,验证码输入效果预览写了个小程序验证码输入的小demo,用的方法是比较猥琐的隐藏input框,输入内容绑定的方法 wxml代码 <view class="wx-page- ...
微信小程序动态修改头部title
微信小程序动态修改头部title 1,正常我们设置title的名字是这么设置的 {"navigationBarTitleText": "详情", } 2.在js ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
微信小程序--动态设置导航栏颜色
微信小程序--动态设置导航栏颜色既然要动态设置导航栏颜色,估计自定义导航栏也跑不了关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor ...

微信小程序-动态验证码

微信小程序-动态验证码

一、创建自定义组件verification-code

二、在index页面使用

微信小程序-动态验证码相关推荐

最新文章

热门文章