微信小程序转发功能之转发好友的实现

2020-09-27 作者：秩名

微信小程序的转发功能，包括转发给好友或者群组，还有一种是分享到朋友圈，分享到朋友圈主要是两种方法，一种是后台直接生成海报图，一种是前端通过canvas生成海报。以后有机会再详细说，好了，言归正传继续说我们的转发好友。

微信小程序转发功能之转发好友的实现

首先介绍一个微信小程序的API：onShareAppMessage(options)

在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。

只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object，用于自定义转发内容

还有一个值那就是shareTickets他是转发成功返回的，并且是个数组，每一项是一个 shareTicket ，对应一个转发对象

API先说到这，接下来就是转发的实现：

首先要在onLoad中配置wx.showShareMenu

  onLoad: function (e) {
    wx.showShareMenu({
      // 要求小程序返回分享目标信息
      withShareTicket: true
    }); 
  },

然后再配置onShareAppMessage

/* 转发*/
  onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }
    return {
      title: '转发dom',
      path: `pages/index/index`,
      success: function (res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false;
        // }
        // //可以获取群组信息
        // wx.getShareInfo({
        //   shareTicket: shareTickets[0],
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  },

我解释一下wx.getShareInfo这个可以获取到获取转发详细信息

完整js代码就是

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
  },
  onLoad: function (e) {
    wx.showShareMenu({
      // 要求小程序返回分享目标信息
      withShareTicket: true
    }); 
  },
  /* 转发*/
  onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }
    return {
      title: '转发dom',
      path: `pages/index/index`,
      success: function (res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false;
        // }
        // //可以获取群组信息
        // wx.getShareInfo({
        //   shareTicket: shareTickets[0],
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  },
})

聪明的同学就该知道接下来该是wxml代码

<view class="container">
  <view class="userinfo">
   <button open-type="share">分享好友</button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

友情提示一下如果点击按钮分享的话，button一定要设置open-type="share"否则不起作用。

线上+线下+进销存+收银+会员门店零售管理好帮手

极速收银管理
门店能实现快速收银，提升门店经营效率。
进销存管理
系统自带进销存管理，更好管理库存销售。
软硬件一体化
配备收银硬件一站式整体服务。

收银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

【本站声明】

1、本网站发布的该篇文章，目的在于分享电商知识及传递、交流相关电商信息，以便您学习或了解电商知识，请您不要用于其他用途；
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站，更非本网站提供，与本网站无关，系他人的商品或服务，本网站对于该类商标、标识不拥有任何权利；
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保；
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。