3***@qq.com
3***@qq.com
  • 发布:2023-08-25 17:55
  • 更新:2023-09-07 14:53
  • 阅读:2455

uni-app 微信小程序隐私代码流程

分类:uni-app

1、app.vue

``` vue  
<template>  
</template>  
<script>  
export default {  
globalData: {  
  PrivacyProtocol: {  
     needAuthorization: true,  
     title: ''  
  }  
},  
  methods: {  
    checkUserPrivacyProtocol() {  
                if (wx.getPrivacySetting) {  
                    wx.getPrivacySetting({  
                        success: res => {  
                            console.log(res)  
                            this.globalData.PrivacyProtocol.needAuthorization = res.needAuthorization  
                            if (res.needAuthorization) {  
                                // 需要弹出隐私协议  
                                this.globalData.PrivacyProtocol.title = res.privacyContractName  
                            }  
                        }  
                    })  
                }  
            }  
}  
  async onLaunch(option) {  
      // 检测用户是否需要提示隐私协议  
      await this.checkUserPrivacyProtocol()  
  },  
}  
</script>

2、使用mixin封装

export default {  
    data() {  
        return {  
            showPrivacyPopup: false, // 是否需要弹出协议  
            PrivacyPopupTitle: '', // 小程序协议名称  
            resolvePrivacyAuthorization: null // wx.onNeedPrivacyAuthorization的回调  
        };  
    },  
    created() {},  
    methods: {  
        // 打开弹窗  
        openPrivacyPopup() {  
            const app = getApp()  
            this.PrivacyPopupTitle = app.globalData.PrivacyProtocol.title  
            this.showPrivacyPopup = true  
        },  
        // 关闭弹窗  
        closePrivacyPopup() {  
            this.showPrivacyPopup = false  
        },  
        // 用户点击同意  
        handleAgreePrivacyAuthorization() {  
            console.log('点击了同意');  
            this.resolvePrivacyAuthorization({  
                buttonId: 'agree-btn',  
                event: 'agree'  
            })  
            this.showPrivacyPopup = false  
        },  
        // 用户点击拒绝  
        handleRefusePrivacyAuthorization() {  
            uni.showModal({  
                content: '如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗?',  
                success: (res) => {  
                    if (res.confirm) {  
                        const app = getApp()  
                        console.log('点击了拒绝', this.resolvePrivacyAuthorization);  
                        this.resolvePrivacyAuthorization({  
                            event: 'disagree'  
                        })  
                        this.closePrivacyPopup()  
                        this.$log.warn(`用户${app.globalData.userInfo?.Name || ''}拒绝了隐私请求,无法使用相关微信的Api`)  
                    }  
                }  
            })  
        },  
        // 打开隐私协议  
        onClickPrivacyPopupTitle() {  
            wx.openPrivacyContract({})  
        },  
        // 监听调用微信api的函数  
        saveWXCallBack() {  
            if (wx.onNeedPrivacyAuthorization) {  
                wx.onNeedPrivacyAuthorization(resolve => {  
                    this.resolvePrivacyAuthorization = resolve  
                    this.openPrivacyPopup()  
                })  
            }  
        }  
    }  
};

3、main.js引入

import PrivacyProtocol from "./utils/PrivacyProtocol.js"  
Vue.mixin(PrivacyProtocol)

4、页面使用

<template>  
    <view class="box">  
               xxxxx  
        <u-popup :show="showPrivacyPopup" :closeOnClickOverlay="false" :round="10" mode="bottom"  
            @close="closePrivacyPopup()">  
            <view style="padding: 40rpx">  
                <p style="text-align: center;margin-bottom: 40rpx;font-size: 20px;font-weight: 700;">提示</p>  
                <text> 在你使用服务之前,请仔细阅读<text @click="onClickPrivacyPopupTitle()"  
                        style="color: #29B7A3;">{{PrivacyPopupTitle}}</text>。如果你同意{{PrivacyPopupTitle}},请点击“同意”开始使用。  
                </text>  
                <view class="display-style" style="margin-top: 40rpx;">  
                    <u-button text="拒绝" @click="handleRefusePrivacyAuthorization()"></u-button>  
                    <button id="agree-btn" class="btn-agree" open-type="agreePrivacyAuthorization"  
                        @agreeprivacyauthorization="handleAgreePrivacyAuthorization()">同意</button>  
                </view>  
            </view>  
        </u-popup>  
    </view>  
</template>  
<script>  
export default {  
  onLoad(option) {  
      this.saveWXCallBack()  
  },  
}  
</script>
2 关注 分享
1***@163.com 1***@qq.com

要回复文章请先登录注册

i***@163.com

i***@163.com

只要用到的页面都加上这个逻辑,太占用空间了.
2023-08-31 17:05
1***@qq.com

1***@qq.com

我写一个弹窗组件,在组件内部访问不到mixins的值。如果不写组件,直接页面写弹窗就能直接访问,为啥呢
2023-08-31 16:10
2***@qq.com

2***@qq.com

回复 3***@qq.com :
新文档中,好像demo去掉了
this.resolvePrivacyAuthorization({
buttonId: 'agree-btn',
event: 'agree'
})

调用会报错【this.resolvePrivacyAuthorization is notafunction】。
参照demo去掉就不报错了。
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/privacy/wx.onNeedPrivacyAuthorization.html。
而且同意后也的确授权了。
2023-08-31 12:13
3***@qq.com

3***@qq.com (作者)

相关问题解答:
1、开发者工具 基础库3.0.0
2、manifest.json在mp-weixin配置"__usePrivacyCheck__": true
3、多页面都有隐私 只需要同意一次就行 其他地方就不用同意了
4、wx.onNeedPrivacyAuthorization不触发回调问题: 必须用到了隐私接口才会触发 比如获取手机号、定位。
5、线上版本2.x.x不会影响 但是尽快适配 但是3.0.0就会收到影响
6、代码中需要写兼容 如果没有wx.onNeedPrivacyAuthorization这些api就需要走原来的流程逻辑(不弹框)
2023-08-25 18:01
1***@163.com

1***@163.com

赞,有时间我去试一下
2023-08-25 17:59