小程序分享模块超级详解小程序分享模块超级详解(推荐推荐)
导语:在小程序项目开发中,分享能力几乎是每个项目必备的要求,但原生的分享能力比较有限,不够灵活,今天就我们就一
起来研究下,如何在现有基础上,增强小程序分享的能力,使信息传递更加直观、灵活。
示例项目地址: https://github.com/ycvcb123/share-system
小程序分享基础小程序分享基础 API 介绍介绍
微信分享的 API 只提供了分享给微信好友的能力,并没有提供分享朋友圈的能力,这是为啥子呢!!!
从网上收集的一些咨询来看,主要有如下两点原因从网上收集的一些咨询来看,主要有如下两点原因:
由于微商泛滥,公众号鸡汤泛滥,朋友圈质量已经有所下降,如果小程序再开放分享朋友圈功能,可能会进一步影响到整个微
信生态,造成用户活跃度下降,用户流失等问题。
微信不让小程序在朋友圈转发,更多是保护朋友圈的”广告位”阵地,不能够让这块”肥肉”变成了公益设施。
其实一些童鞋应该留意到了在朋友圈,官方已经推了一些小程序的广告,只不过这项能力还没有完全放开,以后会不会放开先
不讨论,智慧的开发小哥哥早已想到了通过生成带有小程序码的海报作为替代方案(撒花!!!),本文后面的部分也会说
到,我们先回到正题。
onShareAppMessage — 转发
用法:
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 动态绘制分享图片动态绘制分享图片
因为每个页面的信息很多都是通过接口返回或者用户输入产生,是在不断变化的,设计师所画的静态图片肯定是不足以去展示
这些信息的,那么我们就要想,有没有一种办法,是可以把 静态图片 和 动态信息 绘制在一起后在生成一张 新的图片 ?答案是肯定
的!!!