微信小程序轻松分享H5，分享到微信好友或朋友圈

2023-12-29 17:59:12

在微信小程序中轻松分享 H5 页面：利用小程序的分享功能

前言

微信小程序已成为企业和个人推广品牌和产品的强大工具。H5 页面因其制作简单、互动性强、传播方便而成为小程序中常用的推广方式之一。为了进一步提升 H5 页面的影响力，本文将详细介绍如何使用微信小程序自带的分享功能，轻松实现 H5 页面的分享。

添加分享功能

1. 设置 "shareMenu" 属性

打开小程序项目，在 app.json 文件中找到 "window" 对象，添加 "shareMenu" 属性并将其设置为 "withShareTicket", 如下所示：

{
  "window": {
    "shareMenu": "withShareTicket"
  }
}

2. 监听分享按钮点击事件

在小程序页面的 js 文件中，监听 "onShareAppMessage" 事件，并在该事件的处理函数中设置 H5 页面链接、标题等分享信息，如下所示：

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 按钮点击，获取转发目标是小程序的路径
      console.log(res.target);
    }
    return {
      title: 'H5 页面标题',
      path: '/pages/h5/h5',
      imageUrl: 'H5 页面缩略图'
    }
  }
})

配置 H5 页面

在 H5 页面源代码中，添加如下代码，启用微信分享功能：

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
  wx.config({
    debug: false,
    appId: '微信小程序的appId',
    timestamp: '时间戳',
    nonceStr: '随机字符串',
    signature: '签名',
    jsApiList: ['onMenuShareAppMessage']
  });
  wx.ready(function () {
    wx.onMenuShareAppMessage({
      title: 'H5 页面标题',
      desc: 'H5 页面',
      link: 'H5 页面链接',
      imgUrl: 'H5 页面缩略图',
      success: function () {
        // 用户点击分享按钮后，执行的回调函数
      },
      cancel: function () {
        // 用户取消分享后，执行的回调函数
      }
    });
  });
</script>