小程序分享模块超级详解(推荐) - 行业资讯 - 肥雀云

导语:在小程序项目开发中,分享能力几乎是每个项目必备的要求,但原生的分享能力比较有限,不够灵活,今天就我们就一起来研究下,如何在现有基础上,增强小程序分享的能力,使信息传递更加直观、灵活。

示例项目地址:https://github.com/ycvcb123/share-system

微信分享的API只提供了分享给微信好友的能力,并没有提供分享朋友圈的能力,这是为啥子呢! ! !

<强>从网上收集的一些咨询来看,主要有如下两点原因:

　　<李>由于微商泛滥,公众号鸡汤泛滥,朋友圈质量已经有所下降,如果小程序再开放分享朋友圈功能,可能会进一步影响到整个微信生态,造成用户活跃度下降,用户流失等问题。　　<李>微信不让小程序在朋友圈转发,更多是保护朋友圈的“广告位“阵地,不能够让这块“肥”肉变成了公益设施。　　　　

其实一些童鞋应该留意到了在朋友圈,官方已经推了一些小程序的广告,只不过这项能力还没有完全放的开,以后会不会放开先不讨论,智慧的开发小哥哥早已想到了通过生成带有小程序码的海报作为替代方案(撒花! ! !),本文后面的部分也会说到,我们先回到正题。

onShareAppMessage——转发

用法: 　　　　　　页面({ 　　即<代码> & lt;按钮开口=肮蚕怼弊４? 　　　　

触发后效果如下:

观察上述结果,不难看出,<代码> 标题能分享出去的信息非常有限,那我们能不能对分享的图片做些文章,让它带出更多的信息呢?下面进入到我们的第二个部分基于画布动态绘制分享图片

因为每个页面的信息很多都是通过接口返回或者用户输入产生,是在不断变化的,设计师所画的静态图片肯定是不足以去展示这些信息的,那么我们就要想,有没有一种办法,是可以把<代码>静态图片和<代码>动态信息绘制在一起后在生成一张<代码>新的图片 & # 63;答案是肯定的! ! !

把图片和文字画在一起?我们就一定会想到神奇的画布<代码> 画布> 绘制如下:

　　　　//创建画布(组件中一定要绑定,切记! ! !) 　　var ctx=天气。createCanvasContext (“myCanvas”,这个);//画布上绘制图片　　ctx。drawImage(路径,0,0,宽度、高度);//画布上绘制文字　　ctx.setFillStyle (“# fff”); 　　ctx.setFontSize (32); 　　ctx。fillText(开始时间,24岁,54);//其他信息绘制//? 　　 ctx.draw (); 　　　　

上述已经通过画布<代码> 把图片和文字绘制到了一起,那如何把这个画布转成一个图片,供开发者使用呢?

强大的小程序给我们提供了原生的方法:wx.canvasToTempFilePath

　　　　//在上面代码的画()的回调中使用wx.canvasToTempFilePath 　　var=这个; 　　ctx。画(真的,()=比;{ 　　setTimeout(()=比;{ 　　wx.canvasToTempFilePath ({ 　　canvasId:“myCanvas”, 　　成功:(res)=比;{ 　　that.setData ({//res。tempFilePath生成图片的临时路径　　picUrl: res.tempFilePath 　　}); 　　　　　　} 　　});//在组件中使用这里一定记得要绑定,切记! ! ! 　　},300);//此处加入300毫秒延时是为了解决小程序绘制过程中的渲染问题　　}); 　　　　

把图片路径传递给<代码> & lt; image> 　　　　　　& lt;图像src=" https://www.yisu.com/zixun/{{picUrl}} "/祝辞　　　　

小程序分享模块超级详解(推荐)

同理:把<代码> picUrl> onShareAppMessage> imageUrl> 　　

在上面的例子中,绘制本地图片时直接使用<代码> ctx。drawImage(路径,0,0,宽度、高度),<代码>路径> 网络图片> base64> drawImage> 　　

网络来源图片

　　　　//将网络图片转换为本地路径　　handleNetImg:函数(imagePath) { 　　var=这个; 　　返回新的承诺((解决,拒绝)=比;{ 　　wx.getImageInfo ({ 　　src: imagePath, 　　成功:函数(res) { 　　解决(res); 　　} 　　}); 　　}); 　　} 　　　　handleNetImg(“网络图片地址”),然后((res)=比;{ 　　console.log (res.path);//输出转换后的本地图片路径　　ctx.drawImage (res。路径,0,0,宽度、高度);//此时图片即可在画布上绘制出来　　})