H5微信分享（好友、朋友圈）默认缩略图、标题和描述设置

最新推荐文章于 2025-06-18 17:30:53 发布

江南风雨2013

最新推荐文章于 2025-06-18 17:30:53 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端随记

本文链接：https://blog.youkuaiyun.com/u012028371/article/details/81319759

前端随记专栏收录该内容

14 篇文章

订阅专栏

本文记录了在H5页面中设置微信分享到朋友圈和好友时，默认的缩略图、标题和描述的方法。通过与服务端交互获取配置信息，并使用微信JS-SDK进行配置，实现了内容的个性化分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一个项目用到H5微信分享（好友、朋友圈），中间碰到好多难点，搜了好多才解决，现记录如下

先直接上源码

//分享朋友圈、好友
   $.ajax({
   url:weburl+'/p/jsapi?url='+encodeURIComponent(location.href),
   type:"get",
   datatype:"json",
   async:true,
   timeout : 30000,
   error: function(XMLHttpRequest, textStatus, errorThrown){
   console.log('进入到error')
   console.log('status:'+XMLHttpRequest.status);
   console.log('readyState:'+XMLHttpRequest.readyState);
   console.log('textStatus:'+textStatus);
   ////alert(textStatus);
   weixinSign()
   },
   success: function(data){
       wx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
       appId:data.appId,
       nonceStr:data.nonceStr,
       timestamp:data.timestamp,
       //url:"http://assistant.flow.wostore.cn/WoShieldServer/video/index.html?channelId=123",
       signature:data.signature,
       jsApiList: [
       "onMenuShareTimeline",//分享朋友圈接口
       "onMenuShareAppMessage",//分享给朋友接口
       "checkJsApi"
       ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
       });
           wx.ready(function () {
                           console.log('分享前')
                           wx.onMenuShareTimeline({
                   title: $('.videoitem .title').text(),
                   desc: '最强王者视频悬赏令',
                   link: location.href,
                   imgUrl: $('.videoitem .video').prop('poster'),//'http://assistant.flow.wostore.cn/WoShieldServer/video/img/prize.jpg'
                   trigger: function (res) {
                   // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                   // alert('用户点击发送给朋友');
                   },
                   success: function (res) {
                   console.log('已分享');
                   },
                   cancel: function (res) {
                   console.log('已取消');
                   },
                   fail: function (res) {
                   console.log(JSON.stringify(res));
                   }
                           });

                           wx.onMenuShareAppMessage({
                   title: $('.videoitem .title').text(),
                   desc: '最强王者视频悬赏令',
                   link: location.href,
                   imgUrl: $('.videoitem .video').prop('poster'),//'http://assistant.flow.wostore.cn/WoShieldServer/video/img/prize.jpg'
                   trigger: function (res) {
                   // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                   // alert('用户点击发送给朋友');
                   },
                   success: function (res) {
                   console.log('已分享');
                   },
                   cancel: function (res) {
                   console.log('已取消');
                   },
                   fail: function (res) {
                   console.log(JSON.stringify(res));
                   }
                   });
                   wx.error(function (res) {
                   alert(res.errMsg);
                   });
               });
   },
   complete : function(XMLHttpRequest,status){
   if(status=='timeout'){
   showtip("网络通信错误，请稍后再试！");
   }
   }
   });