1.最近写的小程序分享,和小伙伴们分享交流一下.小程序分享分为两种:一种是直接分享给好友或群;一种是生成带有小程序码的图片保存本地,然后将图片分享给好友或者朋友圈,其他人通过扫码进入你要分享的页面.好了废话不多说,直接上码!!!里面有些数据和接口调用如果不懂的可以关注我前几篇文章哦!

2.这里先给大家展示一下效果图

3.

4.

5.

6.

7.这里是分享逻辑

//pages/bargain/bargain.jsconstapp=getApp();import{Bargain}from'bargain-model.js';varbargain=newBargain();//实例化对象varutil=require('../../utils/util.js');Page({/***页面的初始数据*/data:{imgwidth:750,imgheights:[],msgList:[],isShow:false,//控制emoji表情是否显示isShowModel:false,},bindchange:function(e){this.setData({current:e.detail.current})},imgHeight:function(e){//获取图片真实宽度varimgwidth=e.detail.width,imgheight=e.detail.height,//宽高比ratio=imgwidth/imgheight;varfirst=e.target.dataset['index'];//计算的高度值varviewHeight=750/ratio;varimgheight=viewHeightvarimgheights=this.data.imgheights//把每一张图片的高度记录到数组里imgheights[first]=imgheight;//改了这里赋值给当前indexthis.setData({imgheights:imgheights,})if(first==0){varcanvasheight=420*imgheight/750;if(canvasheight420){canvasheight=420;varcanvaswidth=420*750/imgheight;}else{canvaswidth=420;}this.setData({canvaswidth:canvaswidth,canvasheight:canvasheight,})}},/***用户点击右上角分享*/onShareAppMessage:function(){varthat=this;vargoodid=that.data.goodid;varscheduleId=that.data.scheduleId;return{title:'砍价',path:'/pages/bargain/bargain?goodid='+goodid+'&scheduleId='+scheduleId,success:function(res){}}},/**邀请好友帮砍*/onForward:function(e){this.setData({isShow:!this.data.isShow,})},//分享给个人sharetoperson:function(e){this.onShareAppMessage;},//分享到朋友圈sharetogroup:function(e){varthat=this;that.setData({isShow:false,isShowModel:true})//获取发起者头像和昵称varuser=that.data.user;wx.showLoading({title:'绘制分享图片中',mask:true});varsid=app.globalData.sid;//发型师sidvargoodid=that.data.goodid;//商品idvarscheduleId=that.data.scheduleId;//用户发起砍价表idvarpid=user.pid;//活动idbargain.getSpecialMData(sid,goodid,scheduleId,pid,(callbackdata)={this.setData({painting:{width:520,height:800,clear:true,views:[{type:'rect',background:'#fff',top:0,left:0,width:520,height:800},{type:'text',content:that.data.bargain.activity_name,fontSize:40,color:'#000',textAlign:'left',top:68,left:54,bolder:true},{type:'image',url:that.data.bargain.img[0],top:158,left:54,width:that.data.canvaswidth,height:that.data.canvasheight},{type:'text',content:that.data.bargain.product_name,fontSize:25,lineHeight:30,color:'#000',textAlign:'left',MaxLineNumber:2,breakWord:true,top:606,left:55,width:245},{type:'text',content:util.formatMonth(newDate()),fontSize:20,color:'#999',top:685,left:54},{type:'text',content:that.data.user.nickname+"需要你帮Ta砍价",fontSize:20,color:'#999',top:717,left:54},{type:'image',url:callbackdata,top:605,left:373,width:106,height:106},{type:'text',content:'长按识别小程序码',fontSize:20,color:'#666',top:717,left:337,}]}})});},eventSave:function(){wx.saveImageToPhotosAlbum({filePath:this.data.shareImage,success(res){wx.showToast({title:'保存图片成功',icon:'success',duration:2000})}})},eventGetImage:function(event){wx.hideLoading()const{tempFilePath,errMsg}=event.detailif(errMsg==='canvasdrawer:ok'){this.setData({shareImage:tempFilePath})}},hideImgModel:function(){varthat=this;that.setData({isShowModel:false})},})

8.这里是wxml

!--分享弹出层{{shareImage}}--viewclass="bottomshare"viewclass="showimportant{{isShow?'showmodel':'hidemodel'}}"/viewviewclass="emoji-box{{isShow?'emoji-move-in':'emoji-move-out'}}"viewclass="deleteTag"bindtap='onForward'×/viewbuttonclass="toperson"open-type="share"bindtap='sharetoperson'imagesrc='https://img.nmsmt.cn/public/youxuan_xcx/toperson.png'class="shareimg"mode="widthFix"/imageview分享给好友/view/buttonbuttonclass="togroup"bindtap='sharetogroup'imagesrc='https://img.nmsmt.cn/public/youxuan_xcx/groups.png'class="shareimg"mode="widthFix"/imageview分享到朋友圈/view/button/view/view!--保存图片到本地--viewclass="model{{isShowModel?'showmodel':'hidemodel'}}"viewclass="deleteTagShare"bindtap='hideImgModel'×/viewimagesrc="{{shareImage}}"class="share-image"model="widthFix"/imagecanvasdrawerpainting="{{painting}}"class="canvasdrawer"bind:getImage="eventGetImage"/buttonbind:tap="eventSave"class="savetolocal"保存到本地/button/view

