微信小程序之分享功能
发布于 4 年前 作者 kxiao 1482 次浏览 来自 分享

今天分享一下在小程序开发中,关于分享功能的常见的3种实现方式:

1)入口

a.小程序右上角自带的分享功能:

如果在当前页面调用wx.hideShareMenu()方法,那么右上角的分享功能将被隐藏

调用wx.showShareMenu()方法,可以显示该功能。

下面是开发文档中的注意事项和示例代码:

注意事项

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

示例代码

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

b.自定义分享按钮,页面内发起转发:

通过给 button 组件设置属性 open-type=“share”,可以在用户点击按钮后触发 Page.onShareAppMessage 事件分享

c.生成带小程序码的海报

通过官方提供的接口可生成带参数的小程序码

https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

请求参数

以上3种方式均可实现分享功能

2)自定义转发分享内容:

a. 转发给好友/群

通过onShareAppMessage方法设置

官方文档对该方法的介绍:

示例代码:

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

如果开发人员在onShareAppMessage(options)不进行任何处理,那么微信将

会有一个默认的数据转发出去,title为当前小程序名称,path为当前页面的路径,

imageUrl为当前页面的截图。

b. 转发到朋友圈

通过onShareTimeline()方法设置

官方介绍文档:


对于分享到朋友圈,有些要注意的地方,比如现在只支持安卓系统

且分享到朋友圈的是单页模式,有以下限制:

  1. 页面无登录态,与登录相关的接口,如 wx.login 均不可用;云开发资源需开启未登录访问方可在单页模式下使用,详见未登录模式
  2. 不允许跳转到其它页面,包括任何跳小程序页面、跳其它小程序、跳微信原生页面
  3. 不允许横屏使用
  4. 若页面包含 tabBar,tabBar 不会渲染,包括自定义 tabBar
  5. 本地存储与小程序普通模式不共用

详情见官方参考文档

有更多关于实现微信小程序分享的骚操作欢迎留言分享交流



1 回复
回到顶部