微信小程序开发笔记(一):转发或分享朋友圈

2,644 阅读2分钟

转发或分享到微信朋友圈官方有提供文档,配置十分简单,以下分几个场景讲解下具体实现。

分享到朋友圈目前只有安卓手机支持

不需要自定义配置,直接转发或分享当前页内容

使用 wx.showShareMenu 配置当前页可以被转发和分享朋友圈,注意是当前页,也就是说只要在需要转发或分享朋友圈中的 Page 下调用一下方法就可以实现转发或分享朋友圈功能,一般都在 page 的 onLoad 中调用:

wx.showShareMenu({
	withShareTicket: true,
	menus: ['shareAppMessage', 'shareTimeline'],
})

当然,也可以禁用转发或分享朋友圈功能

wx.hideShareMenu({
	menus: ['shareAppMessage', 'shareTimeline'],
})

"shareAppMessage"表示“发送给朋友”按钮,"shareTimeline"表示“分享到朋友圈”按钮

显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮,显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮

需要自定义转发或分享的标题和图片

一般来说只要调用了 showShareMenu 方法,当前页就可以被分享或转发了, 但是如果需要自定义标题和封面时可以设置 Page 中的 onShareAppMessageonShareTimeline

Page({
  onShareAppMessage() {
    return {
      title: '自定义转发标题',
      path: '/pages/index/index',
    }
  },
  onShareTimeline: function () {
    return {
      title: '自定义转发标题',
    }
  },
})

// 转发前也支持做一些异步操作
Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    return {
      title: '自定义转发标题',
      path: '/pages/index/index',
      promise
    }
  }
})

在app.ts中一次性设置所有页面的转发或分享路径

前面的方法需要在每个页面中进行配置,如果不需要自定义每个页面的转发或分享的标题,也可以在 app.ts 中统一处理,具体代码如下

// app.ts
function injectShareForPage() {
  const _Page = Page
  Page = function (pageConfig) {
    // 设置全局默认分享
    pageConfig = Object.assign(
      {
        onShareAppMessage: function () {
          return {
            title: 'ideaPod',
            path: 'pages/index/index',
          }
        },
        onShareTimeline: function () {
          return {
            title: 'ideaPod',
          }
        },
      },
      pageConfig
    )

    _Page(pageConfig)
  }
}
injectShareForPage()

App({...})