为了满足不同人的体验需求,本文主要分析三种常用分享效果的实现原理: 1、分享API自带的分享效果; 2、自定义数据和自定义固定图片的分享效果; 3、根据不同数据分享不同图片的分享效果。
工具/原料
Sublime Text
微信开发者工具
分享API自带的分享效果
1、 这种实现最简单,只需要在wxml添加<button open-type="share"></button>,点击该按钮的时候就能自动弹出分享窗口,选择微信好友进行分享。 Tips:主要缺点就是分享效果只有一张当前页面截图,效果不好。
自定义数据和自定义固定图片的分享效果
1、 wxml添加<button open-type="share" bindtap="onShareAppMessage"></button>,相对于第一种增加点击事件onShareAppMessage。 Tips:由于增加了点击事件,会导致点击按钮就相当于触发两次分享,只会影响统计记录。
2、 js添加下图代码,分析如下: 1、title可自定义分享的标题,可固定数据也可以根据接口返回剞麽苍足数据定义不同的标题或者组合数据; 2、desc可自定义顶部宣传文字; 3、path可自定义点击分享进入小程序会跳到那个页面,适合于多个不同地方分享出去,而希望用户点击跳转到同一个页面;可进行参数的传递; 4、imageUrl可自定义分享的图片,缺点就是每个分享都是同一张图片。 Tips:常见的分享效果,imageUrl都不会设置,而使用默认当前页面的截图,其它三个属性可根据实际情况进行使用。
根据不同数据分享不同图片的分享效果
1、 由于分享的默认截图数据显示不全且不能灵活组合,而固定自定义图片又不够灵活,会导致图片跟有些商品不匹配;所以产生了要分析的这种效果,就是分享之前先调用接口获取该商品的合成图(可根据传参和设计好的图片进行混合,从而实现灵活炫丽的效果);前端只需要把获取的合成图地址设置给imageUrl。 Tips:由于调用接口是异步,所以调用接口不能跟分享同时进行,不然会导致分享空白图片。