导语：在小程序项目开发中，分享能力几乎是每个项目必备的要求，但原生的分享能力比较有限，不够灵活，今天就我们就一起来研究下，如何在现有基础上，增强小程序分享的能力，使信息传递更加直观、灵活。
示例项目地址: https://github.com/ycvcb123/share-system
小程序分享基础 API 介绍微信分享的 API 只提供了分享给微信好友的能力，并没有提供分享朋友圈的能力，这是为啥子呢！！！
从网上收集的一些咨询来看，主要有如下两点原因:
由于微商泛滥，公众号鸡汤泛滥，朋友圈质量已经有所下降，如果小程序再开放分享朋友圈功能，可能会进一步影响到整个微信生态，造成用户活跃度下降，用户流失等问题。
微信不让小程序在朋友圈转发，更多是保护朋友圈的”广告位”阵地，不能够让这块”肥肉”变成了公益设施。
其实一些童鞋应该留意到了在朋友圈，官方已经推了一些小程序的广告，只不过这项能力还没有完全放开，以后会不会放开先不讨论，智慧的开发小哥哥早已想到了通过生成带有小程序码的海报作为替代方案（撒花！！！），本文后面的部分也会说到，我们先回到正题。
用法：
Page({ onShareAppMessage: function(){ return { title: 'xxxxx', //自定义转发标题 path: '/page/user?id=123', //分享页面路径 imageUrl: '/common/images/xxx.png' //分享图片 宽高比 5:4 } } }) //如果只写成如下形式，title默认是小程序名，path为当前页面路径（不带参数），imageUrl为当前页面截图 Page({ onShareAppMessage: function(){} })
触发方法（一定要在 page 中先写入上述方法）:
点击小程序的胶囊菜单，会从底部弹出转发选项。
<button> 组件 open-type="share" 即 <button open-type="share"> ,点击后触发。
触发后效果如下：
观察上述结果，不难看出， title 能分享出去的信息非常有限，那我们能不能对分享的图片做些文章，让它带出更多的信息呢？下面进入到我们的第二个部分基于 canvas 动态绘制分享图片
基于 canvas 动态绘制分享图片因为每个页面的信息很多都是通过接口返回或者用户输入产生，是在不断变化的，设计师所画的静态图片肯定是不足以去展示这些信息的，那么我们就要想，有没有一种办法，是可以把 静态图片 和 动态信息 绘制在一起后在生成一张 新的图片 ?答案是肯定的！！！
把图片和文字画在一起？我们就一定会想到神奇的 canvas ，根据小程序 画布 相关的 API 绘制如下：
//创建画布（组件中一定要绑定this,切记！！！） var ctx = wx.createCanvasContext('myCanvas', this); //画布上绘制图片 ctx.drawImage(path, 0, 0, width, height); //画布上绘制文字 ctx.setFillStyle('#fff'); ctx.setFontSize(32); ctx.fillText(startTime, 24, 54); //其他信息绘制 //... ctx.draw();
上述已经通过 canvas 把图片和文字绘制到了一起，那如何把这个画布转成一个图片，供开发者使用呢？
强大的小程序给我们提供了原生的方法: wx.canvasToTempFilePath
//在上面代码的draw()的回调中使用wx.canvasToTempFilePath var that = this; ctx.draw(true, () => { setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { that.setData({ //res.tempFilePath 生成图片的临时路径 picUrl: res.tempFilePath }); } }, that); //在组件中使用这里一定记得要绑定this，切记！！！ }, 300); //此处加入300毫秒延时是为了解决小程序绘制过程中的渲染问题 });
把图片路径传递给 <image> 标签,得到下图结果。
<image src="https://www.jb51.net/{{picUrl}}"/>
同理：把 picUrl 赋值给 onShareAppMessage 中的 imageUrl ,分享出去后的图片则带有了动态信息！
对不同来源图片的处理（本地图片， 网络图片 ， base64图片 ）在上面的例子中，绘制本地图片时直接使用 ctx.drawImage(path, 0, 0, width, height) , path 直接传入图片路径即可。但是如果是 网络图片 或者是 base64 的图片时， drawImage 是无法直接绘制的 ，下面就介绍下针对上述两种情况如何做兼容处理。
网络来源图片