H5页面分享到微信如何设置自定义标题图标？

前端

2023-12-22 11:33:56

公众号分享是H5页面推广的重要途径之一，而自定义标题图标可以显著提升H5页面的打开率和用户体验。本文将详细讲解如何在H5页面分享到微信时设置自定义标题图标。

公众号设置

1.1 登录微信公众平台进入“公众号设置”的“功能设置”

首先，需要拥有一个微信公众号，并登录微信公众平台。在公众号管理界面，点击左侧菜单栏的“功能设置”，进入公众号功能设置页面。

微信开放平台申请

2.1 创建微信开放平台应用

在“功能设置”页面，点击“开放平台”下的“创建开放平台应用”。按照提示，输入应用名称、开发者ID等信息，创建微信开放平台应用。

2.2 获取页面链接

在创建开放平台应用后，复制“网页授权获取用户基本信息”下的“页面地址”，这个就是需要分享出去的H5页面链接。

2.3 验证页面

点击“验证页面”按钮，将H5页面链接粘贴到验证窗口，进行验证。验证成功后，点击“提交申请”按钮，提交自定义标题图标的申请。

提交申请

3.1 填写申请表

在“开放平台”页面，点击“自定义标题图标申请”，进入申请页面。填写申请表，包括自定义图标图片、页面链接、图标说明等信息。

3.2 提交申请

填写完申请表后，点击“提交”按钮。微信官方会在收到申请后进行审核，通常需要1-3个工作日。

设置分享图标

4.1 获取开发者ID

在公众号管理界面，点击“基本设置”中的“开发者信息”，获取开发者ID。

4.2 设置分享图标

在H5页面中，添加以下代码设置分享图标：

window.wx.config({
  appId: "APP_ID", // 开发者ID
  timestamp: TIMESTAMP, // 时间戳
  nonceStr: NONCESTR, // 随机字符串
  signature: SIGNATURE, // 签名
  jsApiList: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage'
  ]
});

window.wx.ready(function () {
  window.wx.onMenuShareAppMessage({
    title: '分享标题', // 分享标题
    desc: '分享', // 分享
    link: '分享链接', // 分享链接
    imgUrl: '分享图片地址' // 分享图片地址
  });
});