h5分享出去一会有自定义图片标题，一会没有自定义图片标题解决办法

一只开心鸭！

于 2024-09-09 09:57:29 发布

阅读量737

点赞数 15

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/oneya1/article/details/142049556

版权

1.问题：做分享的时候发现，分享出去有时候有图片，有时候没有，尝试了很多方法都不行，最后发现如果在分享功能中不使用 wx.ready，可能会遇到以下问题：

①API 调用失败：wx.ready 确保微信 JS SDK 完全加载和初始化。如果在 SDK 准备好之前调用 API 方法（如 wx.onMenuShareTimeline 或 wx.onMenuShareAppMessage），这些方法可能无法正常工作，因为 SDK 的相关功能可能尚未启用或配置。

②功能无法正常实现：分享功能可能不会按预期执行。用户点击分享按钮时，分享的数据可能不会被正确地设置或显示。

③错误和异常：如果 SDK 还没有准备好，调用相关方法可能会导致 JavaScript 错误或异常，这会干扰用户体验，并可能在控制台中输出错误信息。

总之，使用 wx.ready 可以确保你的代码在微信环境中按照预期运行，并且所有相关功能都可以正确地初始化和使用。
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>分享</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

  <script
    src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.7.2/jquery.min.js"
    type="application/javascript"
  ></script>
  <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script>
    let common_share = {
      imgUrl: "share.jpg", // 分享显示的缩略图地址
      link: "https://地址/main/#/", // 分享地址
      desc: "不止于此，更多精彩......", // 分享描述
      title: "案例" // 分享标题
    };
    let backUrl = "https://地址/111";
    let wxMessage = {
      //默认提交地址
      url: backUrl + "/wx/getWxAutoMessage", //获取appid等信息
      getOpenIdUrl: backUrl + "/wx/getOpenId"
    };
    window.onload = function() {
      share(common_share); //默认分享
    };
    function share(shareData) {
      $.ajax({
        url: wxMessage.url,
        data: { url: window.location.href },
        type: "post",
        error: function(XMLHttpRequest, textStatus, errorThrown) {},
        success: function(data) {
          var resultData = data.data;
          console.log(resultData);
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: resultData.appId, // 必填，公众号的唯一标识
            timestamp: resultData.timestamp, // 必填，生成签名的时间戳
            nonceStr: resultData.nonceStr, // 必填，生成签名的随机串
            signature: resultData.signature, // 必填，签名，见附录1
            jsApiList: [
              // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              "onMenuShareTimeline",
              "onMenuShareAppMessage",
              "checkJsApi"
            ]
          });
          wx.ready(() => {
            console.log("wx ready");
            wx.onMenuShareTimeline(shareData);
            wx.onMenuShareAppMessage(shareData);
          });
        }
      });
    }
  </script>
</html>