小程序提供onShareAppMessage 函数，此函数只支持分享给我微信朋友。小程序如何分享到朋友圈呢？
我提供的方法是，使用canvas绘制一张图片，并用wx.previewImage预览图片，然后长按图片保存图片到手机。再通过发朋友圈的方式，选择保存的图片，当用户浏览朋友圈时，可以长按图片、识别图中二维码进入小程序。
效果展示
准备工作和小程序配置（步骤一和步骤二）
配置小程序下载域名(不效验合法域名，可忽略此选项)
准备一张带有小程序二维码的图片、一张背景图、内容缩略图
1 Page({ 2 data: { 3 bgImg: "http://image.lqmohun.com/canvasbg.jpg", //背景图 4 dataImg: "http://image.lqmohun.com/ceshi.jpg", //内容缩略图 5 ewrImg: "http://image.lqmohun.com/erweima.jpg", //小程序二维码图片 6 systemInfo: null, //系统类型 7 canvasWidth:0, //canvas的宽 8 canvasHeight: 0 //canvas的高 9 },
步骤三：下载需要的图片资源到本地
1 downloadImages: function () { 2 3 let that = this; 4 wx.downloadFile({ //背景图 5 url: that.data.bgImg, 6 success: function (res) { 7 wx.downloadFile({ //内容缩略图 8 url: that.data.dataImg, 9 success: function (res1) { 10 wx.downloadFile({ 11 url: that.data.ewrImg, 12 success: function (res2) {// 小程序二维码图 13 that.convas(res.tempFilePath, res1.tempFilePath, res2.tempFilePath); 14 }, 15 fail: function () { 16 } 17 }); 18 } 19 }); 20 } 21 }) 22 },
步骤四：将需要分享的信息绘制成图片
1 convas: function (bgImg, dataImg, ewrImg) { 2 let that = this; 3 var ctx = wx.createCanvasContext(\'myCanvas\'); 4 var scWidth = that.data.systemInfo.windowWidth; 5 var scHeight = that.data.systemInfo.screenHeight; 6 var defaultHeight = 0.020 * that.data.systemInfo.screenHeight; 7 //第一步：刻画背景图 8 ctx.drawImage(bgImg, 0, 0, scWidth, scHeight); 9 //第二步：刻画背景色 10 ctx.setFillStyle(\'white\'); 11 ctx.fillRect(20, 30, scWidth-40, scHeight-60); 12 //第三步：刻画内容缩略图 13 var imgHeight = parseInt(this.imageProportion()); 14 ctx.drawImage(dataImg, 20, 30, scWidth - 40, imgHeight); 15 //第三步：刻画标题 16 ctx.setFontSize(0.056 * scWidth); 17 ctx.setFillStyle(\'#333333\'); 18 ctx.setTextAlign(\'center\'); 19 ctx.fillText("食物美容，远离肌肤衰老", (scWidth) / 2, imgHeight + 63 + defaultHeight ); 20 //第四步：刻画内容;(备注：canvas好像没有自动换行，有需要此步骤的同学，可根据canvas宽度，设置文字个数) 21 ctx.setFontSize(0.044 * scWidth) 22 ctx.setFillStyle(\'#333333\'); 23 ctx.setTextAlign(\'left\'); 24 ctx.fillText("简介：岁月如刀，刀刀催人老，到我们25", 35, imgHeight + 100 + defaultHeight); 25 ctx.fillText("岁的时候，皮肤就开始进入衰老期，皱纹", 35, imgHeight + 125 + defaultHeight); 26 ctx.fillText("、色斑。皮肤松弛等现象逐渐出现，这时", 35, imgHeight + 150 + defaultHeight); 27 ctx.fillText("，抗衰老工程也正式展开。", 35, imgHeight + 175 + defaultHeight); 28 // 第五步：刻画小程序码 29 ctx.drawImage(ewrImg, 35, imgHeight + 200 + defaultHeight, 120, 120); 30 //第六步：提示用户，长按图片下载或分享 31 ctx.setFontSize(0.050 * scWidth) 32 ctx.setFillStyle(\'#333333\') 33 ctx.fillText(\'长按码查看详情\', 165, imgHeight + 250 + defaultHeight); 34 ctx.fillText(\'小程序名字\', 165, imgHeight + 280 + defaultHeight); 35 //第七步将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中 36 37 ctx.draw(false, function (e) { 38 //第八步：生成图片并预览 39 that.imageGeneratePreview(); 40 }); 41 }
小程序canvas做测试时，文字好像不能自动换行。提供一种比较笨的方法，根据屏幕宽度判断文字个数，循环绘制文字就行了；
this.imageProportion()的方法获取缩略图等比例缩小之后的宽高
defaultHeight不同宽高屏幕，绘制内容上下间距优化
步骤五：将canvas画布导出成指定大小图片、并预览
1 imageGeneratePreview: function () { 2 let that=this; 3 //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径 4 wx.canvasToTempFilePath({ 5 width: this.data.systemInfo.windowWidth, 6 height: this.data.systemInfo.screenHeight, 7 destWidth: this.data.systemInfo.windowWidth * 3, 8 destHeight: this.data.systemInfo.screenHeight * 3, 9 canvasId: \'myCanvas\', 10 success: function (res) { 11 //预览图片 12 wx.previewImage({ 13 urls: res.tempFilePath.split(\',\'), // 需要预览的图片http链接列表 14 fail: function (res) { 15 console.log("预览图片失败" + res) 16 } 17 }) 18 }, 19 fail: function (res) { 20 console.log("出错了:"+JSON.stringify(res)); 21 },complete:function(){ 22 wx.hideLoading(); 23 } 24 }) 25 },
备注：
本文章只提供一种思路，具体排版还请以实际项目为主。
互相交流学习QQ群：726466109
请发表评论