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

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

要回复文章请先登录注册

爱豆豆

爱豆豆

回复 1***@163.com :
resolvePrivacyAuthorization反正是空的 我在上面声明了一下 然后赋值了 也没报错 等到15号看看效果
2023-09-07 14:53
1***@163.com

1***@163.com

回复 爱豆豆 :
resolvePrivacyAuthorization是通过wx.onNeedPrivacyAuthorization是回调赋值的,v3直接复制就可以了吧
2023-09-07 12:10
爱豆豆

爱豆豆

uniapp vue3的写法中
如何使用微信提供的this.resolvePrivacyAuthorization这个方法
2023-09-07 11:35
一个人的江湖

一个人的江湖

回复 1***@wo.cn :
应该是要先在微信后台配置隐私保护指引吧
2023-09-06 15:12
3***@qq.com

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

回复 1***@qq.com :
我看官网的button组件已经有了 你试试呢 不行更新下hbuilder
2023-09-05 17:54
1***@qq.com

1***@qq.com

现在我的hbuilder上,button的open type中还没有隐私这个,是不是需要等官方更新hbuilder了才能用?
2023-09-05 16:54
3***@qq.com

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

回复 1***@qq.com :
我也是
2023-09-05 13:34
3***@qq.com

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

回复 i***@163.com :
你自己可以封装
到时候只需要
<components 同意事件=“” 拒绝事件=""/>
2023-09-05 13:33
3***@qq.com

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

回复 1***@wo.cn :
基础库版本过低
2023-09-05 11:50
1***@wo.cn

1***@wo.cn

o.getPrivacySetting is not a function . 是啥意思
2023-09-04 18:19