微信小程序分享、转发朋友、分享朋友圈使用整理-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序分享、转发朋友、分享朋友圈使用整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、微信小程序分享监听 Page.onShareAppMesssage()

onShareAppMessage(Object object)

监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

参数 Object object:

参数	类型	说明	最低版本
from	String	转发事件来源。 `button`：页面内转发按钮； `menu`：右上角转发菜单	1.2.4
target	Object	如果 `from` 值是 `button`，则 `target` 是触发这次转发事件的 `button`，否则为 `undefined`	1.2.4
webViewUrl	String	页面中包含web-view组件时，返回当前web-view的url	1.6.4

此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容如下：

自定义转发内容 基础库 2.8.1 起，分享图支持云图片。

字段	说明	默认值	最低版本
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。	使用默认截图	1.5.0
promise	如果该参数存在，则以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数

使用案例1：

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    var config = this.data.config;
    var url = ''
    if (account.isLogin()) {
      var user = account.getUserInfo()
      url = 'pages/index/index?userid=' + user.id
    } else {
      url = 'pages/index/index'
    }
    return {
      title: config.shareTitle,
      imageUrl: (config.shareImg ? this.data.domain + config.shareImg : ''),
      path: url
    };
  },

使用案例2：

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      promise 
    }
  }
})

二、微信小程序分享朋友圈监听 Page.onShareTimeline()

onShareTimeline()

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮

自定义转发内容

事件处理函数返回一个 Object，用于自定义分享内容，不支持自定义页面路径，返回内容如下：

字段	说明	默认值
title	自定义标题，即朋友圈列表页上显示的标题	当前小程序名称
query	自定义页面路径中携带的参数，如 path?a=1&b=2 的 “?” 后面部分	当前页面路径携带的参数
imageUrl	自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1。

完整使用案例：

 /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    var config = this.data.config;
    var url = ''
    if (account.isLogin()) {
      var user = account.getUserInfo()
      url = 'pages/index/index?userid=' + user.id
    } else {
      url = 'pages/index/index'
    }
    return {
      title: config.shareTitle,
      imageUrl: (config.shareImg ? this.data.domain + config.shareImg : ''),
      path: url
    };
  },
  onShareTimeline: function () {
    //处理分享朋友圈
    var data = this.onShareAppMessage();
    if (data.path) {
      data.query = data.path.substring(data.path.lastIndexOf('?') + 1);
    }
    return data;
  }

微信小程序如何隐藏右上角分享按钮

微信小程序如何转发给朋友？

微信小程序去除默认滚动条展示文章来源地址https://www.toymoban.com/news/detail-767142.html

到了这里，关于微信小程序分享、转发朋友、分享朋友圈使用整理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！