关于在vue-cli中使用微信自动登录和分享
在vue-cli中使用微信自动登录和分享
(以下所有接口由后台提供)
一、微信自动登录
//定义事件methods:{
//判断是否微信登陆 是不是微信浏览器
isWeiXin() {
let ua = window.navigator.userAgent.toLowerCase();
console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
if (ua.match(/MicroMessenger/i) == \'micromessenger\') {
return true;
} else {
return false;
}
},
test(){
if(this.isWeiXin()){
//微信登录,接口由后台定义
this.$http.get(\'/wx/index/login/type/2\').then((res) => {
if(res.data.code==0){ //微信登录成功跳转个人中心
this.$router.push({
name:\'UserHome\',
})
}else{ //微信登录失败,使用填写信息登录
this.$router.push({
name:\'Login\',
})
}
})
}
//页面加载后执行mounted(){
if(this.isWeiXin()){ //是来自微信内置浏览器
// 获取微信信息,如果之前没有使用微信登陆过,将进行授权登录
this.$http.get(this.$root.api+"/index/index/wx_info").then((res) => {
if(res.data.code!=0){
location.href=\'/wx/index/wxAutoLogin\';
}
})
}
}
二、微信分享
methods:{//判断是否微信登陆
isWeiXin() {
let ua = window.navigator.userAgent.toLowerCase();
console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
if (ua.match(/MicroMessenger/i) == \'micromessenger\') {
return true;
} else {
return false;
}
},
//微信分享使用方法
wxInit(sd){
let links=\'http://www.kspxzx.com/index/index/wxshare_choiceOk/identity/Student/courseID/\'+this.courseID+\'/appointment_code/\'+this.appointment_code; //分享出去的链接
let title=\'学车训练课程分享\'; //分享的标题
let desc=\' 教练名字:\'+this.codeName+\' 所在驾校:\'+this.drive+\' 训练日期:\'+this.date+\' 训练项目:\'+this.proje; //分享的详情介绍
wx.config({
debug: false,
appId: sd.appId,
timestamp: sd.timestamp,
nonceStr: sd.nonceStr,
signature: sd.signature,
jsApiList: [
\'onMenuShareTimeline\',\'onMenuShareAppMessage\',\'onMenuShareQQ\',\'onMenuShareWeibo\'
]
});
wx.ready(function () {
// alert("done")
// alert(title)
wx.onMenuShareTimeline({
title: title, // 分享标题
link:links, // 分享链接\'
imgUrl: sd.cover, // 分享图标
success: function () {
// 分享纪录
shareRecord();
alert("分享到朋友圈成功")
},
cancel: function () {
alert("分享失败,您取消了分享!")
}
});
// wx.onMenuShareAppMessage({
// title: title, // 分享标题
// desc: description, // 分享描述
// link: link, // 分享链接
// imgUrl: cover, // 分享图标
// success: function () {
// alert("成功分享给朋友")
// },
// cancel: function () {
// alert("分享失败,您取消了分享!")
// }
// });
//微信分享菜单测试
wx.onMenuShareAppMessage({
title:title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: sd.cover, // 分享图标
success: function () {
// 分享纪录
shareRecord();
alert("成功分享给朋友")
},
cancel: function () {
alert("分享失败,您取消了分享!")
}
});
wx.onMenuShareQQ({
title:title, // 分享标题
desc: desc, // 分享描述
link:links, // 分享链接
imgUrl: sd.cover, // 分享图标
success: function () {
// 分享纪录
shareRecord();
alert("成功分享给QQ")
},
cancel: function () {
alert("分享失败,您取消了分享!")
}
});
wx.onMenuShareWeibo({
title:title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: sd.cover, // 分享图标
success: function () {
// 分享纪录
shareRecord();
alert("成功分享给朋友")
},
cancel: function () {
alert("分享失败,您取消了分享!")
}
});
});
wx.error(function(res){
// alert("error")
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
},
},
mounted(){// 微信分享 \'http://www.kspxzx.com/\'let old_this=this;
if(this.isWeiXin()){
var url = "/Index/index/wxShare"; //后台接口
var data = {url:\'http://www.kspxzx.com/\'} //当前网页链接,必须跟当前页面链接一样,单页面则以首页链接为准
$.post(url,data,function(res){
if(res.code == 0){
// 调用微信分享
old_this.wxInit(res.data);
}
});
}
};
以上是 关于在vue-cli中使用微信自动登录和分享 的全部内容, 来源链接: utcz.com/z/375882.html