uniapp 微信小程序之隐私协议开发

uniapp 微信小程序之隐私协议开发


官网通知:https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html

1、配置 __usePrivacyCheck__: true;位置 manifest.json :

json 复制代码
"mp-weixin":{
	"__usePrivacyCheck__": true,
	"requiredPrivateInfos": [ // 权限授权API 示例
		"chooseLocation",
		"getLocation"
	],
}

2、用户隐私保护指引中添加对应的权限,提交审核,位置:微信公众平台->设置->服务内容声明->用户隐私保护指引->更新

3、自定义弹框

html 复制代码
<u-popup v-model="show" mode="bottom" :mask-close-able="false">
    <view style="padding: 14px">
        <view style="padding: 0 0 5px 0">
            {{title}}
        </view>
        <view>
            <view class="content">{{desc1}}</view>
            <view class="content" style="color:blue" @click="openPrivacy">{{urlTitle}}</view>
            <view class="content">{{desc2}}</view>
        </view>
        <view style="display:flex">
            <button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px">拒绝</button>
            <!--当点击同意按钮时就已经触发-->
            <button id="agree-btn" size="mini" type="primary" style="flex: 1" open-type="agreePrivacyAuthorization" v-show="!isAgreePrivacy" @agreeprivacyauthorization="handleAgree">已阅读并同意</button>
        </view>
    </view>
</u-popup>
js 复制代码
data() {
    return {
        show: false, // 弹窗
        title: "用户隐私保护提示",
        desc1: "感谢您使用本程序,您使用本程序前应当阅读并同意",
        urlTitle: "《用户隐私保护协议》",
        desc2: "当您点击已阅读并同意时,即表示您已理解并同意该条款内容。如您拒绝,将无法正常使用。",
        isAgreePrivacy: false,// 是否已同意
        resolvePrivacyAuthorization: null // wx.onNeedPrivacyAuthorization 的回调
    }
}
js 复制代码
// 弹出授权弹窗
openPopup(){
// 查询隐私授权情况
wx.getPrivacySetting({
    success: res => {
        // needAuthorization 是否需要授权
        if (!res.needAuthorization) {
            this.isAgreePrivacy = true
        }
    },
    fail: () => {
    },
})
this.show = true
// 模拟隐私接口调用,并触发隐私弹窗逻辑
// wx.requirePrivacyAuthorize({});
// 监听隐私接口需要用户授权事件。当需要用户进行隐私授权时会触发。触发该事件时,开发者需要弹出隐私协议说明,并在用户同意或拒绝授权后调用回调接口 resolve 触发原隐私接口或组件继续执行
// wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
//     // 需要用户同意隐私授权时
//     // 弹出开发者自定义的隐私授权弹窗
//     console.log(resolve)
//     this.resolvePrivacyAuthorization = resolve
// })
},
// 同意协议
handleAgree() {
    // this.resolvePrivacyAuthorization({
    //     buttonId: 'agree-btn',
    //     event: 'agree'
    // })
    // 如果用户之前已经同意过隐私授权,会立即返回success回调
    wx.requirePrivacyAuthorize({
        success: res => {
            this.show = false;
            this.isAgreePrivacy = true;
        }
    });
},
// 用户隐私协议详情
openPrivacy() {
	// 跳转至隐私协议页面
    wx.openPrivacyContract({})
},
//  关闭弹窗
closePopup() {
	// this.resolvePrivacyAuthorization({
    //     event: 'disagree'
    // })
    this.show = false
}
相关推荐
梦曦i31 分钟前
create-uni-app v1.1.0:结构化生成,工程骨架更规范
前端·uni-app
zww894911140 分钟前
外卖CPS小程序系统:从返利链路到订单回填的技术实现
小程序
lhldsg1 小时前
酒吧点餐小程序开发:从需求分析到技术落地实战
java·前端·小程序·架构·交友
2601_9499506320 小时前
考研英语资料太散?用小程序把真题、词汇和错题放到一起
人工智能·学习·考研·小程序·刷题·小程序推荐
lhldsg1 天前
树洞倾诉的核心需求与产品定位误区
java·前端·小程序
lhldsg1 天前
宠物同城领养平台开发实战:从需求分析到上线部署指南
java·前端·小程序·需求分析·宠物
171320330计算机毕设编程1 天前
基于SpringBoot的在线拍卖系统
android·java·spring boot·小程序·课程设计
2501_916007471 天前
Flutter与游戏App加固避坑指南:如何为混合开发与高交互应用选对安全方案?
安全·flutter·游戏·ios·小程序·uni-app·iphone
PedroQue991 天前
@meng-xi/create-uni-app v1.0.0 正式发布
前端·uni-app
肥仔哥哥19301 天前
uniapp开发App一键登录:从技术选型到前后端落地实战--2秒登录,流失率减半:在uniapp里接入一键登录的全过程
uni-app·一键登录设计选型