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

最近一个项目用到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("网络通信错误,请稍后再试!");
              }
          }
    });

 

解析:需要服务端配合,这个接口weburl+'/p/jsapi?url='+encodeURIComponent(location.href),用来获取wx.config里面的几项配置信息,其他的配置参照微信官网文档陪直就行了。

展开阅读全文

没有更多推荐了,返回首页