微信小程序实现分享到朋友圈 微信小程序分享到朋友圈,微信官方没有提供开放接口,所以我们通过canva画布,生成一张图片,图片自带小程序码,用户通过识别二维码,达到分享小程序到朋友圈目的。效果图: 下面我们来实现以上图片:WXML:<view class=’share’> <canvas canvas-id=”shareCanvas” style=”width:300px;height:380px”></canvas> <view class=’bottom’> <image src=”/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: 1060rpx 60rpx 0 60rpx;}button{ background: darkturquoise;} .bottom{ width:300px; height:40px; background-color:white;} .bottom image{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) { let that = this; var UserName = app.globalData.login_sj[0]; wx.setNavigationBarTitle({ title: ‘分享到朋友圈’, }) var time = util.formatTime(new Date()); var UserImage = app.globalData.login_sj[2]; var timestamp = Date.parse(new Date()); var date = new Date(timestamp); //获取年份 var Y = date.getFullYear(); //获取月份 var M = (date.getMonth() + 1 < 10 ? ‘0’ + (date.getMonth() + 1) : date.getMonth() + 1); //获取当日日期 var D = date.getDate() < 10 ? ‘0’ + date.getDate() : date.getDate(); var time1 = 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); // 创建画布 const ctx = 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) } else if (that.data.shareTitle.length <= 28) { // 两行 let firstLine = that.data.shareTitle.substring(0, 14); let secondLine = that.data.shareTitle.substring(14, 27); ctx.fillText(firstLine, 10, 200, 280) ctx.fillText(secondLine, 10, 224, 280) } else { // 超过两行 let firstLine = that.data.shareTitle.substring(0, 14); let secondLine = 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) => { let qrImgSize = 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() // 绘制头像图片 let headImgSize = 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) } }) } }) } }) } }) }
微信小程序实现分享到朋友圈
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现分享到朋友圈
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务