9.这里是wxss

/*分享弹出层*/.bottomshare{position:fixed;bottom:0;width:100%;z-index:2;}.showimportant{height:100%;background:rgba(0,0,0,0.4);position:fixed;bottom:0%;width:100%;}.emoji-box{position:relative;/*height:200rpx;*/padding:5px0;box-sizing:border-box;margin-bottom:-300rpx;height:300rpx;width:100%;background-color:white;text-align:center;z-index:3;}.emoji-move-in{-webkit-animation:emoji-move-in0.3sforwards;animation:emoji-move-in0.3sforwards;}.emoji-move-out{-webkit-animation:emoji-move-out0.3sforwards;animation:emoji-move-out0.3sforwards;}.no-emoji-move{-webkit-animation:none;animation:none;}@-webkit-keyframesemoji-move-in{0%{margin-bottom:-300rpx;}100%{margin-bottom:0;}}@keyframesemoji-move-in{0%{margin-bottom:-300rpx;}100%{margin-bottom:0;}}@-webkit-keyframesemoji-move-out{0%{margin-bottom:0;}100%{margin-bottom:-300rpx;}}@keyframesemoji-move-out{0%{margin-bottom:0;}100%{margin-bottom:-300rpx;}}.toperson{display:inline-block;width:50%;margin-top:50rpx;border:none;background:#fff;}.toperson:after{border:none;}.togroup{display:inline-block;width:50%;margin-top:50rpx;border:none;background:#fff;}.togroup:after{border:none;}.shareimg{width:30%;}.deleteTag{position:absolute;top:0;line-height:60rpx;font-size:60rpx;width:60rpx;height:60rpx;right:0rpx;color:#666;}.model{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);overflow:hidden;z-index:2;}.showmodel{display:block;}.hidemodel{display:none;}.share-image{width:520rpx;position:absolute;text-align:center;margin:auto;top:0;bottom:0;left:0;right:0;height:800rpx}.savetolocal{bottom:50rpx;position:absolute;background-color:#ff8134;color:white;width:80%;margin:auto;left:0;right:0;}.deleteTagShare{position:absolute;top:127rpx;line-height:40rpx;font-size:105rpx;width:113rpx;height:60rpx;right:35rpx;color:white;z-index:100;}.showimportant{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);overflow:hidden;z-index:2;}

10.小伙伴们写到这一步,相信你们已经知道,保存图片需要用到canvas画图,不要慌,我这里给你准备好了已经封装好的代码,你只需要引入文件就可以了,接下来是划水时间!!!

11.这里引入文件我是在小程序页面配置文件json里面写的,只需要一句话搞定!

{"navigationBarTitleText":"砍价","usingComponents":{"canvasdrawer":"/components/canvasdrawer/canvasdrawer"}}

12.这里是components文件

13.//这里是js

/*globalComponentwx*/Component({properties:{painting:{type:Object,value:{view:[]},observer(newVal,oldVal){if(!this.data.isPainting){if(JSON.stringify(newVal)!==JSON.stringify(oldVal)){if(newVal&&newVal.width&&newVal.height){this.setData({showCanvas:true,isPainting:true})this.readyPigment()}}else{if(newVal&&newVal.mode!=='same'){this.triggerEvent('getImage',{errMsg:'canvasdrawer:sammeparams'})}}}}}},data:{showCanvas:false,width:100,height:100,index:0,imageList:[],tempFileList:[],isPainting:false},ctx:null,cache:{},ready(){wx.removeStorageSync('canvasdrawer_pic_cache')this.cache=wx.getStorageSync('canvasdrawer_pic_cache')||{}this.ctx=wx.createCanvasContext('canvasdrawer',this)},methods:{readyPigment(){const{width,height,views}=this.data.paintingthis.setData({width,height})constinter=setInterval(()={if(this.ctx){clearInterval(inter)this.ctx.clearActions()this.ctx.save()this.getImageList(views)this.downLoadImages(0)}},100)},getImageList(views){constimageList=[]for(leti=0;iviews.length;i++){if(views[i].type==='image'){imageList.push(views[i].url)}}this.setData({imageList})},downLoadImages(index){const{imageList,tempFileList}=this.dataif(indeximageList.length){//console.log(imageList[index])this.getImageInfo(imageList[index]).then(file={tempFileList.push(file)this.setData({tempFileList})this.downLoadImages(index+1)})}else{this.startPainting()}},startPainting(){const{tempFileList,painting:{views}}=this.datafor(leti=0,imageIndex=0;iviews.length;i++){if(views[i].type==='image'){this.drawImage({...views[i],url:tempFileList[imageIndex]})imageIndex++}elseif(views[i].type==='text'){if(!this.ctx.measureText){wx.showModal({title:'提示',content:'当前微信版本过低，无法使用measureText功能，请升级到最新微信版本后重试。'})this.triggerEvent('getImage',{errMsg:'canvasdrawer:versiontoolow'})return}else{this.drawText(views[i])}}elseif(views[i].type==='rect'){this.drawRect(views[i])}}this.ctx.draw(false,()={wx.setStorageSync('canvasdrawer_pic_cache',this.cache)this.saveImageToLocal()})},drawImage(params){this.ctx.save()const{url,top=0,left=0,width=0,height=0,borderRadius=0}=params//if(borderRadius){//this.ctx.beginPath()//this.ctx.arc(left+borderRadius,top+borderRadius,borderRadius,0,2*Math.PI)//this.ctx.clip()//this.ctx.drawImage(url,left,top,width,height)//}else{this.ctx.drawImage(url,left,top,width,height)//}this.ctx.restore()},drawText(params){this.ctx.save()const{MaxLineNumber=2,breakWord=false,color='black',content='',fontSize=16,top=0,left=0,lineHeight=20,textAlign='left',width,bolder=false,textDecoration='none'}=paramsthis.ctx.beginPath()this.ctx.setTextBaseline('top')this.ctx.setTextAlign(textAlign)this.ctx.setFillStyle(color)this.ctx.setFontSize(fontSize)if(!breakWord){this.ctx.fillText(content,left,top)this.drawTextLine(left,top,textDecoration,color,fontSize,content)}else{letfillText=''letfillTop=topletlineNum=1for(leti=0;icontent.length;i++){fillText+=[content[i]]if(this.ctx.measureText(fillText).widthwidth){if(lineNum===MaxLineNumber){if(i!==content.length){fillText=fillText.substring(0,fillText.length-1)+'...'this.ctx.fillText(fillText,left,fillTop)this.drawTextLine(left,fillTop,textDecoration,color,fontSize,fillText)fillText=''break}}this.ctx.fillText(fillText,left,fillTop)this.drawTextLine(left,fillTop,textDecoration,color,fontSize,fillText)fillText=''fillTop+=lineHeightlineNum++}}this.ctx.fillText(fillText,left,fillTop)this.drawTextLine(left,fillTop,textDecoration,color,fontSize,fillText)}this.ctx.restore()if(bolder){this.drawText({...params,left:left+0.3,top:top+0.3,bolder:false,textDecoration:'none'})}},drawTextLine(left,top,textDecoration,color,fontSize,content){if(textDecoration==='underline'){this.drawRect({background:color,top:top+fontSize*1.2,left:left-1,width:this.ctx.measureText(content).width+3,height:1})}elseif(textDecoration==='line-through'){this.drawRect({background:color,top:top+fontSize*0.6,left:left-1,width:this.ctx.measureText(content).width+3,height:1})}},drawRect(params){this.ctx.save()const{background,top=0,left=0,width=0,height=0}=paramsthis.ctx.setFillStyle(background)this.ctx.fillRect(left,top,width,height)this.ctx.restore()},getImageInfo(url){returnnewPromise((resolve,reject)={if(this.cache[url]){resolve(this.cache[url])}else{constobjExp=newRegExp(/^http(s)?://([w-]+.)+[w-]+(/[w-./?%&=]*)?/)if(objExp.test(url)){wx.getImageInfo({src:url,complete:res={if(res.errMsg==='getImageInfo:ok'){this.cache[url]=res.pathresolve(res.path)}else{this.triggerEvent('getImage',{errMsg:'canvasdrawer:downloadfail'})reject(newError('getImageInfofail'))}}})}else{this.cache[url]=urlresolve(url)}}})},saveImageToLocal(){const{width,height}=this.datawx.canvasToTempFilePath({x:0,y:0,width,height,canvasId:'canvasdrawer',complete:res={if(res.errMsg==='canvasToTempFilePath:ok'){this.setData({showCanvas:false,isPainting:false,imageList:[],tempFileList:[]})this.triggerEvent('getImage',{tempFilePath:res.tempFilePath,errMsg:'canvasdrawer:ok'})}else{this.triggerEvent('getImage',{errMsg:'canvasdrawer:fail'})}}},this)}}})

14.这里是json

{"component":true}

15.这里是wxml

canvascanvas-id="canvasdrawer"style="width:{{width}}px;height:{{height}}px;"class="board"wx:if="{{showCanvas}}"/canvas

16.//这里是wxss

.board{position:fixed;top:2000rpx;background-color:#fff;}

17.好了,新鲜的两种分享就完成了,希望对你们有所帮助,欢迎dalao批评指正!!!整理不易,转发请附地址.

18.欢迎加微信object_1995交流哦!!!