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

2018-06-24 02:09:27来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

备注:
  测试手机(苹果5,华为)
  本文章只提供一种思路,具体排版还请以实际项目为主

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue init深度定制团队自己的Vue template

下一篇:Angular.js-2入门