@iscondyliu/wx-privacy

• 解决微信隐私协议弹窗

1、安装

npm install @iscondyliu/wx-privacy
# 或
yarn add @iscondyliu/wx-privacy

2、使用

2.1、引入JavaScript

// app.js 或者 app.ts

import { usePrivacy } from '@iscondyliu/wx-privacy'

usePrivacy({
    title: '瓶子星球隐私保护指引',
    contents: [
        {
            text: '在使用「瓶子星球」服务之前，请仔细阅读',
        },
        {
            text: '《瓶子星球BottlePlanet小程序隐私保护指引》',
            action: 'doOpenPrivacyContract',
            style: { '--text-color': 'red' },
        },
        {
            text: '。如你同意，请点击“同意”开始使用「瓶子星球」。',
        },
    ],
})

2.2、引入组件

// app.json
{
  ...
  "usingComponents": {
      "privacy": "@iscondyliu/wx-privacy/privacy/index",
  },
  ...
}

2.3、使用组件

注意需要写组件id="privacy",如修改,需要同步修改usePrivacy第二个参数

<!-- 需要隐私弹窗页面引入 -->

<!-- 隐私协议 -->
<privacy id="privacy" />

3、API

| 名称 | 说明 | | ---------------------------------------------------- | ------------ | | usePrivacy(info: IPrivacyInfo, componentId?: string) | 隐私弹窗内容 |

4、options

| 参数 | 必填 | 类型 | 默认 | | ----------- | ---- | ------------ | --------- | | info | 否 | IPrivacyInfo | null | | componentId | 否 | string | 'privacy' |

5、types

type ContentStyle = Record<string, string> | string

interface IContentItem {
    text: string
    className?: string
    action?: string
    style?: ContentStyle | ContentStyle[]
}

interface IPrivacyInfo {
    title: string
    contents: IContentItem[]
}

组件 <privacy />

组件属性优先级高于usePrivacy

| 属性 | 必填 | 类型 | 说明 | 默认 | | -------- | ---- | ------ | -------- | ---- | | id | 是 | string | 组件ID | null | | title | 否 | string | 协议标题 | null | | contents | 否 | string | 协议内容 | null |