uniapp微信小程序9.15用户隐私协议更新,组件化解决

没怎么写过文档,有疑问可以评论,写的不好勿喷,小菜鸡一枚。

  • 在mainfest.json的源码视图中(mp-weixin下)添加(9月15号后可以不考虑添加)
"__usePrivacyCheck__": true,
  • 创建组件(components中)privacySet,组件中使用了弹出层组件(uni-popup),没有下载的可以自行在官网下载,并在组件中设置如下代码
<template>
	<uni-popup ref="popupPrivacy" type="center">
		<view class="contents">
			<view class="Mask-cnontent">
				<view class="title">用户隐私协议提示</view>
				<view class="text">
					感谢您使用XXX小程序,您在使用小程序前请应当阅读并同意
				</view>
				<view class="privacyText" @click="goRule">
					{{privacyContractName}}
				</view>
				<view class="text">
					当您点击同意并开始时用产品服务时,即表示你已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,部分功能可能将不会展示。
				</view>
				<view class="btn-box">
					<button class="btn-one" id="agree-btn" type="default" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgree">同意协议</button>
					<view class="btn-tow" @click="disagree()">不同意</view>
				</view>

			</view>
		</view>
	</uni-popup>

</template>

<script>
	export default {
		name: "privacySet",
		data() {
			return {
				innerShow: false,
				privacyContractName: '《XXX小程序隐私政策》',

			};
		},
		// 组件创建即执行
		created() {
            //可以视情况关闭
			this.getPrivacySet()

		},
		methods: {
            //查看协议
			goRule: function(e) {
				wx.openPrivacyContract({
					success: res => {
						console.log('隐式协议成功')
					},
					fail: res => {
						console.error('隐式协议失败', res)
					}
				})
			},
			handleAgree() {
				this.$refs.popupPrivacy.close()

			},
            //同意协议
			disagree() {
				this.$refs.popupPrivacy.close()
                //同意协议后本组件调用父组件方法
				this.$emit('initData', true)
				// uni.navigateBack() //可以视情况打开
			},

			// 检测用户是否需要开启权限
			getPrivacySet() {
				var _this = this
				wx.getPrivacySetting({
					success: res => {
						console.log('组件检测授权状况', res)
						if (res.needAuthorization) {
							uni.hideLoading()
							// 需要弹出隐私协议
							_this.showPrivacy = !res.needAuthorization || false
							_this.$nextTick(function() {
								_this.$refs.popupPrivacy.open()
							})
							_this.privacyContractName = res.privacyContractName
						} else {
							// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用隐私接口
							_this.showPrivacy = true
							_this.privacyContractName = res.privacyContractName
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 680rpx;
		// background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;

		// display: ;
		.Mask-cnontent {
			width: 70%;
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				margin-bottom: 15rpx;
			}

			.privacyText {
				color: #C0AD94;
			}

			.text {
				margin: 20rpx 0;
				color: #B5B5B5;

			}

			.btn-box {
				.btn-one {
					margin: 40rpx auto 38rpx;
					width: 400rpx;
					height: 96rpx;
					background-color: #C0AD94;
					box-shadow: -4rpx -8rpx 16rpx 0rpx rgba(255, 255, 255, 0.6),
						4rpx 8rpx 16rpx 0rpx #d3b8a2;
					border-radius: 48rpx;
					font-size: 35rpx;
					line-height: 96rpx;
					letter-spacing: 6rpx;
					text-align: center;
					color: #fff;

				}

				.btn-tow {
					text-align: center;
					font-size: 30rpx;
					line-height: 40rpx;
					text-decoration: underline;
					color: #B5B5B5;

				}

			}
		}
	}
</style>
  • 使用组件
    • 在需要使用的页面且需要在父组件中执行相应的数据加载或权限的获取
<privacySet ref="privacy" @initData="init()"></privacySet>

        如果需要在某些权限获取失败后执行可以在获取权限执行的结果回调中加入

if (res.detail.errMsg == "privacy permission is not authorized") {

	console.log('手机号授权状况', res)
	this.$refs.privacy.getPrivacySet()
	return

}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值