微信小程序自定义隐私协议弹窗

背景：Taro+react+ts构建的小程序项目

        下文Taro.xxx方法基本可以替换为wx.xxx方法，替换后不对的话问问DeepSeek

需求：自定义弹窗，隐私协议找个地方放，通过链接访问

问题：

        1.微信官方弹窗（每当调用接口就会自动弹出，如何防止弹出）

        2.如何自定义弹窗替代官方弹窗（微信官方说无法通过代码同意隐私协议，如何实现）

解决：

一.自定义隐私协议弹窗

1.组件代码

注意：同意隐私协议 按钮需绑定 openType="agreePrivacyAuthorization

// components/PrivacyAgreement/index.tsx
import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import './myModal.scss'

const PrivacyAgreement: React.FC<any> = (props) => {
    const {
        visible = true,
        fristOne,//首次还是更新隐私协议
        onAgree = () => { },
        onDisagree = () => { },
        onViewDetail = () => { },
    } = props

    const [animation, setAnimation] = useState(false)

    useEffect(() => {
        if (visible) {
            setAnimation(true)
        } else {
            setAnimation(false)
        }
    }, [visible])
    
    //同意隐私协议
    const handleAgree = () => {
        onAgree()
    }
    //跳转详情页
    const handleViewDetail = () => {
        onViewDetail()
    }
    //退出小程序
    const onExitMiniProgram = () => {
        onDisagree()
        Taro.exitMiniProgram({
            success() { },
            fail(err) { }
        });
    }

    if (!visible && !animation) return null

    return (
        <View
            className={`privacy-container ${animation ? 'active' : ''}`}
        >
            <View className="privacy-mask" />
            <View className="privacy-content">
                <View className="privacy-header">
                    <Text className="privacy-title">温馨提示</Text>
                </View>

                <View className="privacy-body">
                    {
                        fristOne ? <View className="privacy-text">
                            <Text>如您同意，请点击“同意并继续”并授权登录。</Text>
                        </View> :
                            <View className="privacy-text">
                                <Text>我们进行了更新，请点击“同意并继续”并授权登录。</Text>
                            </View>
                    }
                    <View className="privacy-link" onClick={handleViewDetail}>
                        <Text>《小程序隐私协议》</Text>
                    </View>
                </View>

                <View className="privacy-footer">
                    <Button className="privacy-btn disagree" open-type="exit" onClick={onExitMiniProgram}>退出小程序</Button>
                    <Button
                        className="privacy-btn agree"
                        onClick={handleAgree}
                        openType="agreePrivacyAuthorization"
                    >
                        同意并继续
                    </Button>
                </View>
            </View>
        </View>
    )
}

export default PrivacyAgreement

2.组件样式

注意：如果出现弹窗没覆盖全局，只显示在tabBar上部分

开启弹窗时：隐藏tabBar Taro.hideTabBar()

关闭弹窗时：展示tabBar Taro.showTabBar()

// components/PrivacyAgreement/index.scss
.privacy-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99999;
  
    &.active {
      opacity: 1;
      visibility: visible;
      
      .privacy-content {
        transform: translateY(0);
      }
    }
  }
  
  .privacy-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  
  .privacy-content {
    position: relative;
    width: 100%;
    max-height: 70vh;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 32rpx;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 1002;
  }
  
  .privacy-header {
    margin: 20rpx 0;
  }
  
  .privacy-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  .privacy-body {
    margin-bottom: 20rpx;
  }
  .privacy-text {
    font-size: 26rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10rpx;
  } 
  .clause-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10rpx;
  }
  
  .clause-icon {
    margin-right: 16rpx;
    font-size: 30rpx;
    color: #333;
  }
  
  .clause-text {
    flex: 1;
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }
  
  .privacy-link {
    color: #1777FFFF;
    font-size: 28rpx;
    margin: 30rpx 0;
  }
  
  .privacy-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    margin-bottom: 80rpx;
  }
  
  .privacy-btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 14rpx;
    font-size: 32rpx;
    margin: 0 16rpx;
    
    &::after {
      border: none;
    }
    
    &.disagree {
      background: #f5f5f5;
      color: #666;
    }
    
    &.agree {
        background-color: #1777FFFF;
        color: #FFFFFFFF;
    }
  }

二.什么时候弹窗

在“我的”页加个判断，第一次进来判断下是否同意隐私协议

 wx.getPrivacySetting({ 
            success: res => {
                console.log("zhe是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
                if (res.needAuthorization) {
                    //需要进行同意隐私协议，这里弹出自定义弹窗
                } 
            },
            fail: () => { },
            complete: () => { },
        })