vue 微信分享 ，获取位置
首先需要后台注册一个微信公众号，然后将当前项目的域名配置进去
（相当于将当前域名加入白名单）
1、安装js-sdk
npm install weixin-js-sdk --save
2、引入（在需要用的页面引入）
import wx from "weixin-js-sdk";
data(){
return{
dataInfos: {
},
// 经纬度
crd: {
latitude: "",
longitude: ""
},
}
},
mounted(){
this.information() // 获取分享的数据 （标题，图标，以及内容）
},
methods:{
information() {
// 该请求获取分享的数据 （标题，图标，以及内容）
activityApi.ActivityInfo(actCode).then(res => {
if (res.result) {
this.dataInfos = res.obj;
this.selfFun() // 初始化微信分享以及地理位置获取
}
})
},
selfFun(){
// 该请求用来获取 appid，时间戳，以及签名等。
// 传参为当前页面url， 后台用来生成签名，
//（微信初始化成功后，后台获取到的url后面会有微信的一些参数拼在url后面，返回后的签名可能会导致前台签名报错，所以最好为前端传入）
let that = this
activityApi
.jsjdkParams({
url: location.href
})
.then(res => {
if (res && res.result) {
let obj = res.obj || null;
if (obj) {
wx.config({
debug: false,
appId: obj.appid, // 必填，公众号的唯一标识
timestamp: obj.timestamp, // 必填，生成签名的时间戳
nonceStr: obj.nonceStr,// 必填，生成签名的随机串
signature: obj.signature,// 必填，签名
jsApiList: [
"onMenuShareTimeline", //分享到朋友圈
"onMenuShareAppMessage", // 分享给朋友
"onMenuShareQQ", // QQ
"onMenuShareWeibo", // 微博
"onMenuShareQZone",// QQ控件
"getLocation", // 获取地理位置
]// 必填，需要使用的JS接口列表
});
//分享给朋友
wx.onMenuShareAppMessage({
title: that.dataInfos.shareTitle, // 分享标题
desc: that.dataInfos.shareSummary, // 分享描述
link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: that.dataInfos.shareImgUrl, // 分享图标
type: "link", // 分享类型,music、video或link，不填默认为link
dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
callBack && callBack();
},
cancel: function() {
// 用户取消分享后执行的回调函数
errorCallBack && errorCallBack();
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: that.dataInfos.shareTitle,
desc: that.dataInfos.shareSummary, // 分享描述
link: location.href,
imgUrl: that.dataInfos.shareImgUrl,
success: function() {
// 用户确认分享后执行的回调函数
callBack && callBack();
},
cancel: function() {
// 用户取消分享后执行的回调函数
errorCallBack && errorCallBack();
}
});
//分享到QQ
wx.onMenuShareQQ({
title: that.dataInfos.shareTitle,
desc: that.dataInfos.shareSummary, // 分享描述
link: location.href,
imgUrl: that.dataInfos.shareImgUrl,
success: function() {
// 用户确认分享后执行的回调函数
callBack && callBack();
},
cancel: function() {
// 用户取消分享后执行的回调函数
errorCallBack && errorCallBack();
}
});
//分享到腾讯微博
wx.onMenuShareWeibo({
title: that.dataInfos.shareTitle,
desc: that.dataInfos.shareSummary, // 分享描述
link: location.href,
imgUrl: that.dataInfos.shareImgUrl,
success: function() {
// 用户确认分享后执行的回调函数
callBack && callBack();
},
cancel: function() {
// 用户取消分享后执行的回调函数
errorCallBack && errorCallBack();
}
});
//分享到QZone
wx.onMenuShareQZone({
title: that.dataInfos.shareTitle,
desc: that.dataInfos.shareSummary, // 分享描述
link: location.href,
imgUrl: that.dataInfos.shareImgUrl,
success: function() {
// 用户确认分享后执行的回调函数
callBack && callBack();
},
cancel: function() {
// 用户取消分享后执行的回调函数
errorCallBack && errorCallBack();
}
});
wx.getLocation({
type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function(res) {
that.crd.latitude = res.latitude;
that.crd.longitude = res.longitude;
}
});
}
}
});
}
},