微信转发或分享朋友圈带缩略图、标题和描述的实现方法

1、appID和scrite 从管理后台直接拿到 （appID固定不变和scrite微信运营管理系统看不到，1、从项目中拿；2、重置看到再拿）
2、后台用（appID和scrite）请求，微信拿另外几个参数
3、引用cdn或者npm install weixin-js-sdk;import wx from ‘weixin-js-sdk’;
4、前端配置参数和配置title,src,link,desc参数

**

在vue中设置

**

安装微信sdk

// 安装微信sdk
npm install weixin-js-sdk

// 在需要用到分享的页面，引入sdk
import wx from 'weixin-js-sdk';

// 在App.vued的，methods方法中加入这个公用方法
//获取分享配置
          jssdkSgin(){            
              var _this = this;
              var url = encodeURIComponent(location.href.split('#')[0]); 
              Http.getJssdkSgin(url).then(response => {
                  var result = response.data;
                  if(response.code == 1) {
                      followUrl =  result.followUrl;
                      localStorage.setItem('followUrl',result.followUrl);
                      wx.config({
                          debug: false,//生产环境需要关闭debug模式
                          appId: result.appId,//appId通过微信服务号后台查看
                          timestamp: result.timestamp,//生成签名的时间戳
                          nonceStr: result.nonceStr,//生成签名的随机字符串
                          signature: result.signature,//签名
                          jsApiList: [
                              'onMenuShareTimeline','onMenuShareAppMessage'
                          ]
                      });
                  }else{
                      _this.$message({
                          message: response.msg,
                          center: true,
                          duration:2000,
                          customClass:'mesTip'
                      });
                  }
              })
          },


//在页面的methods中，加上shareWeChat方法，
//data中的数据
shareConfig:{
                  title:'普惠金服',
                  desc:'政府牵头推动成立的惠民金融平台',
                  share_url:location.href,
                  share_img:'http://file.puhuijinfu.com/imgLoader/test/phjf/img/2018/10/11/xyswkVTROKdq1xBzEYMB.jpeg'
                },

//methods方法
//设置微信分享
          shareWeChat(){
              let share_title = this.shareConfig.title;
              let _this = this;
              var config = {
                  title: share_title, // 分享标题
                  desc:_this.shareConfig.desc,
                  link: _this.shareConfig.share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: _this.shareConfig.share_img,
                  type:'link',
                  success: function() {
                      console.log("success")
                  },
                  cancel: function() {
                      console.log("failf")
                  }
              };
              wx.ready(function () {
                  // 分享到朋友圈
                  wx.onMenuShareTimeline(config);
                  //分享给朋友
                  wx.onMenuShareAppMessage(config);
              });
          },

注意：

• 特别注意，需要在公众号中添加js安全域名。开发公众号中，好像只能添加一个；生产公众号，最多可以添加3个。 不加安全域名，会报错的。
• 特别注意url需要动态获取，传递给后台，否则会报错。因为二次分享的时候，微信会自动在url后面追加一串。如果不传递，就会造成url不对，那么签名就不正确
• 前端静态资源采用https，不要用http

确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。