美文网首页
微信小程序「分享到朋友圈」功能怎么写?微信朋友圈分享怎么实现?

微信小程序「分享到朋友圈」功能怎么写?微信朋友圈分享怎么实现?

作者: LauEl | 来源:发表于2020-08-07 11:27 被阅读0次

    微信最近开放了微信小程序分享到朋友圈的接口。
    目前此功能没有完全放开,需微信安卓7.0.16版本才支持,灰度测试 ,iOS版本暂不支持。

    想让小程序提供“分享到朋友圈”的功能,小程序端需要通过调用wx.showShareMenu 这个api,支持此功能,具体的操作步骤如下:

    1.设置“调试基础库”的版本

    wx.showShareMenu api支持分享朋友圈的功能参数“menus”需要基础库2.11版本以上,因此首先在微信小程序开发工具里设置基础库为2.11版本以上

    image

    设置完成后,在点击小程序右上角的三个点,会出现“分享到朋友圈”的按钮,不过是灰色的,无法触发。

    不得不说朋友圈的入口才是最大的流量池。

    image.png

    具体代码实现功能(供参考)
    首先最简单的就是使用小程序的生命函数

     onLoad() {
       //直接写入这里监听
    wx.showShareMenu({
          withShareTicket: true,
          menus: ['shareAppMessage', 'shareTimeline']
        })
      },
    

    这样写的话会默认分享的时候是小程序的logo和小程序的主页。

    那我们也可以这样监听

     /**
       * 分享当前页面
       */
      onShareAppMessage: function() {
        wx.showShareMenu({
          withShareTicket: true,
          menus: ['shareAppMessage', 'shareTimeline']
        })
      },
      //用户点击右上角分享朋友圈
      onShareTimeline: function () {
          let _this = this;
          // 构建页面参数
          let params = App.getShareUrlParams({
            'goods_id': _this.data.goods_id
          });
        return {
    //titile就是分享名称  query为分享进入链接,imageurl就是图片相对获取就可以
          title: _this.data.detail.goods_name,
          query: {
            key: "/pages/goods/index" +  _this.data.detail.goods_id
          },
          imageUrl: _this.data.detail.goods_image,
        }
      },
    

    效果:

    image.png
    image.png
    image.png

    相关文章

      网友评论

          本文标题:微信小程序「分享到朋友圈」功能怎么写?微信朋友圈分享怎么实现?

          本文链接:https://www.haomeiwen.com/subject/ybwdrktx.html