小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能。
具体思路及简要代码如下:
一:canvas画图 drawCanvas:function(){ var that = this; var contentPic = '/images/pop_pic_default@2x.png' wx.downloadFile({ //当图片为网络图片时,需要先下载到本地,再进行操作, url: contentPic, //否则canvas会加载不到图片,本地的无需这步骤 success: function (res) { contentPic = res.tempFilePath } }) var ctx = wx.createCanvasContext('shareImg') ctx.fillStyle = '#fff' //这里两句是为了解决canvas生成图片时黑背景的问题 ctx.fillRect(0, 0, 562, 788) //填充白色背景 ctx.setFontSize(32) ctx.setFillStyle('#333') ctx.setTextAlign('left') ctx.setTextBaseline('middle') var str = '这是标题' this.changLine(true,str,ctx,40,60,36,482) var sourse = that.data.detail.source ctx.setFontSize(28) ctx.fillText(sourse, 40, this.data.titleY) var date = that.data.detail.publishDate var sourseX = ctx.measureText(sourse).width+56 ctx.setFontSize(24) ctx.setFillStyle('#999') ctx.fillText(date, sourseX, this.data.titleY) var content = that.data.detail.summary.replace(/(^s*)|(s*$)/g, "") ctx.setFontSize(28) ctx.setFillStyle('#666') this.changLine(false,content, ctx, 40, this.data.titleY + 60, 36, 482) var picY = this.data.titleY + 168 wx.getImageInfo({ src: contentPic, success: function (res) { var widthScale = 482 / res.width var heightScale = 250 / res.height var sx=0,sy=0 if (widthScale>heightScale){ sy= (res.height-250/(482 / res.width))/2 } else{ sx=(res.width-482/(250 / res.height))/2 } ctx.drawImage(contentPic, sx, sy, res.width - sx * 2, res.height - sy * 2, 40, picY, 482, 250 ) ctx.moveTo(40, picY + 274) ctx.setStrokeStyle('#dedede') ctx.lineTo(522, picY + 274) ctx.stroke() ctx.setFontSize(28) ctx.setFillStyle('#666') ctx.fillText('长按扫码阅读', 40, picY + 334) ctx.setFontSize(24) // ctx.setFillStyle('#666') ctx.fillText('全文约' + that.data.detail.wordCount + '字,约' + that.data.detail.readingTime + '分钟', 40, picY + 382) // var qrcode = '/images/pic_nanbaobao@2x.png' // ctx.drawImage(qrcode, 344, picY + 274, 178, 178) var logo = '/images/ic_xiaochnegxu@2x.png' ctx.drawImage(logo, 397, picY + 315, 72, 72) ctx.draw(false, function (e) { that.createPoster() } ) } }) }, //画图文字换行,内容、画布、初始x、初始y、行高、画布宽 changLine: function (isTitle,str, ctx, initX, initY, lineHeight, canvasWidth){ // 字符分隔为数组 var arrText = str.split(''); var line = ''; var lineCount=0; var isThreeLine=false; for (var n = 0; n < arrText.length; n++) { var testLine = line + arrText[n]; var testWidth = ctx.measureText(testLine).width; if (testWidth > canvasWidth) { if (lineCount==2) { isThreeLine=true var length = line.length-2; line = line.substring(0, length)+'...'; ctx.fillText(line, initX, initY); return false; } lineCount++; ctx.fillText(line, initX, initY); line = arrText[n]; initY += lineHeight; } else { line = testLine; } } if (!isThreeLine){ ctx.fillText(line, initX, initY); } //记录标题的高度 if (isTitle){ this.setData({ titleY: initY + lineHeight + 8 }) } },
//生成海报 createPoster:function(){ var that = this wx.canvasToTempFilePath({ x: 0, y: 0, 562, height: 788, destWidth: 1124, destHeight: 1576, canvasId: 'shareImg', fileType: 'jpg', success: function (res) { that.setData({ prurl: res.tempFilePath }) wx.hideLoading() } }) },
大概就这样,若发现问题,请评论指正~