评论

微信小程序之分享功能

微信小程序开发之分享功能


今天分享一下在小程序开发中,关于分享功能的常见的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. 本地存储与小程序普通模式不共用

详情见官方参考文档

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



最后一次编辑于  2020-12-17  
点赞 17
收藏
评论

11 个评论

  • 小肥羊🍊
    小肥羊🍊
    发表于小程序端
    2020-12-17
    棒棒哒
    2020-12-17
    赞同 1
    回复 2
    • 钦
      2020-12-18
      嘿嘿嘿
      2020-12-18
      回复
    • 启
      2022-08-26
      不错
      2022-08-26
      回复
  • 夏洛
    夏洛
    2021-07-30

    针不戳

    2021-07-30
    赞同 1
    回复
  • Wait
    Wait
    2021-02-01

    针不戳,解决了我的问题

    2021-02-01
    赞同 1
    回复
  • 彭 S
    彭 S
    10-28

    我有一个问题想请教:

    如何实现在微信聊天里面转发/分享给好友或者群获得抽奖一次的机会。有偿探讨求帮助vx:peny0923

    10-28
    赞同
    回复
  • honwhy.wang
    honwhy.wang
    2023-05-05

    button组件样式不喜欢,可以用view + open-type方式发起分享吗

    2023-05-05
    赞同
    回复 1
    • 俪粒吖~
      俪粒吖~
      2023-05-16
      不能,但你可以在button外面+view来调整
      2023-05-16
      回复
  • Lee
    Lee
    2022-08-24

    请问:

     在CDN中设置referer 只设置了白名单为servicewechat.com 。但小程序分享的图片即imageUrl 就不能走CND了。请问这个imageUrl的referer是什么,我想走CDN,但又想设置防盗链

    怎么弄?

    2022-08-24
    赞同
    回复
  • Mwith
    Mwith
    2021-08-24

    小程序在企业微信内的分享了解吗?

    2021-08-24
    赞同
    回复
  • 大洪
    大洪
    2021-08-05

    请问我如何在自定义按钮上调起“转发给朋友”及“分享到微信朋友圈”中,因为我们也经常在页面上做一个自己喜欢的分享按钮,这个按钮点击下去后,同样可以实现这两种分享效果?

    2021-08-05
    赞同
    回复
  • jing
    jing
    2021-06-19

    针不戳

    2021-06-19
    赞同
    回复
  • 宝
    2021-05-06

    头像是作者本人吗,嘿嘿嘿

    2021-05-06
    赞同
    回复

正在加载...

登录 后发表内容