uniapp开发微信小程序初次加载弹窗显示隐私政策

效果图：

 

废话不多说，直接上代码：

<uni-popup
			ref="uPopup"
			:mask-click="false"
			type="center">
			<view class="agreement-view" :style="{ width: scrollWidth * 0.80 + 'px', height: scrollHeight * 0.70 + 'px' }">
				<!-- 弹框提示头 -->
				<view class="u-text-center">用户使用须知</view>
				<scroll-view scroll-y class="agreement-content" :style="{ height: (scrollHeight - 110) * 0.70 + 'px' }">
					您描述的内容
				</scroll-view>
				<view class="agreement-btns" :style="{ height: (scrollHeight*0.7 - (scrollHeight - 120) * 0.70) - 42 + 'px' }">
					<navigator class="no-btn text" target="miniProgram" open-type="exit">
						暂不使用
					</navigator>
					<view class="yse-btn text" @tap="admit">同意</view>
				</view>
			</view>
		</uni-popup>

 声明变量

data() {
			return {
				// 内容的高度
				scrollWidth: uni.getSystemInfoSync().windowWidth,
				scrollHeight: uni.getSystemInfoSync().windowHeight,
			}
		}

初始化加载及函数操作

mounted() {
			this.judge();
		},
methods: {
			// 初始化的时候调用参数，判断用户是否第一次进入
			judge() {
				uni.getStorage({
					key:'agreement_key',
					success: () => {
						// 获取到了不显示弹窗
						this.$refs.uPopup.close();
						uni.showTabBar({
							animation: true
						})
					},
					fail: () => {
						uni.hideTabBar({
							animation: true
						})
						this.$refs.uPopup.open('center');
					}
				})
			},
			// 同意按钮
			admit() {
				try{
					uni.setStorageSync('agreement_key', 'yes');
					uni.setStorageSync('agreement_Date', new Date().toLocaleString())
				}catch(e){
					//TODO handle the exception
				}
				this.$refs.uPopup.close();
				uni.showTabBar({
					animation: true
				})
			},
}

css样式：

.line{
	/* line-height: 18px; */
	font-family:Arial,Helvetica,sans-serif;
	font-size:1em;
	vertical-align:middle;
	font-weight:normal
}
.agreement-view{
	margin-top: 20px;
	box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
	border-radius: 20rpx;
	padding: 20rpx 0rpx 0rpx 0rpx;
	display: flex;
	flex-direction: column;
	width: 300px;
	height: 400px;
	align-items: center;
	/* justify-content: center; */
	background-color: #fff;
}
.u-text-center{
	font-size: 15px;
	padding-bottom: 20rpx;
	font-family:Arial,Helvetica,sans-serif;
	font-weight: 600;
	width: 100%;
	height: 30px;
	text-align: center;
}
.agreement-content{
	overflow-y: scroll;
	padding: 0rpx 20rpx 10rpx 20rpx;
}
.agreement-btns{
	width: 100%;
	/* height: 85rpx; */
	display: flex;
	flex-direction: row;
}
.yse-btn{
	color: #fff;
	background-color: red;
	flex: 1;
	text-align: center;
	width: 100%;
	height: 100%;
	border-radius: 0 0 20rpx 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.no-btn{
	/* background-color: aquamarine; */
	flex: 1;
	text-align: center;
	width: 100%;
	height: 100%;
	border-radius: 0 0 0 20rpx;
}
.text{

	line-height: 46px;
}