第二章 小程序分享功能

前言

项目需求：

1、小程序实现全局分享功能，分享至聊天或者朋友圈。

2、小程序拉新活动，邀请新人有奖。

---

一、小程序全局分享

全局app.js 顶部

这里默认分享当前页面 分享配置决定你的分享效果

getCurrentPageUrl 这个方法时为了获取当前页面的页面路径+参数，动态设置分享页面

!(function () {
  var PageOld = Page
  Page = function (options) {
    options = Object.assign(
      {
        getIdCustomer() {
          return getApp().globalData.idCustomer
        },
        //分享到群聊
        onShareAppMessage() {
          {
           // 这里就是分享的配置  可以根据需要自行配置
            return {
              title: '分享的标题',
              path: `/${getCurrentPageUrl()}`,
            }
          }
        },
        // 分享到朋友圈
        onShareTimeline() {
          return {
            title: '分享的标题',
            query: `${getCurrentPageUrl().split('?')[1]}`,
          }
        },
      },
      options
    )
    PageOld(options)
  }
})()
// 获取当前页面url
function getCurrentPageUrl() {
  const pages = getCurrentPages()
  // console.log(pages)
  const { route, options } = pages[pages.length - 1]
  if (pages.length > 0 && Object.keys(options).length !== 0) {
    return `${route}?${Object.keys(options)
      .map(key => `${encodeURIComponent(key)}=${decodeURIComponent(options[key])}`)
      .join('&')}`
    // &sharePhone=${wx.getStorageSync('isLogin')}
  } else if (pages.length > 0) {
    return route
  }
  return ""
}

二、按钮分享-拉新奖励活动

目前所有的分享功能不支持获取结果，因为存在诱导行为。但是项目需求必须获取到分享成功的信息。

A分享给B，分享链接里面携带A的信息，只能通过B点击分享链接，将A与B建立链接。

1.按钮分享功能

按钮开启分享模式

<button open-type="share" >邀请微信好友</button>

页面分享这里判断分享的来源是单独的分享按钮，这里分享有礼品，所以需要携带分享人的信息，被分享者根据链接进入可以拿到信息，后端根据两者的信息建立关系表

按钮分享时需要在该页面单独配置分享的信息

// 用户点击右上角分享
onShareAppMessage(ops) {
  if (ops.from == 'button') { // 按钮分享
    return {
      title: '分享好友得礼品',
      path: `${page}?shareUser=${'分享人信息'}` 
      // page 是你自己的页面 shareUser是分享人的信息（可以自行替换）
    }
  } else { // 右上角分享
    return {
      title: '分享标题',
      path: `${page}`
    }
  }
}

2.获取分享结果

在app.js文件里面可以拿到分享的信息，判断进入小程序的方法并获取分享链接的方法

在这里获取并保存分享人的信息，后续在被分享人进入到要求页面进行点击操作的时将数据传给后端即可

// 分享的信息
onShow(options) {
  if (options.scene == 1007 || options.scene == 1008) {
    // 1007 通过单人聊天会话分享进入   1008 通过群聊会话分享进入
    if (options.query.shareUser) {
      wx.setStorageSync('shareUser', options.query.shareUser);
    }
  }
},

---

总结

参考文档：

小程序全局配置分享好友/朋友圈，可带参数

小程序分享自定义（页面右上角自带分享 + button按钮定义分享）

uni-app 微信小程序onShareAppMessage设置全局分享 （这个适用uniapp的，我的是微信原生的）

以上是根据项目需求实现的小程序分享功能。