E企盈小程序营销工具技术服务商 热线:4006-838-530

微信网页怎么制作,微信小程序把页面做成图片分享原创

E企盈小程序直播系统

开发微信的时候,经常要遇到如上图这样的,保存小程序二维码图片的分享功能。网上找了很多都没有具体的写法,于是自己看官方文档写了一个,分享一下。首先,需要在wxml中创建一个画板canvas。wxml:viewclass=’more’bindtap=’saveImageToPhotosAlbum’保存图片/view//保存图片按钮canvascanvas-id=’share’style=’width:100vw;height:90vh;’hidden='{{canvasHidden}}’/canvas//这里的canvas-id后面要用的上。//style里的宽高要用上,不设置宽高画板会失效。//canvasHidden是控制画板显示隐藏的参数,画板直接设置displaynone,会导致失效。data:data:{canvasHidden:true,//设置画板的显示与隐藏,画板不隐藏会影响页面正常显示avatarUrl:”,//用户头像nickName:”,//用户昵称wxappName:app.globalData.wxappName,//小程序名称shareImgPath:”,screenWidth:”,//设备屏幕宽度description:app.globalData.description,//奖品描述FilePath:”,//头像路径},js:onLoad:function(options){varthat=thisvaruserInfo,nickName,avatarUrl//获取用户信息,头像,昵称之类的数据wx.getUserInfo({success:function(res){console.log(res);userInfo=res.userInfonickName=userInfo.nickNameavatarUrl=userInfo.avatarUrlthat.setData({avatarUrl:res.userInfo.avatarUrl,nickName:res.userInfo.nickName,})wx.downloadFile({url:res.userInfo.avatarUrl})}})//获取用户设备信息,屏幕宽度wx.getSystemInfo({success:res={that.setData({screenWidth:res.screenWidth})console.log(that.data.screenWidth)}})//定义的保存图片方法saveImageToPhotosAlbum:function(){wx.showLoading({title:’保存中…’,})varthat=this;//设置画板显示,才能开始绘图that.setData({canvasHidden:false})varunit=that.data.screenWidth/375varpath1=”../images/bg3.png”varavatarUrl=that.data.avatarUrlconsole.log(avatarUrl+”头像”)varpath2=”../images/award.png”varpath3=”../images/qrcode.png”varpath4=”../images/headborder.png”varpath5=”../images/border.png”varunlight=”../images/unlight.png”varnickName=that.data.nickNameconsole.log(nickName+”昵称”)varcontext=wx.createCanvasContext(‘share’)vardescription=that.data.descriptionvarwxappName=”来「”+that.data.wxappName+”」试试运气”context.drawImage(path1,0,0,unit375,unit462.5)//context.drawImage(path4,unit164,unit40,unit50,unit50)context.drawImage(path2,unit48,unit120,unit280,unit178)context.drawImage(path5,unit48,unit120,unit280,unit178)context.drawImage(unlight,unit82,unit145,unit22,unit32)context.drawImage(unlight,unit178,unit145,unit22,unit32)context.drawImage(unlight,unit274,unit145,unit22,unit32)context.drawImage(unlight,unit82,unit240,unit22,unit32)context.drawImage(unlight,unit178,unit240,unit22,unit32)context.drawImage(unlight,unit274,unit240,unit22,unit32)context.drawImage(path3,unit20,unit385,unit55,unit55)//context.drawImage(path4,48,200,280,128)context.setFontSize(14)context.setFillStyle(“#999”)context.fillText(“长按识别小程序”,unit90,unit408)context.fillText(wxappName,unit90,unit428)//把画板内容绘制成图片,并回调画板图片路径context.draw(false,function(){wx.canvasToTempFilePath({x:0,y:0,width:unit375,height:unit462.5,destWidth:unit375,destHeight:unit462.5,canvasId:’share’,success:function(res){that.setData({shareImgPath:res.tempFilePath})if(!res.tempFilePath){wx.showModal({title:’提示’,content:’图片绘制中,请稍后重试’,showCancel:false})}console.log(that.data.shareImgPath)//画板路径保存成功后,调用方法吧图片保存到用户相册wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,//保存成功失败之后,都要隐藏画板,否则影响界面显示。success:(res)={console.log(res)wx.hideLoading()that.setData({canvasHidden:true})},fail:(err)={console.log(err)wx.hideLoading()that.setData({canvasHidden:true})}})}})});},作者:harbour链接:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信网页怎么制作,微信小程序把页面做成图片分享原创
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