關于在vue-cli中使用微信自動登錄和分享的實例
更新時間：2017年06月22日 09:33:30 作者：嘉爺
本篇文章主要介紹了關于在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',
})
}
})
}
//頁面加載后執(zhí)行
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信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于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/'} //當前網(wǎng)頁鏈接，必須跟當前頁面鏈接一樣，單頁面則以首頁鏈接為準
$.post(url,data,function(res){
if(res.code == 0){
// 調用微信分享
old_this.wxInit(res.data);
}
});
}
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue Element前端應用開發(fā)之獲取后端數(shù)據(jù)
這篇文章主要介紹了Vue Element前端應用開發(fā)之獲取后端數(shù)據(jù)，對vue感興趣的同學，可以參考下2021-05-05
Vue.js 2.0中select級聯(lián)下拉框實例
在網(wǎng)上搜索了Vuejs2.0 動態(tài)級聯(lián)select許久未果，決定自己總結一下自己的經驗，有關select在Vue.js 2.0版本中的應用，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Vue3父子通訊方式及Vue3插槽的使用方法詳解,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue-cli3啟動服務如何自動打開瀏覽器配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
之前文章我們描述給過Vue3 的七通信使用，今天中五篇文章我們再來看看Vue2 的通信使用寫法的相關資料,需要的朋友可以參考下面文章的具體內容2021-09-09
這篇文章主要介紹了vue3-HOOKS模塊化處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+WebSocket頁面實時刷新長連接的實現(xiàn)
最近vue項目要做數(shù)據(jù)實時刷新，數(shù)據(jù)較大，會出現(xiàn)卡死情況，所以本文主要介紹了頁面實時刷新長連接，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
本片文章主要寫了，Vue3開發(fā)時運用Vant UI庫的一些避坑點。讓有問題的小伙伴可以快速了解是為什么。也是給自己做一個記錄2023-04-04
這篇文章主要為大家詳細介紹了Vue分頁組件的實例代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本文主要介紹了elementUI組件el-dropdown的一些坑，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12