uniapp苹果端（ios）设置用户隐私协议弹窗遇到的问题和解决办法

先发一下代码：

第一步：创建“lyg-popup.vue文件”封装弹窗代码组件，代码如下：

<template name="protocol-popup">
<view @touchmove.stop.prevent="clear" v-show="showPopup">
<view @touchmove.stop.prevent="clear"></view>
<view>
<view>{{title}}</view>
<view>
请你务必认真阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了向你提供数据、分享等服务所要获取的权限信息。
<view>
你可以阅读
<navigator :url="protocolPath" hover-class="navigator-hover">《服务协议》</navigator>和<navigator :url="policyPath"
 hover-class="navigator-hover">《隐私政策》</navigator>了解详细信息。如您同意，请点击"同意"开始接受我们的服务。
</view>
</view>

<view>
<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>
.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>

第二步：在首页引入上面的组件

    <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);
},

上面的操作完成后，我的问题来了，弹窗跳出来后，有部分文字和button按钮不显示，我去了个尴尬的，这是存心要整人，然后就是一顿烂找问题的原因

终于发现了问题原因，在app.vue里面引入了2个css文件，一个font-size:0，一个height:1px，我去你的，你这不是存心整人么？

最后在lyg-popup.vue文件的css部分加上了font-size和height属性，问题解决了