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里面的几项配置信息，其他的配置参照微信官网文档陪直就行了。