微信小程序分享到朋友圈方法与技巧

小程序提供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

  

推荐一个免费Api网站：https://www.lqmohun.com