微信小程序实现动态验证码
这篇文章主要为大家详细介绍了微信小程序实现动态验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现动态验证码的具体代码，供大家参考，具体内容如下
一、创建自定义组件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 verification-puzzle.json
{ "component": true, "usingComponents": {} }verification-puzzle.wxml
二、在index页面使用
index.wxml
刷新
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" } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
标签：