vue中分享到朋友圈和分享给朋友。
第一步:安装微信sdk
npm install weixin-js-sdk;
第二步:引入
import wx from 'weixin-js-sdk';
第三步:使用
/微信分享开始
let _this = this;
_this.share_url = 要分享的url;
_this.share_img = 要分享的图片;
_this.title = 要分享的标题;
var url1 = location.href;//url不能写死
$.ajax({
type : "get",
url : "http://域名/Wechat/ajaxGetWxConfig?askUrl="+encodeURI(url1),
dataType : "json",
async : false,
success : function(data) {
_this.appId = data.data.appId;
_this.timestamp = data.data.timestamp;
_this.nonceStr = data.data.nonceStr;
_this.signature = data.data.signature;
},
error: function(xhr, status, error) {
//alert(status);
//alert(xhr.responseText);
}
})
wx.config({
debug: false,生产环境需要关闭debug模式
appId: _this.appId,//appId通过微信服务号后台查看
timestamp: _this.timestamp,//生成签名的时间戳
nonceStr: _this.nonceStr,//生成签名的随机字符串
signature: _this.signature,//签名
jsApiList: [
'onMenuShareTimeline','onMenuShareAppMessage'
]
});
var config = {
title: _this.title, // 分享标题
link: _this.share_url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: _this.share_img,
success: function() {
console.log("success")
},
cancel: function() {
console.log("failf")
}
};
wx.ready(function () {
//
// //分享到朋友圈
wx.onMenuShareTimeline(config);
//分享给朋友
wx.onMenuShareAppMessage(config);
});
//微信分享结束
第四步:遇到的问题;
安卓机可以正常使用,ios不起作用,但后来发现ios第一次分享不起作用,刷新页面后就可以用了,所以在这里判断了是否是苹果浏览器,如果是则刷新一次页面
let isIOS = function() {//如果是苹果机,分享完成后刷新页面
var isIphone = navigator
.userAgent
.includes('iPhone');
var isIpad = navigator
.userAgent
.includes('iPad');
return isIphone || isIpad;
};
if (isIOS()) {
if(this.stroe.get('isrefresh') == 1){
this.$router.go(0)
}