微信小程序实现分享到朋友圈

微信小程序分享到朋友圈，微信官方没有提供开放接口，所以我们通过canva画布，生成一张图片，图片自带小程序码，用户通过识别二维码，达到分享小程序到朋友圈目的。

效果图：

下面我们来实现以上图片：

WXML:

viewclass='share'

canvascanvas-id="shareCanvas"style="width:300px;height:380px"/canvas

viewclass='bottom'

imagesrc="/image/user/close1.png"bindtap='closeShare'/image

/view

/view

WXSS:

/*pages/user/ShareCircleOfFriends.wxss*/

page{

background:#eee;

}

.share{

width:300px;

height:380px;

position:fixed;

left:0;

right:0;

top:0;

bottom:100rpx;

margin:auto;

}

.btn-box{

padding:1060rpx60rpx060rpx;

}

button{

background:darkturquoise;

}

.bottom{

width:300px;

height:40px;

background-color:white;

}

.bottomimage{

width:70rpx;

height:70rpx;

margin-left:45%;

margin-top:2%;

}

JS:

data:{

sharebg:'https://shadoushoutest.zwyxit.com/Images/ShareImage/share3.png',//分享底部背景图

shareTitle:'互联网+深度分类回收=啥都收电器回收，生活废品回收，工厂废料企业转行酒楼设备企业设备，库存货物等等，有偿服务和无偿服务',//分享标题

shareCoverImg:'https://shadoushoutest.zwyxit.com/Images/ShareImage/share1.png',//分享封面图

shareQrImg:'https://shadoushoutest.zwyxit.com/Images/ShareImage/share2.png',//分享小程序二维码

userInfo:{

headImg:'http://shadoushou.zwyxit.com/Images/User/0515100040529.jpg',//用户头像

nickName:'打豆豆',//昵称

},

seeDate:'2018-12-04',//看视频日期

}

/**

*生命周期函数--监听页面加载

*/

onLoad:function(options){

letthat=this;

varUserName=app.globalData.login_sj[0];

wx.setNavigationBarTitle({

title:'分享到朋友圈',

})

vartime=util.formatTime(newDate());

varUserImage=app.globalData.login_sj[2];

vartimestamp=Date.parse(newDate());

vardate=newDate(timestamp);

//获取年份

varY=date.getFullYear();

//获取月份

varM=(date.getMonth()+110?'0'+(date.getMonth()+1):date.getMonth()+1);

//获取当日日期

varD=date.getDate()10?'0'+date.getDate():date.getDate();

vartime1=Y+"-"+M+"-"+D

that.data.userInfo.nickName=UserName;

that.data.userInfo.headImg=UserImage;

that.setData({

nickName:that.data.userInfo,

headImg:that.data.userInfo,

seeDate:time1

})

console.log(that.data.userInfo.nickName);

//创建画布

constctx=wx.createCanvasContext('shareCanvas')

//白色背景

ctx.setFillStyle('#fff')

ctx.fillRect(0,0,300,380)

ctx.draw()

//下载底部背景图

wx.getImageInfo({

src:that.data.sharebg,

success:(res1)={

ctx.drawImage(res1.path,0,250,300,130)

//下载视频封面图

wx.getImageInfo({

src:that.data.shareCoverImg,

success:(res2)={

ctx.drawImage(res2.path,0,0,300,168)

//分享标题

//ctx.setTextAlign('center')//文字居中

ctx.setFillStyle('#000')//文字颜色：黑色

ctx.setFontSize(20)//文字字号：20px

if(that.data.shareTitle.length=14){

//不用换行

ctx.fillText(that.data.shareTitle,10,200,280)

}elseif(that.data.shareTitle.length=28){

//两行

letfirstLine=that.data.shareTitle.substring(0,14);

letsecondLine=that.data.shareTitle.substring(14,27);

ctx.fillText(firstLine,10,200,280)

ctx.fillText(secondLine,10,224,280)

}else{

//超过两行

letfirstLine=that.data.shareTitle.substring(0,14);

letsecondLine=that.data.shareTitle.substring(14,27)+'...';

ctx.fillText(firstLine,10,200,280)

ctx.fillText(secondLine,10,224,280)

}

//下载二维码

wx.getImageInfo({

src:that.data.shareQrImg,

success:(res3)={

letqrImgSize=70

ctx.drawImage(res3.path,212,256,qrImgSize,qrImgSize)

ctx.stroke()

ctx.draw(true)

//用户昵称

ctx.setFillStyle('#000')//文字颜色：黑色

ctx.setFontSize(14)//文字字号：16px

ctx.fillText(that.data.userInfo.nickName,38,284)

//观看日期

ctx.setFillStyle('#999')//文字颜色：黑色

ctx.setFontSize(10)//文字字号：16px

ctx.fillText('在'+that.data.seeDate+'分享到朋友圈',38,298)

//下载用户头像

wx.getImageInfo({

src:that.data.userInfo.headImg,

success:(res4)={

//先画圆形，制作圆形头像(圆心x，圆心y，半径r)

ctx.arc(22,284,12,0,Math.PI*2,false)

ctx.clip()

//绘制头像图片

letheadImgSize=24

ctx.drawImage(res4.path,10,272,headImgSize,headImgSize)

//ctx.stroke()//圆形边框

ctx.draw(true)

//保存到相册

wx.canvasToTempFilePath({

canvasId:'shareCanvas',

success:function(res){

wx.saveImageToPhotosAlbum({

filePath:res.tempFilePath,

success:function(res){

wx.showToast({

title:'分享图片已保存到相册,请到朋友圈选择图片发布'

})

}

})

}

},this)

}

})

}

})

}

})

}

})

}