一、分享给好友
- 转发给好友/群:
在小程序开发API中,发送给好友/群,可以有两种实现方式:
1)入口
a.小程序右上角自带的分享功能(…);
如果在当前页面调用wx.hideShareMenu()方法,那么右上角的分享功能将被隐藏,当然,隐藏方法与现实方法是承兑出现的,调用wx.showShareMenu()方法,可以显示该功能。
b.自定义分享按钮:
<button open-type='share'>分享</button>
c.不影响样式使用button:
在小程序中使用button,button有他固有的样式,很难消去,严重影响美观。同时button内部也不好添加新的控件,那么如何在不影响样式的情况下实现分享功能。
wxml代码:
<view class='share_friend'>
<button class='share_friend_button' open-type='share'></button>
<image class='type_icon' src="/image/share/friend.png"></image>
<view class='type_text'>分享给好友</view>
</view>
wxss代码:
.share_friend {
width: 278rpx;
height: 64rpx;
margin: 26rpx 0 0 44rpx;
border-radius: 32rpx;
border: 2rpx solid rgba(254, 107, 1, 1);
display: flex;
flex-direction: row;
}
.share_friend_button {
width: 278rpx;
height: 64rpx;
opacity: 0;
position: absolute;
z-index: 4;
}
.type_icon {
width: 42rpx;
height: 42rpx;
margin: 10rpx 0 12rpx 40rpx;
}
.type_text {
height: 40rpx;
margin: 12rpx 0 12rpx 12rpx;
color: rgba(254, 107, 1, 1);
font: normal 28rpx/40rpx PingFangSC-regular;
}
显示效果:
关键代码
放一个button去填充要触发分享控件,放在目标控件的第一个子控件位置,宽度、高度和目标控件相同显示用absolute或者fixed,z-index比目标控件高(以防挤原来的布局样式,并且可以触发button的点击事件),opacity设置为0;这样button不会影响原来的布局,并且可以点击。
2)分享数据类型
不管采用以上何种方法,转发给好友的数据总归有它的数据模型,该数据模型是通过onShareAppMessage(options)返回的,也就是return一个object即可。其中,options.from可以用来判断是从自定义button打开的转发页面,还是从右上角的打开的转发页面。
如上所示,如果开发人员在onShareAppMessage(options)不进行任何处理,那么微信将会有一个默认的数据转发出去,title为当前小程序名称,path为当前页面的路径,imageUrl为当前页面的截图。根据imageUrl的定义,开发人员可以上传自定义图片,那么这个口子给了运营人员一定的发挥空间。