分享

微信网页开发----->分享

developers.weixin.qq.com/doc/service…

1.可以通过右上角的三个点分享，分享内容可以自定义

//noncestr, signature, timestamp 通过接口获取
const { noncestr, signature, timestamp } = res.resultData
wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: "", // 必填，公众号的唯一标识
  timestamp: timestamp, // 必填，生成签名的时间戳
  nonceStr: noncestr, // 必填，生成签名的随机串
  signature: signature, // 必填，签名
  jsApiList: [
    "updateAppMessageShareData",
    "updateTimelineShareData",
    "onMenuShareWeibo",
  ],
  openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
//获取分享数据
const shareRes = await new GetShareInfo()
  .setParams({ campaignId: Number(this.urlQuery("id")) })
  .execute();
const { h5Url, title, description } = shareRes.resultData;
//获取短链

wx.ready(() => {
  //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
  wx.updateAppMessageShareData({
    title: title, // 分享标题
    desc: description, // 分享描述
    link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: h5Url, // 分享图标
    success: function () {
      // 设置成功
    },
  });
  //需在用户可能点击分享按钮前就先调用
  wx.updateTimelineShareData({
    title: title,
    desc: description,
    link: window.location.href,
    imgUrl: h5Url,
    success: function () {
      // 设置成功
    },
  });
  //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
  wx.onMenuShareWeibo({
    title: title,
    desc: description,
    link: window.location.href,
    imgUrl: h5Url,
    success: function () {
      // 设置成功
    },
  });
});
wx.error(function (res) {
  console.log("err", res);
});

2.绑定点击事件并调用分享API

wx.ready(function () {
  // 找到您自定义的按钮
  const myButton = document.getElementById('myCustomShareButton');

  // 为按钮绑定点击事件
  myButton.onclick = function() {
    // 当用户点击您的自定义按钮时，调用微信的“分享给朋友”API
    wx.updateAppMessageShareData({
      title: '这是我自定义的分享标题', 
      desc: '这是详细的分享描述，邀请朋友一起来看！', 
      link: window.location.href, 
      imgUrl: 'https://您的域名.com/share-image.jpg',
      success: function () {
        // 分享成功的回调函数
        console.log('分享成功！');
      }
    });

    // 如果需要，可以同时设置“分享到朋友圈”
    // wx.updateTimelineShareData({ ... });
  };
});

app 的 h5 分享

1.app可以提供一个sdk调用

<button onclick="shareToWeChat()">一键分享到朋友圈</button>
<script>
function shareToWeChat() {
  // 首先检查运行环境是否提供了所需的桥接功能
  if (window.WebViewJavascriptBridge) {
    // 调用桥接方法，并传递分享内容
    window.WebViewJavascriptBridge.callHandler('shareToTimeline', {
      title: '这个H5太棒了，快来看看吧！', // 分享标题
      desc: '这是一个精彩的描述',           // 分享描述（部分平台适用）
      link: 'https://your-h5-domain.com/activity', // 分享后打开的链接
      imgUrl: 'https://your-h5-domain.com/share-thumb.jpg' // 分享缩略图
    }, function(response) {
      // 这是App执行分享后回调给H5的函数，可以根据response判断分享结果
      if (response === 'success') {
        alert('分享成功！');
      } else {
        alert('分享失败或已取消。');
      }
    });
  } else {
    // 如果App没有提供桥接接口，则降级到方案二
    alert('当前环境不支持一键分享，请尝试其他方式。');
    showAlternativeOptions(); // 提示用户使用二维码等方式
  }
}
</script>

2.在H5页面中生成一个包含您希望分享的网页链接的二维码。用户需要长按识别二维码后，进入微信并打开目标页面，再点击微信右上角的菜单进行分享。

小程序内部webview的H5分享

1.h5里

// 在 H5 页面中引入 JS-SDK 后
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
// 当页面准备就绪时，向小程序 postMessage
wx.miniProgram.postMessage({
  data: {
    title: '这是您要分享的定制标题', // 自定义标题
    desc: '这是分享的详细描述',      // 自定义描述
    path: '/pages/webview/webview?url=' + encodeURIComponent(window.location.href), // 分享后打开的页面路径
    // imageUrl: '自定义封面图URL' // 可选，自定义封面图
  }
});
</script>

2.小程序端接收与配置

<!-- pages/webview/webview.wxml -->
<web-view src="{{h5Url}}" bindmessage="onH5Message"></web-view>

Page({
  data: {
    h5Url: '', // 要嵌入的H5链接
    shareData: {} // 存储从H5接收到的分享数据
  },

  onLoad(options) {
    // 1. 启用分享菜单
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage'] // 注意：'shareTimeline' 对web-view无效
    })[2](@ref);
    // 如果有传入的url，则设置H5页面地址
    if (options.url) {
      this.setData({ h5Url: decodeURIComponent(options.url) });
    }
  },

  // 2. 接收来自H5页面的数据
  onH5Message(e) {
    // e.detail.data 是一个数组，包含H5页面发送的所有数据
    const receivedData = e.detail.data;
    if (receivedData && receivedData.length > 0) {
      // 通常取最后一次发送的数据
      const lastData = receivedData[receivedData.length - 1];
      this.setData({
        shareData: lastData // 存储分享数据
      });
    }
  },

  // 3. 配置分享内容
  onShareAppMessage(options) {
    // 如果有从H5接收到的数据，则使用；否则使用默认值
    const shareInfo = this.data.shareData || {};
    return {
      title: shareInfo.title || '默认分享标题',
      path: shareInfo.path || '/pages/webview/webview?url=' + encodeURIComponent(options.webViewUrl || this.data.h5Url)
    };
  }
});