例：小程序首页可以查看，点击某部分需要弹出授权登录框
main.js
const writeUrl = [
"/pages/index/index",
"/pages/order/index",
"/pages/engin/index",
"/pages/chat/chatList",
"/pages/user/index",
]
//设置tabBar白名单
const originalNavigateTo = uni.navigateTo;
const originalReLaunch = uni.reLaunch;
//重写navigate和relaunch
uni.navigateTo = function(options) {
const url = options.url;
if (writeUrl.some((prefix) => url.startsWith(prefix))) {
console.log("navigateTo 白名单 跳转");
originalNavigateTo(options);
return;
}
const isLogin = uni.getStorageSync("isLogin")
console.log("uni.navigateTo isLogin", isLogin);
if (!isLogin) {
console.log("navigateTo 没有登录 打开登录的弹窗", options);
uni.$emit("showLoginPopup");
} else {
console.log("登录 跳转");
originalNavigateTo(options);
}
}
uni.reLaunch = function(options) {
const url = options.url;
if (writeUrl.some((prefix) => url.startsWith(prefix))) {
console.log("reLaunch 白名单 跳转");
originalReLaunch(options);
return;
}
const isLogin = uni.getStorageSync("isLogin")
console.log("uni.navigateTo isLogin", isLogin);
if (!isLogin) {
console.log("reLaunch 没有登录 打开登录的弹窗");
uni.$emit("showLoginPopup");
} else {
console.log("登录 跳转");
originalReLaunch(options);
}
}
//满足条件就弹出登录弹窗
App.vue监听
globalData: {
userInfo: null,
},
created() {
uni.$on("showLoginPopup", () => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
console.log("showLoginPopup", currentPage);
// #ifdef MP-WEIXIN
const popup = currentPage.selectComponent("#wx_login_popup");
console.log(popup, 'popup');
if (popup) {
popup.setData({
visible: true
})
uni.hideTabBar()
}
// #endif
// #ifdef MP-ALIPAY
const popup = currentPage.$selectComponent("#wx_login_popup");
if (popup) {
popup.setData({
visible: true
})
uni.hideTabBar()
}
// #endif
});
uni.$on("closeLoginPopup", () => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
console.log("closeLoginPopup", currentPage);
// #ifdef MP-WEIXIN
const popup = currentPage.selectComponent("#wx_login_popup");
if (popup) {
if (popup) {
popup.setData({
visible: false
})
}
}
});
// #endif
}
//条件编译部分删除会报错
授权弹窗组件部分
<template>
<view>
<u-popup :show="visible" round="20" mode="bottom" @open="openWxLogin" @close="goToIndex" :closeable="true"
:overlay="false">
<view class="u-popup-slot">
<view class="u-popup-slot_header">
<u-image width="50" height="50" mode="aspectFit"
src="http://file.benbenyouni.com/static/logo.png"></u-image>
<u-text :bold="true" size="50rpx" text="奔奔有你"></u-text>
</view>
<view class="u-popup-slot_radio">
<u-checkbox-group @change="checkboxChange" v-model="value" shape="circle" placement="row">
<u-checkbox name="checkbox_agreement" :labelDisabled="false" label="已阅读并同意"></u-checkbox>
<u-text :bold="true" @click="goToUserAgreement" text="用户协议" mode="text"
:lineHeight="15"></u-text>
|
<u-text :bold="true" @click="goToPrivacyPolicy" color="#FF0000" text="隐私政策" mode="text"
:lineHeight="15"></u-text>
</u-checkbox-group>
</view>
<view class="u-popup-slot_button">
<u-button width="300rpx" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhonenumber"
shape="circle">一键登录</u-button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import { wxlogin,getWechatOpenId } from "../common/example";
export default {
data() {
return {
visible: false,
value: [],
isAgreement: false
}
},
onLoad() {
this.visible = true;
console.log("<WxLogin />");
},
methods: {
openWxLogin() {
this.visible = true;
this.isAgreement = false;
console.log("isAgreement:", this.isAgreement);
console.log("<openWxLogin />");
},
getPhonenumber(e) {
console.log("this.isAgreement", this.isAgreement);
if (!this.isAgreement) {
uni.showToast({
title: '请同意用户协议|隐私政策'
})
return;
}
const that = this;
if (e.detail.errno == undefined) {
wxlogin({
code: e.detail.code,
}).then(res => {
console.log("res", res);
if (res.data === "0") {
uni.login({
provider: 'weixin',
success: res1 => {
getWechatOpenId({
phone: res.phone,
code: res1.code,
}).then(res2 => {
// res.phone = "19999999999"
const loginParam = {
"loginName": res.phone,
"loginPsw": "",
"loginType": "3",
"osType": "0"
}
loginApp({
newData: loginParam,
}).then(res3 => {
let authed_info = JSON.parse(res3.authed_info);
console.log("authed_info", authed_info);
let data = {
...authed_info,
bbToken: authed_info.token,
userAvatar: authed_info
.userAvatarFileName,
userRealName: authed_info.nickname,
appletOpenId: res2.openId,
}
data = this.convertObjectKeysToCamelCase(
data);
console.log("data", data);
getApp().globalData.userInfo = data;
uni.setStorageSync('userInfo', data)
uni.setStorageSync("isLogin", true);
uni.$emit("closeLoginPopup");
uni.$emit("startBadgeTip");
that.$system.refreshCurretPage();
});
});
},
fail: () => { },
complete: () => { }
});
} else {
setTimeout(() => {
uni.navigateTo({
url: '/pages/mine/improve-info?phone=' + res.phone
})
}, 1500)
}
});
}
},
toCamelCase(str) {
return str.replace(/_([a-z])/g, function (match, letter) {
return letter.toUpperCase();
});
},
convertObjectKeysToCamelCase(obj) {
if (Array.isArray(obj)) {
return obj.map(this.convertObjectKeysToCamelCase);
} else if (obj !== null && typeof obj === 'object') {
return Object.keys(obj).reduce((acc, key) => {
const camelKey = this.toCamelCase(key);
acc[camelKey] = this.convertObjectKeysToCamelCase(obj[key]);
return acc;
}, {});
}
return obj;
},
checkboxChange(e) {
if (e[0] != undefined) {
this.isAgreement = true;
} else {
this.isAgreement = false;
}
},
goToUserAgreement() {
uni.navigateTo({
url: '/pages/auth/user-agreement'
});
},
goToPrivacyPolicy() {
uni.navigateTo({
url: '/pages/auth/privacy-policy'
});
},
goToIndex() {
this.visible = true;
uni.setStorageSync("isLogin", false);
uni.removeStorageSync('userInfo');
getApp().globalData.userInfo = undefined;
uni.$emit("closeLoginPopup");
}
},
}
</script>
<style scoped>
.p40 {
padding: 40rpx;
}
.u-popup-slot {
width: 100%;
height: 650rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.u-popup-slot_header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 45px;
}
.u-popup-slot_radio {
margin-bottom: 10px;
}
.u-popup-slot_button {
width: 550rpx;
}
</style>
最后在使用的页面
<WxLogin id="wx_login_popup" />
//这里引入就不写了，我是在main.js中全局注册的