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),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。