uniapp實(shí)現(xiàn)微信小程序隱私協(xié)議組件封裝。

<template>
	<view class="diygw-modal basic" v-if="showPrivacy" :class="showPrivacy?'show':''" style="z-index: 1000000">
		<view class="diygw-dialog diygw-dialog-modal basis-lg">
			<view class="justify-end diygw-bar">
				<view class="content"> {{title}} </view>
			</view>
			<view>
				<view class="flex diygw-dialog-content flex-direction-column privacy-content">
					<view class="diygw-col-24"> {{contentstart}}<text :style="{color:agreebg}"  @tap="handleOpenPrivacyContract">{{privacy}}</text>。{{contentend}} </view>
					<view class="flex diygw-col-24">
						<button id="agree-btn" :style="{background:agreebg,color:agreecolor}" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree" class="diygw-btn  radius flex-sub margin-xs">同意并繼續(xù)</button>
					</view>
					<view class="flex diygw-col-24">
						<button id="disagree-btn" :style="{background:disagreebg,color:disagreecolor}" class="diygw-btn  radius flex-sub margin-xs" @tap="handleDisagree">不同意</button>
					</view>
				</view>
			</view>
		</view>	
	</view> 
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '用戶隱私保護(hù)提示'
			},
			contentstart:{
				type: String,
				default:'親愛的用戶，感謝您信任并使用本小程序。請您在點(diǎn)擊同意之前仔細(xì)閱讀并充分理解',
			},
			privacy:{
				type: String,
				default:'《用戶隱私保護(hù)指引》',
			},
			contentend:{
				type: String,
				default:'當(dāng)點(diǎn)擊同意并繼續(xù)時(shí)，即表示您已理解并同意該條款內(nèi)容，該條款將對您產(chǎn)生法律約束力；如您不同意，將無法繼續(xù)使用小程序相關(guān)功能。',
			},
			agreebg:{
				type: String,
				default:'#07c160',
			},
			agreecolor:{
				type: String,
				default:'#fff',
			},
			disagreebg:{
				type: String,
				default:'#aaaaaa',
			},
			disagreecolor:{
				type: String,
				default:'#fff',
			},
			isexit:{
				type:Boolean,
				default:true
			},
		},
		data() {
			return {
				showPrivacy: false,
				resolvePrivacyAuthorization: null,
				privacyResolves: new Set()
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			// 監(jiān)聽何時(shí)需要提示用戶閱讀隱私政策
			init() {
				let thiz = this;
				// #ifdef MP-WEIXIN
				if (wx.onNeedPrivacyAuthorization) {
					wx.requirePrivacyAuthorize({
						success: (e) => {
							// 用戶同意授權(quán)
							// 繼續(xù)小程序邏輯
							console.log(e)
						  // 用戶同意授權(quán)
						  // 繼續(xù)小程序邏輯
						},
						fail: (e) => {
							console.log(e)
						}, // 用戶拒絕授權(quán)
						complete: () => {}
					})
					wx.onNeedPrivacyAuthorization((resolve) => {
						thiz.resolvePrivacyAuthorization = resolve
						thiz.openPrivacy()
					})
				}
				// #endif
			},
			//打開隱私協(xié)議
			openPrivacyContract() {
				wx.openPrivacyContract({
					success(res) {
						console.log('打開隱私協(xié)議', res);
					},
					fail(err) {
						console.error('打開隱私協(xié)議失敗', err)
					}
				});
			},
			// 不同意
			handleDisagree() {
				this.resolvePrivacyAuthorization({
						event: 'disagree',
						buttonId: 'disagree-btn'
				});
				//關(guān)閉彈窗
				this.disopenPrivacy()
				if(this.isexit){
					//退出小程序
					wx.exitMiniProgram();
				}
				
			},
			// 同意并繼續(xù)
			handleAgree() {
				this.resolvePrivacyAuthorization({
						event: 'agree',
						buttonId: 'agree-btn'
				});
				//關(guān)閉彈窗
				this.disopenPrivacy()
			},
			//打開彈窗
			openPrivacy() {
				if (this.showPrivacy === false) {
					this.showPrivacy = true
				}
			},
			//關(guān)閉彈窗
			disopenPrivacy() {
				if (this.showPrivacy === true) {
					this.showPrivacy = false
				}
			},
		}
	}
</script>

<style>
	.privacy-content{
		padding:10px;
		line-height: 1.5;
		font-size: 28rpx;
	}
</style>

隱私協(xié)議封裝組件后快速調(diào)用。

<diy-privacy></diy-privacy>文章來源地址http://www.zghlxwxcb.cn/news/detail-728116.html

到了這里，關(guān)于uniapp實(shí)現(xiàn)微信小程序隱私協(xié)議組件封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！