微信小程序?qū)崿F(xiàn)動態(tài)驗證碼
更新時間：2022年05月23日 11:19:13 作者：XJ_18335388352
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)動態(tài)驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)動態(tài)驗證碼的具體代碼，供大家參考，具體內(nèi)容如下
一、創(chuàng)建自定義組件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"
? ? }
? },
? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? 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); //顏色若太深可能導(dǎo)致看不清
? ? ? 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);
? ? ? ? //修改坐標(biāo)原點和旋轉(zhuǎn)角度
? ? ? ? ctx.translate(x, y);
? ? ? ? ctx.rotate(deg * Math.PI / 180);
? ? ? ? ctx.fillText(txt, 5, 0);
? ? ? ? text = text + txt;
? ? ? ? //恢復(fù)坐標(biāo)原點和旋轉(zhuǎn)角度
? ? ? ? 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({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {},
? crash() {
? ? this.verification.crash()
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
??
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
?? ?this.verification = this.selectComponent('#verification')
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {
? },
? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {
? },
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
? },
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {
? }
})index.json
{
? "usingComponents": {
? ?? ?"verification-code": "/components/verification-code/verification-code"
?? ?}
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何實現(xiàn)小程序與小程序之間的跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
本篇文章主要介紹了求js數(shù)組的最大值和最小值的四種方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了ckeditor一鍵排版功能實現(xiàn)方法,結(jié)合實例形式分析了ckeditor一鍵排版相關(guān)擴(kuò)展插件定義、配置與使用方法,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了js仿京東放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
js不能獲取隱藏div的的寬度，現(xiàn)在的辦法是先將其顯示出來，再獲取其寬度，計算位置，下面的示例，大家可以參考下2014-09-09
js的數(shù)組與我們?nèi)粘Ｉ钪械臄?shù)組一樣,都是會進(jìn)行求和計算的,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組求和的幾種常見方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
兼容IE/Firefox/Opera/Safari的檢測頁面裝載完畢的腳本Ext.onReady的實現(xiàn)
其中對于IE的檢測很有意思。 以上代碼，整理自Extjs的腳本，完全可以代替 Ext.onReady使用。2009-07-07
這篇文章主要介紹了JavaScript中添加監(jiān)聽句柄的方式，監(jiān)聽就是觸發(fā)某事件之后做出的響應(yīng),監(jiān)聽句柄是觸發(fā)某相應(yīng)的條件，下面關(guān)于添加監(jiān)聽句柄的方式的詳細(xì)內(nèi)容，需要的朋友可以參考一下，希望對你有所幫助2022-02-02
JavaScript實現(xiàn)twitter puddles算法實例
這篇文章主要介紹了JavaScript實現(xiàn)twitter puddles算法實例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下2014-12-12