微信小程序开发:分享功能开发备忘

微信小程序中一个必备功能就是分享,以下是分享功能的开发总结,记录备查。

点击一个按钮实现分享功能:

<button open-type="share">test</button>

这样就创建了一个默认样式的按钮,但通常真正的产品需求会是一个图片实现的个性化按钮,比如个图标什么的。

以下代码可以用图片背景来作为按钮的外观。

<button open-type="share" style="background-image:url(https://...../images/1.png);border:0rpx;width:50rpx;height:50rpx;background-size:50rpx 50rpx;background-repeat:no-repeat;position:absolute;bottom:25rpx;right:100rpx;padding:0rpx;" plain='true'></button>

点击按钮之后就会调起分享功能,一共有三个元素可以自定义:

1 分享标题

2 分享图片

3 分享路径

通过onShareAppMessage事件可以通过返回一个数组来自定义这三个元素,以下是最简单的一个例子:

onShareAppMessage: function (e) {
    return {
      title: "哈哈哈哈哈哈哈",
      path: "/pages/index/index?id=" + this.data.id,
      imageUrl:null
    };
  }

如果一个页面有多个分享按钮还要传递不同的参数,比如一个循环列表想给每个循环体加不同的分享按钮,可以这样做:

<button id="1" open-type="share">test</button>
<button id="2" open-type="share">test</button>
<button id="3" open-type="share">test</button>
onShareAppMessage: function (e) {
    console.log(e.target.id);
    //这里可以获得发起分享按钮的id
}

此外还有一种生成二维码图片的分享方式。

扫码关注我的公众号