這個筆記得做好。
1.vue頁面的點擊事件
import {login,loginy,wxLog,wxLogin,logout} from '../network/login'
wxloginBtn() {
let _this = this
wxLog() //調取微信登錄頁面的js方法
this.alertSzTipsFlage = true
this.tips = '正在登錄...'
setTimeout(function () {
_this.alertSzTipsFlage = false
}, 1500)
this.wxLoginUserInfo()
},
wxLoginUserInfo(){
let _this = this
let userInfo = localStorage.getItem("wxUserInfo") //拾取在js頁面localStorage存儲到用戶信息
if (null != userInfo) {
userInfo = JSON.parse(userInfo)
wxLogin(userInfo).then(res => { //這里是常規登錄部分，這里傳遞的參數userInfo的openid，nickname，headimgurl
if (res.token) {
window.localStorage.setItem("user", JSON.stringify(res))
this.alertSzTipsFlage = true
this.tips = '微信登錄成功'
setTimeout(function () {
_this.alertSzTipsFlage = false
_this.$router.push('/index')
}, 1500)
} else {
this.alertSzTipsFlage = true
this.tips = '微信登錄失敗'
setTimeout(function () {
_this.alertSzTipsFlage = false
}, 1500)
}
})
}else {
this.alertSzTipsFlage = true
this.tips = '微信登錄失敗'
setTimeout(function () {
_this.alertSzTipsFlage = false
}, 1500)
}
}
2.拾取到用戶微信登錄信息后調用登錄接口
export function wxLogin(userInfo) {
return request({
url:'/api/weChatLogin',
data:{
"mobile":userInfo.openid,
"nickname":userInfo.nickname,
"logo":userInfo.headimgurl
},
method:'post',
headers:{
'post':{'Content-Type': 'application/json;charset=UTF-8'}
}
})
}
至此微信登錄成功
3.之前js頁面是如何拿取到用戶登錄權限並存儲微信登錄權限的？在2.下面粘貼復制：
export function wxLog(){
let self = this;
getService()
// 微信授權登錄對象
let aweixin = null;
// 當前環境支持的所有授權登錄對象
let auths = null;
// 獲取登錄授權認證服務列表，單獨保存微信登錄授權對象
function getService(){
plus.oauth.getServices(function(services){
//plus.nativeUI.alert("services:"+JSON.stringify(services));
auths = services;
authLogin()
}, function(e){
plus.nativeUI.alert("獲取登錄授權服務列表失敗，請稍后重試");
plus.nativeUI.alert("獲取登錄授權服務列表失敗："+JSON.stringify(e));
} );
}
// 獲取微信登錄授權對象后可進行登錄認證操作
function authLogin(){
for(let i = 0; i < auths.length; i++){
if(auths[i].id == 'weixin'){
aweixin = auths[i];
break;
}
}
if(!aweixin){
plus.nativeUI.alert("當前環境不支持微信登錄");
return;
}
if(!aweixin.authResult){
aweixin.login(function(e){
//plus.nativeUI.alert("登錄認證成功!"+JSON.stringify(e));
authUserInfo()
}, function(e){
//plus.nativeUI.alert("登錄認證失敗: "+JSON.stringify(e));
} );
}else{
authUserInfo()
console.log("已經登錄認證!");
}
}
// 獲取微信登錄授權對象后獲取用戶信息操作
function authUserInfo(){
if(!aweixin){
plus.nativeUI.alert("當前環境不支持微信登錄");
return;
}
if(aweixin.authResult){
aweixin.getUserInfo( function(e){
//登錄成功處理
//plus.nativeUI.alert("獲取用戶信息成功："+JSON.stringify(aweixin.userInfo));
window.localStorage.setItem("wxUserInfo", JSON.stringify(aweixin.userInfo));
authLoginOut(); //注銷登錄防止切換賬號獲取到舊信息
}, function(e){
console.log("獲取用戶信息失敗： "+JSON.stringify(e));
} );
}else{
plus.nativeUI.alert("未登錄認證!");
}
}
// 注銷登錄認證
function authLoginOut(){
if(!aweixin){
plus.nativeUI.alert("當前環境不支持微信登錄");
return;
}
aweixin.logout(function(e){
// plus.nativeUI.alert("注銷登錄認證成功!"+JSON.stringify(e));
}, function(e){
console.log("注銷登錄認證失敗: "+JSON.stringify(e));
});
}
}