微信小程序之 实现转发/分享功能

点击右上角转发菜单实现转发/分享

1.点击右上角胶囊按钮的转发菜单


示例.png

2.点击’转发’


示例.png

3.最终效果如图所示:


效果图.png

4.wxml部分代码如下:

<text>hello world!</text>

5.js部分代码如下:

onShareAppMessage: function (res) {
    console.log(res.from)
    return {
      title: '标题标题标题',//自定义转发标题
      path:'/pages/home/home',//当前页面的路径 ,必须是以 / 开头的完整路径
      // imageUrl: ''//不设置此字段时,默认截取当前页面作为展示的图片
    }
}

点击页面内按钮实现转发/分享

1.点击页面中的分享按钮


示例.png

2.最终效果如图所示:


效果图.png

3.wxml部分代码如下所示:

<button open-type="share" type="primary">分享</button>

4.js部分代码如下所示:

data: {
    pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2846167449,2464562408&fm=26&gp=0.jpg' //网络图片路径
},
 /**
 1. 用户点击右上角分享
   */
onShareAppMessage: function (res) {
  var that = this;
  console.log('转发事件的来源',res.from)
  console.log(that.data)
  return { //自定义转发内容
    title: '这是一个页面', //自定义转发标题
    path: '/pages/user/user', //当前页面的路径 ,必须是以 / 开头的完整路径
    imageUrl: that.data.pic//不设置此字段时,默认截取当前页面作为展示的图片
  }
}

注意

1.onShareAppMessage处理函数需要 return 一个 Object,用于自定义转发内容
2.title为转发标题,不设置此字段时,默认标题为当前小程序名称
3.path为转发路径,当前页面的路径 ,必须是以 / 开头的完整路径
4.imageUrl为自定义图片路径(可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG),不设置此字段时,默认截取当前页面作为展示的图片

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容