如何把微信小程序分享给别人（微信小程序怎样转发到朋友圈）

来源 |
   https://www.cnblogs.com/MohunBlogs/archive/2018/05/23/9079942.html

小程序提供onShareAppMessage 函数，此函数只支持分享给我微信朋友。小程序如何分享到朋友圈呢？我提供的方法是，使用canvas绘制一张图片，并用wx.previewImage预览图片，然后长按图片保存图片到手机。

再通过发朋友圈的方式，选择保存的图片，当用户浏览朋友圈时，可以长按图片、识别图中二维码进入小程序。

效果展示：

准备工作和小程序配置（步骤一和步骤二）

配置小程序下载域名(不效验合法域名，可忽略此选项)，准备一张带有小程序二维码的图片、一张背景图、内容缩略图

Page({data: {bgImg: \"http://image.lqmohun.com/canvasbg.jpg\",//背景图dataImg: \"http://image.lqmohun.com/ceshi.jpg\", //内容缩略图ewrImg: \"http://image.lqmohun.com/erweima.jpg\",//小程序二维码图片systemInfo: null,//系统类型canvasWidth:0, //canvas的宽canvasHeight: 0 //canvas的高},

步骤三：下载需要的图片资源到本地

downloadImages: function () {let that = this;wx.downloadFile({//背景图url: that.data.bgImg,success: function (res) {wx.downloadFile({//内容缩略图url: that.data.dataImg,success: function (res1) {wx.downloadFile({url: that.data.ewrImg,success: function (res2) {//小程序二维码图that.convas(res.tempFilePath, res1.tempFilePath, res2.tempFilePath);},fail: function () {}});}});}})},

步骤四：将需要分享的信息绘制成图片

convas: function (bgImg, dataImg, ewrImg) {let that = this;var ctx = wx.createCanvasContext(\'myCanvas\');var scWidth = that.data.systemInfo.windowWidth;var scHeight = that.data.systemInfo.screenHeight;var defaultHeight = 0.020 * that.data.systemInfo.screenHeight;//第一步：刻画背景图ctx.drawImage(bgImg, 0, 0, scWidth, scHeight);//第二步：刻画背景色ctx.setFillStyle(\'white\');ctx.fillRect(20, 30, scWidth-40, scHeight-60);//第三步：刻画内容缩略图var imgHeight = parseInt(this.imageProportion());ctx.drawImage(dataImg, 20, 30, scWidth - 40, imgHeight);//第三步：刻画标题ctx.setFontSize(0.056 * scWidth);ctx.setFillStyle(\'#333333\');ctx.setTextAlign(\'center\');ctx.fillText(\"食物美容，远离肌肤衰老\", (scWidth) / 2, imgHeight 63 defaultHeight );//第四步：刻画内容;(备注：canvas好像没有自动换行，有需要此步骤的同学，可根据canvas宽度，设置文字个数)ctx.setFontSize(0.044 * scWidth)ctx.setFillStyle(\'#333333\');ctx.setTextAlign(\'left\');ctx.fillText(\"简介：岁月如刀，刀刀催人老，到我们25\", 35, imgHeight 100 defaultHeight);ctx.fillText(\"岁的时候，皮肤就开始进入衰老期，皱纹\", 35, imgHeight 125 defaultHeight); ctx.fillText(\"、色斑。皮肤松弛等现象逐渐出现，这时\", 35, imgHeight 150 defaultHeight);ctx.fillText(\"，抗衰老工程也正式展开。\", 35, imgHeight 175 defaultHeight);//第五步：刻画小程序码ctx.drawImage(ewrImg, 35, imgHeight 200 defaultHeight, 120, 120);//第六步：提示用户，长按图片下载或分享ctx.setFontSize(0.050 * scWidth)ctx.setFillStyle(\'#333333\')ctx.fillText(\'长按码查看详情\', 165, imgHeight 250 defaultHeight);ctx.fillText(\'小程序名字\', 165, imgHeight 280 defaultHeight);//第七步将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中ctx.draw(false, function (e) {//第八步：生成图片并预览that.imageGeneratePreview();});}

小程序canvas做测试时，文字好像不能自动换行。提供一种比较笨的方法，根据屏幕宽度判断文字个数，循环绘制文字就行了；

this.imageProportion()的方法获取缩略图等比例缩小之后的宽高。defaultHeight不同宽高屏幕，绘制内容上下间距优化。

步骤五：将canvas画布导出成指定大小图片、并预览

imageGeneratePreview: function () {let that=this;//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径wx.canvasToTempFilePath({width: this.data.systemInfo.windowWidth,height: this.data.systemInfo.screenHeight,destWidth: this.data.systemInfo.windowWidth * 3,destHeight: this.data.systemInfo.screenHeight * 3,canvasId: \'myCanvas\',success: function (res) {//预览图片wx.previewImage({urls: res.tempFilePath.split(\',\'), // 需要预览的图片http链接列表fail: function (res) {console.log(\"预览图片失败\" res)}})},fail: function (res) {console.log(\"出错了:\" jsON.stringify(res));},complete:function(){wx.hideLoading();}})},

备注：

测试手机（苹果5，华为）

本文章只提供一种思路，具体排版还请以实际项目为主。

我是@半糖学前端 ，专注前端技术领域分享，关注我和我一起学习，共同进步！