微信 H5 页面兼容性——转发给朋友

微信公众号页面提供了转发给朋友的功能,如果没有设置隐藏“发送给朋友”,就可以转发给朋友。

wx.hideMenuItems({
  menuList: [
    'menuItem:share:appMessage' // 发送给朋友
  ], // 要隐藏的菜单项
});

转发给朋友后,朋友可能会看到三种不同的分享内容。

1. 分享内容

1.1. 微信默认分享卡片

该卡片包含了:

  • 页面标题
  • 该页面访问地址

微信默认分享卡片

1.2. 自定义分享卡片

该卡片包含了:

  • 页面标题
  • 分享描述
  • 该页面访问地址
  • 分享图片

自定义分享卡片

1.3. 超链接

一个可以访问分享页面的超链接。这个超链接和微信公众号打开该页面,选择“复制链接”,得到的是一样的内容。

超链接

  • 如果从超链接进入,在“转发给朋友”,就是第三种,对方收到的就是超链接。
  • 如果没有自定义设置分享配置,就是第一种,对方收到的就是微信的默认分享卡片。
  • 如果自定义设置分享配置,就是第二种,对方收到的就是自定义分享卡片。

微信打开h5链接分享出去都是链接了,因为微信针对外部链接内容进行了规范管理。链接进入再分享就是链接了。

2. 自定义“转发给朋友”的分享内容

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

设置分享前需要先:

  • 绑定域名
  • 引入JS文件
  • 通过config接口注入权限验证配置
  • 通过ready接口处理成功验证

分享的配置就是写在 ready 接口中的。具体参看JSSDK使用步骤

最后可选

  • 通过error接口处理失败验证
posted @ 2023-08-11 17:49  艾前端  阅读(407)  评论(0编辑  收藏  举报