赞
踩
首先登录小程序公众平台,在【设置-服务内容声明-用户隐私保护指引】,更新隐私协议,在第一条:开发者处理的信息中,点击【增加信息类型】,选择需要授权的信息,头像昵称我已经勾选了,所以列表中不显示了,根据需求选择和填写其他内容,最后确定并生成协议。等待隐私协议审核通过。
先创建一个组件
- <template>
- <view class="privacy" v-if="showPrivacy">
- <view class="content">
- <view class="title">隐私保护指引</view>
- <view class="des">
- 在使用当前小程序服务之前,请仔细阅读<text class="link" @tap="openPrivacyContract">{{ privacyContractName }}</text>。如你同意{{
- privacyContractName }},请点击“同意”开始使用。
- </view>
- <view class="btns">
- <button class="item reject" @tap="exitMiniProgram">拒绝</button>
- <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
- @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
- </view>
- </view>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
- privacyContractName: '《隐私保护引导》',
- showPrivacy: false
- }
- },
- created() {
- this.checkPrivacySetting();
- },
- methods: {
- checkPrivacySetting(){
- uni.getPrivacySetting({
- success: res => {
- console.log("getPrivacySetting",res)
- this.showPrivacy = true
- // needAuthorization是否需要用户授权隐私协议
- // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
- if (res.needAuthorization) {
- // 需要弹出隐私协议
- this.showPrivacy = true
- } else {
- this.showPrivacy = false
- // 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用已声明过的隐私接口
- // wx.getUserProfile()
- // wx.chooseMedia()
- // wx.getClipboardData()
- // wx.startRecord()
- }
- },
- fail: () => {},
- complete: () => {}
- })
-
- },
- // 打开隐私协议
- openPrivacyContract() {
- uni.openPrivacyContract({
- fail: () => {
- uni.showToast({
- title: '遇到错误',
- icon: 'error'
- })
- }
- })
- },
- // 拒绝隐私协议
- exitMiniProgram() {
- console.log("拒绝隐私协议")
- const that = this;
- // 直接退出小程序
- // wx.exitMiniProgram()
- uni.showModal({
- // 如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗?
- content: '您确定要拒绝吗?',
- success: res => {
- if (res.confirm) {
- that.showPrivacy = false;
- uni.exitMiniProgram({
- success: () => {
- console.log('退出小程序成功');
- }
- });
- }
- }
- });
- },
- // 同意隐私协议
- handleAgreePrivacyAuthorization() {
- var that = this;
- wx.requirePrivacyAuthorize({
- success: () => {
- // 用户同意授权
- // 继续小程序逻辑
- that.showPrivacy = false;
- },
- fail: () => {}, // 用户拒绝授权
- complete: () => {}
- })
- }
- }
- }
- </script>
-
- <style scoped> .privacy {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: rgba(0, 0, 0, .5);
- z-index: 9999999;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content {
- width: 632rpx;
- padding: 48rpx;
- box-sizing: border-box;
- background: #fff;
- border-radius: 16rpx;
- }
-
- .content .title {
- text-align: center;
- color: #333;
- font-weight: bold;
- font-size: 32rpx;
- }
-
- .content .des {
- font-size: 26rpx;
- color: #666;
- margin-top: 40rpx;
- text-align: justify;
- line-height: 1.6;
- }
-
- .content .des .link {
- color: #07c160;
- text-decoration: underline;
- }
-
- .btns {
- margin-top: 48rpx;
- display: flex;
- }
-
- .btns .item {
- justify-content: space-between;
- width: 244rpx;
- height: 80rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 16rpx;
- box-sizing: border-box;
- border: none;
- }
-
- .btns .reject {
- background: #f4f4f5;
- color: #909399;
- }
-
- .btns .agree {
- background: #07c160;
- color: #fff;
- }
- </style>
在实际登录页面,引入组件,并调用checkPrivacySetting(),来检查用户是否需要授权隐私协议
- <privacy-pop ref="PrivacyPopck"></privacy-pop>
-
- import PrivacyPop from '../../components/PrivacyPop/PrivacyPop.vue';
- export default {
- name: 'sq-login',
- components:{
- PrivacyPop
- },
- data() {
- return {
- userName:'',
- avatarUrl:'',
- }
- },
- onLoad() {
- //调用组件的检测是否授权方法,就可以了
- this.$refs.PrivacyPopck.checkPrivacySetting();
- },
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。