1.先看一下效果图

2.

3.一:wxml

viewclass='page'viewclass='img'canvasclass='shareImg'style='width:{{windowWidth}}px;height:{{windowHeight}}px;'canvas-id="shareCanvas"binderror="canvasIdErrorCallback"/canvas/viewviewclass='btn'buttonclass='shareView'open-type='getUserInfo'bindtap="downImg"textclass='iconfonticon-xiazaixiazaiblack'/text保存到本地/buttonbuttonclass='shareFriend'data-name="shareBtn"open-type="share"邀请好友为我点赞/button/view/view

4.二:js

5.1:页面初始化加载

onReady:function(){varthat=this;wx.showLoading({title:'正在生成...',mask:true,});vari=setInterval(function(){console.log(calDays);if(share_like_code&&share_bg_img&&windowWidth&&nickName&&wxAvatarUrl&&stepSize&&days&&calDays==days){clearInterval(i);createShareImg(that);}},200);loadUserData(this);loadUserInfo(this);loadShareData(this);},

6.2:加载二维码

functionloadShareLikeCode(that){user_info_table.where({_openid:openid}).orderBy('createDate','desc').limit(1).get().then(res={varuser=res.data[0];console.log('saveuserselectuser',user);varshareLikeCodeUrl=user.shareLikeCodeUrl;if(shareLikeCodeUrl){wx.getImageInfo({src:shareLikeCodeUrl,success:function(res){console.log('res',res);share_like_code=res.path;},fail:function(e){console.log(e);wx.showToast({title:'加载失败',icon:'none',mask:false,duration:2000});}})}else{wx.cloud.callFunction({name:'img_upload_handle',//云函数名称data:{//小程序码所需的参数page:"pages/home/home",scene:'f:'+openid,fileName:'shareLike/'+openid+'/code/'+openid+'.png',},complete:res={console.log('callFunctiontestresult:',res)console.log('callFunctiontesturl:',res.result.url);varurl="https://"+res.result.url;console.log("url:",url);wx.getImageInfo({src:url,success:function(res){console.log('res',res);share_like_code=res.path;},fail:function(e){console.log(e);wx.showToast({title:'加载失败',icon:'none',mask:false,duration:2000});}})varuser_id=user._id;user_info_table.doc(user_id).update({data:{shareLikeCodeUrl:url,}}).then(res={}).catch(console.error);},});}})}

7.2:加载背景图片

functionloadShareData(that){dict_config_table.where({type:'share_bg_img',sub_type:page_type,}).orderBy('index','ASC').get().then(res={varcontent=res.data[0].content;console.log(content);wx.getImageInfo({src:content,success:function(res){console.log('res',res);share_bg_img=res.path;},fail:function(e){console.log(e);}})})

8.3:绘制图片

functioncreateShareImg(that){constcontext=wx.createCanvasContext('shareCanvas');context.drawImage(share_bg_img,0,0,windowWidth,windowHeight);context.fillStyle="rgba(0,0,0,0.4)";context.fillRect(20*rpx,20*hrpx,280*rpx,464*hrpx);//头像context.fillStyle="rgba(255,255,255,1)";context.fillRect(50*rpx,30*hrpx,50*rpx,50*rpx);context.drawImage(wxAvatarUrl,50*rpx,30*hrpx,50*rpx,50*rpx);context.setFillStyle('#FFFFFF');//context.setFontSize(30);//context.fillText(avatar,30,60);//昵称context.setFontSize(15*rpx);context.fillText(nickName,110*rpx,50*hrpx);//说明context.setFontSize(11*rpx);context.fillText(titContent,110*rpx,75*hrpx);//完成度context.setFontSize(27*rpx);context.fillText(stepSize,50*rpx,120*hrpx);context.setFontSize(10*rpx);context.fillText(stepUnit,105*rpx,120*hrpx);context.setFontSize(18*rpx);context.fillText(stepResult,60*rpx,150*hrpx);context.setFontSize(27*rpx);context.fillText(days,200*rpx,120*hrpx);context.setFontSize(10*rpx);context.fillText(daysUnit,240*rpx,120*hrpx);context.setFontSize(18*rpx);context.fillText(daysResult,210*rpx,150*hrpx);//中间提示context.setFontSize(15*rpx);context.fillText(encontent1,70*rpx,200*hrpx);context.setFontSize(15*rpx);context.fillText(encontent2,30*rpx,230*hrpx);context.setFontSize(11*rpx);context.fillText(content,75*rpx,260*hrpx);context.drawImage('/pages/utils/resources/image/dz.png',140*rpx,290*hrpx,40*rpx,40*rpx);context.setFontSize(12*rpx);context.fillText(likeTip,135*rpx,355*hrpx);//二维码context.drawImage(share_like_code,65*rpx,390*hrpx,80*rpx,80*rpx);context.setFontSize(18*rpx);context.fillText(codeName,175*rpx,410*hrpx);context.setFontSize(12*rpx);context.fillText(codeTip1,175*rpx,440*hrpx);context.setFontSize(12*rpx);context.fillText(codeTip2,175*rpx,460*hrpx);context.draw();wx.hideLoading();}

9.4:下载图片

downImg:function(){wx.showLoading({title:'正在保存...',mask:true,});wx.getSetting({success(res){console.log(res.authSetting)console.log();varisSave=res.authSetting['scope.writePhotosAlbum'];console.log(isSave);if(false==isSave){wx.openSetting({success(res){console.log(res.authSetting)}})wx.hideLoading();}}})wx.canvasToTempFilePath({canvasId:'shareCanvas',success(res){console.log(res);wx.authorize({scope:'scope.writePhotosAlbum',success(){wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success(){wx.showToast({title:'已下载至相册',icon:'success',mask:false,duration:2000})},fail(){wx.hideLoading();},complete(){}})},fail(e){console.log(e);}})}},this);},

10.三:云函数

11.1:img_upload_handle

//云函数入口文件constcloud=require('wx-server-sdk')cloud.init()//云函数入口函数exports.main=async(event,context)={constwxContext=cloud.getWXContext();vardataresult=awaitcloud.callFunction({name:'get_token',//云函数名称data:{//小程序码所需的参数page:event.page,friendId:event.friendId,},})vardata=dataresult.result.data;varaccess_token=dataresult.result.access_token;varbytes=data;varupresult=awaitcloud.callFunction({name:'weixin_bytes_uploader',//云函数名称data:{//小程序码所需的参数bybes:bytes,fileName:event.fileName,access_token:access_token,page:event.page,scene:event.scene,},})return{event,openid:wxContext.OPENID,appid:wxContext.APPID,unionid:wxContext.UNIONID,dataresult:dataresult,url:upresult.result.url}}

12.2:云函数get_token

//云函数入口文件constcloud=require('wx-server-sdk');cloud.init()//云函数入口函数exports.main=async(event,context)={constwxContext=cloud.getWXContext();constrequest=require('request');returnnewPromise((resolve,reject)={request('https://....getToken',function(error,response,body){varaccess_token=JSON.parse(body).data;varresult={event,openid:wxContext.OPENID,appid:wxContext.APPID,unionid:wxContext.UNIONID,access_token:access_token}resolve(result);});});}

13.3:云函数weixin_bytes_uploader

//云函数入口文件constcloud=require('wx-server-sdk')cloud.init()//云函数入口函数exports.main=async(event,context)={varfileName=null;varbybes=null;if(event.fileName){fileName=event.fileName;}if(event.bybes){bybes=event.bybes;}else{return{error:"nobybes",}}varaccess_token=event.access_token;varkey=fileName;varoptions={scope:'scope',expires:7200,};varparam={page:event.page,width:280,scene:event.scene,};constrequest=require('request');returnnewPromise((resolve,reject)={varCOS=require('cos-nodejs-sdk-v5');//使用永久密钥创建实例varcos=newCOS({SecretId:'SecretId',SecretKey:'SecretKey'})request.post({url:'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+access_token,form:JSON.stringify(param),body:'buffer',encoding:null,headers:[{name:'responseType',value:'arraybuffer'},{name:'content-type',value:'application/x-www-form-urlencoded'}],},function(err,httpResponse,body){cos.putObject({Bucket:'Bucket',/*必须*/Region:'Region',/*必须*/Key:key,/*必须*/Body:body,/*必须*/onProgress:function(progressData){console.log(progressData);},},function(err,data){result.err=err;result.data=data;result.url=data.Location;resolve(result);if(err){console.log(err);}else{console.log(data);}});});});}

14.四:生成效果图

15.