前言
ios不同于安卓app是不能强制用户不安装使用软件,所以安卓APP和iosAPP实现的方式不同,具体实现操作如下
步骤一:
创建“lyg-popup.vue文件”封装弹窗代码组件,代码如下:
<template name="protocol-popup">
<view @touchmove.stop.prevent="clear" v-show="showPopup">
<view class="popup_mask" @touchmove.stop.prevent="clear"></view>
<view class="popup_content">
<view class="title">{{title}}</view>
<view class="explain_text">
请你务必认真阅读、充分理解“服务协议”和“隐私政策”各条款,包括但不限于:为了向你提供数据、分享等服务所要获取的权限信息。
<view class="line">
你可以阅读
<navigator :url="protocolPath" class="path" hover-class="navigator-hover">《服务协议》</navigator>和<navigator :url="policyPath"
class="path" hover-class="navigator-hover">《隐私政策》</navigator>了解详细信息。如您同意,请点击"同意"开始接受我们的服务。
</view>
</view>
<view class="button">
<view @tap="back">暂不使用</view>
<view @tap="confirm">同意</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "lyg-popup",
props: {
title: {
type: String,
default: "服务协议和隐私政策"
},
// 协议路径
protocolPath: {
type: String
},
// 政策路径
policyPath: {
type: String
},
policyStorageKey: {
type: String,
default:"has_read_privacy"
}
},
data() {
return {
showPopup: false
};
},
created: function() {
var that = this;
// console.log("lyg-popup created");
uni.getStorage({
key: this.policyStorageKey,
success: (res) => {
if (res.data) {
that.showPopup = false;
uni.showTabBar({});
}
},
fail: function(e) {
that.showPopup = true;
uni.hideTabBar({});
}
});
},
methods: {
// 禁止滚动
clear() {
return;
},
back() {
this.$emit('popupState', false)
// #ifdef APP-PLUS
// plus.runtime.quit();
plus.ios.import("UIApplication").sharedApplication().performSelector("exit");
// #endif
},
// 关闭弹框
confirm() {
this.showPopup = false;
this.$emit('popupState', true);
uni.setStorage({
key: this.policyStorageKey,
data: true
});
uni.showTabBar({});
}
}
};
</script>
<style lang="scss">
.popup_mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
z-index: 98;
}
.popup_mask {
opacity: 1;
}
.popup_content {
overflow: hidden;
box-sizing: border-box;
padding: 40upx 20upx 0 20upx;
position: fixed;
bottom: 30%;
border-radius: 8px;
left: 50%;
margin-left: -40%;
right: 0;
min-height: 400upx;
background: #ffffff;
width: 80%;
z-index: 99;
.title {
text-align: center;
font-size: 34upx;
padding: 10upx 0 0 0;
}
.explain_text {
font-size: 30upx;
padding: 30upx 30upx 40upx 30upx;
line-height: 38upx;
.line {
display: block;
.path {
color: #007aff;
display: inline-block;
text-align: center;
}
}
}
.button {
display: flex;
padding: 20upx;
align-items: center;
font-size: 34upx;
justify-content: space-around;
border-top: 1upx solid #f2f2f2;
view {
text-align: center;
}
}
}
</style>
步骤二:
将你封装的组件引入到进入APP时需要显示的第一个页面,我的iosAPP进入的第一个页面是引导页,所以把组件引进来,代码如下:
template:
<lyg-popup @popupState="popupState" title="服务协议" protocolPath='/pages/article/index?article_id=7'
policyPath='/pages/article/index?article_id=21' policyStorageKey="has_read_privacy"></lyg-popup>
script:
import lyg_popup from '@/components/lyg-popup/lyg-popup.vue';
components: {
lyg_popup
},
popupState(state) {
console.log(state);
},
效果如下
温馨提示:
1.安卓也可以使用此方法实现但是安卓本身有更简单的实现方法,具体操作去我的全部文章找到相关文章 2.plus.runtime.quit();此方法主要是让安卓APP退出应用的方法 3.plus.ios.import("UIApplication").sharedApplication().performSelector("exit");此方法主要是让苹果APP退出应用的方法