小程序分享功能

一、分享给好友

1. 转发给好友/群：
   在小程序开发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的定义，开发人员可以上传自定义图片，那么这个口子给了运营人员一定的发挥空间。

二、分享到朋友圈（待续）