1.

可以在utils中新建一个mcaptcha.js

2.

代码如下：

module.exportsclassMcaptcha{constructor(options){this.optionsoptions;this.fontSizeoptions.height*3/6;this.init();this.refresh();}init(){this.ctxwx.createCanvasContext(this.options.el);this.ctx.setTextBaseline("middle");this.ctx.setFillStyle(this.randomColor(180,240));}refresh(){varcode'';vartxtArr['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',0,1,2,3,4,5,6,7,8,9]for(vari0;i4;i++){code+txtArr[this.randomNum(0,txtArr.length)];}this.options.createCodeImgcode;letarr(code+'').split('');if(arr.length0){arr['e','r','r','o','r'];};letoffsetLeftthis.options.width*0.6/(arr.length-1);letmarginLeftthis.options.width*0.2;arr.forEach((item,index){this.ctx.setFillStyle(this.randomColor(0,180));letsizethis.randomNum(24,this.fontSize);this.ctx.setFontSize(size);letdisoffsetLeft*index+marginLeft-size*0.3;letdegthis.randomNum(-30,30);this.ctx.translate(dis,this.options.height*0.5);this.ctx.rotate(deg*Math.PI/180);this.ctx.fillText(item,0,0);this.ctx.rotate(-deg*Math.PI/180);this.ctx.translate(-dis,-this.options.height*0.5);})for(vari0;i4;i++){this.ctx.strokeStylethis.randomColor(40,180);this.ctx.beginPath();this.ctx.moveTo(this.randomNum(0,this.options.width),this.randomNum(0,this.options.height));this.ctx.lineTo(this.randomNum(0,this.options.width),this.randomNum(0,this.options.height));this.ctx.stroke();}for(vari0;ithis.options.width/4;i++){this.ctx.fillStylethis.randomColor(0,255);this.ctx.beginPath();this.ctx.arc(this.randomNum(0,this.options.width),this.randomNum(0,this.options.height),1,0,2*Math.PI);this.ctx.fill();}this.ctx.draw();}validate(code){varcodecode.toLowerCase();varv_codethis.options.createCodeImg.toLowerCase();console.log(code)console.log(v_code.substring(v_code.length-4))if(codev_code.substring(v_code.length-4)){returntrue;}else{returnfalse;}}randomNum(min,max){returnMath.floor(Math.random()*(max-min)+min);}randomColor(min,max){letrthis.randomNum(min,max);letgthis.randomNum(min,max);letbthis.randomNum(min,max);return"rgb("+r+","+g+","+b+")";}}在对于页面的js中引入mcaptcha.jsvarMcaptcharequire('../../../utils/mcaptcha.js');/***生命周期函数--监听页面初次渲染完成*/onReady:function(){this.mcaptchanewMcaptcha({el:'canvas',width:80,height:35,createCodeImg:""});},。。。//刷新验证码onTap(){this.mcaptcha.refresh();},//验证验证码varresthis.mcaptcha.validate(this.data.imgCode);if(this.data.imgCode''||this.data.imgCodenull){toast.showToast({title:'请输入图形验证码'})return;}if(!res){toast.showToast({title:'图形验证码错误'})return;}wxml页面：inputtype"text"id"code"name"codeImg"placeholder-class'C3'bindinput'codeImg'placeholder"请输入图形验证码"maxlength"4"value'{{imgCode}}'/viewstyle'position:relative;'bindtap"onTap"canvasstyle"width:160rpx;height:70rpx;position:absolute;right:0rpx;bottom:10rpx;text-align:center;z-index:9999;"canvas-id"canvas"/canvas/view效果：参考：https://www.jianshu.com/p/064a80a3561a