【Taro】微信小程序关于隐私协议改造

这篇具有很好参考价值的文章主要介绍了【Taro】微信小程序关于隐私协议改造。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

之前微信刚公布要求整改小程序获取用户隐私接口的改造公告那会,Taro还没有支持这方面的更新,于是当时就暂时搁置了一下,后面发现有人回复了我的提问,并且给出了解决方案。按照大佬给出的解决方案试了下,果然可行,所以在此记录分享一下!

首先,当时的帖子在这:微信隐私协议taro的解决方案
 

我这边整理了一下完整的解决方案。

我这边用的是:taro3+ts+taro-ui

小程序的基础调试库切到3.0.0,防止开发者工具报相关API找不到。

【Taro】微信小程序关于隐私协议改造,taro,微信小程序,小程序

其次,执行

npm i @tarojs/plugin-inject -D

安装插件,这个插件在这里的作用是绕过taro的编译,将自定义的属性和方法能够传递到编译后的微信组件上。

//taro组件
<Button abc="123">自定义属性</Button>

//编译后的微信小程序
<button abc="123">自定义属性</button>

然后在app.config.ts文件中,添加

const appConfig = {
  window: {},
  lazyCodeLoading: '',
  requiredPrivateInfos: [],
  permission: {},
  __usePrivacyCheck__:true,//开启隐私校验
}

接着在config/index.js文件夹下,修改小程序的配置,将@tarojs/plugin-inject插件添加到插件配置中去,给taro的Button组件添加自定义方法名“bindagreeprivacyauthorization”,目前taro的最新版本听说已经支持了,但是应该没人敢擅自升级公司的框架版本吧.....我升了下,运行不起来,放弃了。

const config = {
  projectName: "小程序",
  babel: {
    plugins: [
      ['@tarojs/plugin-inject',{
        components:{
          Button:{
            bindagreeprivacyauthorization: ""
          }
        }
      }]
    ]
  },

然后因为我用了ts,所以还需要在项目根目录的global.d.ts文件下对这个Button的ts做添加。如果没用的可以跳过这一步。

declare module '@tarojs/components' {
  export * from '@tarojs/components/types/index';
  import { ComponentType } from 'react';
  import { ButtonProps as OldButtonProps } from '@tarojs/components/types/Button';

  // 修改的Props
  interface ButtonProps extends OldButtonProps {
    bindagreeprivacyauthorization?: any;
  }

  export const Button: ComponentType<ButtonProps>;
}

准备工作就到此结束,下面开始封装隐私协议弹窗。

import { Text, Button } from "@tarojs/components";
import { showToast } from "@tarojs/taro";
import React, { FC, useEffect, useState } from "react";
import { AtModal, AtModalAction, AtModalContent, AtModalHeader } from "taro-ui";
import classes from "./index.module.scss"

interface ModalType {
    onConfirm: any;
    isOpened: boolean;
}
const WxAgreementModal: FC<ModalType> = ({ onConfirm, isOpened }) => {
    //控制隐私协议弹窗
    const [open, setOpen] = useState(false)

    //如果用户取消授权,需要再次唤醒
    useEffect(() => {
        if (isOpened) {
            setOpen(true)
        }
    }, [isOpened])

    //初始化的时候监听是否需要授权
    useEffect(() => {
        wx.getPrivacySetting({
            success: res => {
                console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
                if (res.needAuthorization) {
                    setOpen(true)
                } else {
                    onConfirm('agree')
                }
            },
            fail: () => { },
            complete: () => { },
        })

    }, [])

    //点击隐私协议
    const goWxAgreement = () => {
        wx.openPrivacyContract({
            success: (res) => {
                console.log('打开隐私协议成功', res)
            }, // 打开成功
            fail: (res) => {
                console.error('隐私协议打开失败', res)
            }, // 打开失败
            complete: () => { }
        })
    }

    //用户取消
    const cancelAgreementModal = () => {
        showToast({
            title: '您取消了授权',
            icon: 'none',
            duration: 2000
        })
        setOpen(false)
        onConfirm('disagree')
    }

    //这里微信会同步收到用户同意隐私协议,在这个方法或以后调用涉及用户隐私相关api就可以正常获取了
    const handleAgreePrivacyAuthorization = () => {
        console.log('同意')
    }

    //上面的回调方法打印不了,也就是目前只上报,不作回调,没办法关闭弹窗咱们只能自己设置点击事件关闭弹窗了
    const handleClickConfirm = () => {
        onConfirm('agree')
        setOpen(false)
    }

    return <AtModal
        isOpened={open}
        onClose={cancelAgreementModal}
        closeOnClickOverlay={false}
        className={classes.agreementModal}
    >
        <AtModalContent>
            在你使用【xxxx】小程序服务之前,请仔细阅读<Text style={{ color: '#3b7eff' }} onClick={goWxAgreement}>xxxx隐私保护指引</Text>。如你同意<Text style={{ color: '#3b7eff' }} onClick={goWxAgreement}>xxxx隐私保护指引</Text>,请点击“同意”开始使用【xxxx】。
        </AtModalContent>
        <AtModalAction>
            <Button onClick={cancelAgreementModal}>拒绝</Button>
            <Button id="agree-btn" openType={"agreePrivacyAuthorization" as any} bindagreeprivacyauthorization={handleAgreePrivacyAuthorization} onClick={handleClickConfirm}>同意</Button>
        </AtModalAction>
    </AtModal>
}

export default WxAgreementModal

举例在登录页中使用是这样的

const Home = () =>{
    const [phoneNumberModalVisible, setPoneNumberModalVisible] = useState<boolean>(false)
    const [isAccredit, setIsAccredit] = useState(false);
    const [openAgreement,setOpenAgreement] = useState(false);

    //微信将获取用户手机号的api改成了收费接口,如果是新用户再弹出获取手机号的弹窗
     const getLogin = async () => {
        try {
            if (isAccredit) {
                const res = await request.get('xxxx', { data: { code: getStorageSync('AUTH_CODE') } });
                if (res.success) {
                    const data = res.data || {};
                    if (data.success) {
                        showToast({
                            title: '登录成功',
                            icon: 'success',
                            duration: 2000
                        })
                        setTimeout(() => {
                            navigateBack(-1)
                        }, 2000)
                        return;
                    }

                    // 判断有没有绑定手机号
                    if (!data?.phone) {
                        setPoneNumberModalVisible(true)
                    }
                }
            } else {
                //重新唤醒隐私弹窗
                setOpenAgreement(true)
            }
        } catch (e) {
            console.error(e)
        }
    }

    //查看微信授权
    const handleWxModal = (status) => {
        if (status === 'disagree') {
            setIsAccredit(false)
        } else {
            setIsAccredit(true)
        }
        setOpenAgreement(false)
    }

    //手机号授权回调
    const handleGetPhoneNumber = async e => {
            try {
                const { encryptedData, iv } = e.detail
                if (!encryptedData || !iv) return Promise.reject()
                if (e.detail) {
                    await setStorageSync('Phone', e.detail)
                }
            } catch (err) {
                console.log(err)
            }
    }
  


    return <View>
        <Button onClick={getLogin} >
            手机号快捷登录
        </Button>

        {/* 提示手机绑定 */}
        <AtModal isOpened={phoneNumberModalVisible}>
            <AtModalContent>
                <View>授权绑定您的手机号</View>
            </AtModalContent>
            <AtModalAction>
                <Button onClick={handleReject}>拒绝</Button>
                <Button openType="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
                    允许
                </Button>
            </AtModalAction>
        </AtModal>
           

        {/* 隐私弹窗 */}
        <WxAgreementModal isOpened={openAgreement} onConfirm={handleWxModal} />
    </View>
}

如果登录作为业务必要的入口的话,在登录这里做一下这样的操作,后面不管是再监听用户位置啥的都不需要再授权了 。

另外说一下,微信官方给解决方案

【Taro】微信小程序关于隐私协议改造,taro,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-726967.html

到了这里,关于【Taro】微信小程序关于隐私协议改造的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序+Taro 混编,Taro 使用微信原生 behaviors

    最近有一个小程序项目,因为一些原因项目架构选择了微信小程序原生+Taro 混编的方式进行开发,在开发的过程中发现 Taro 不支持使用原生的 behaviors 特性,因为混编的原因项目当中已有原生页面在使用 behaviors,所以需要一个方案在不影响其他页面的基础上使 Taro 也能使用这

    2024年02月11日
    浏览(41)
  • Taro微信小程序 实现下拉、触底刷新

    下拉刷新, 需要在页面的config文件中配置 enablePullDownRefresh: true, onReachBottomDistance: 50, backgroundTextStyle: \\\'dark\\\', 在代码中使用usePullDownRefresh, 当我们刷新页面时候会触发usePullDownRefresh方法,这里我们获取数据。

    2024年02月11日
    浏览(59)
  • taro 微信小程序写滑动删除左滑

    思路: css写布局,增加过渡效果,逻辑控制哪一条展开,展开项增加展开样式,滑动判断

    2024年02月10日
    浏览(60)
  • 第一个微信小程序 Taro + React

    新建一个文件夹,在该文件夹下打开cmd,执行命令 然后新建一个taro项目 基本上一路回车就可以,可参考下面的选项 打开idea,open该项目 安装依赖 运行小程序

    2024年02月13日
    浏览(40)
  • taro3 微信小程序 createIntersectionObserver 监听无效

    项目: taro3 + vue3 官方文档 版本:3.x Taro.createIntersectionObserver(component, options) 创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中,应使用 this.createIntersectionObserver([options]) 来代替。 支持情况:微信小程序 抖音小程序 H5 React Native Harmony 类型

    2024年02月16日
    浏览(57)
  • 微信小程序--Taro框架实际开发中的问题汇总

    前言:微信小程序相信大家都不陌生,目前小程序开发主流的框架有微信 原生开发 , uni-app ,以及今天的重点 Taro 。编者自身小程序开发经验也不多,仅针对自身在小程序开发中的问题做一次汇总,望更多像我一样的小白少走 一点弯路。 注意:本篇博客中小程序开发基于

    2024年02月16日
    浏览(46)
  • 用Taro做个微信小程序Todo, 小白工作记录

    做微信小程序的框架, 几个比较主流的: 官方的 WePY : https://tencent.github.io/wepy/document.html#/ 美团的 mpvue : http://mpvue.com/mpvue/#-html 京东的 Taro : https://taro.aotu.io/ 前两者都是Vue风格的, Taro是React的. 本篇本着学习的目的, 用Taro做一个简单的小程序. 代码在这里: https://github.com/mengdd/min

    2024年02月21日
    浏览(78)
  • Taro:微信小程序通过获取手机号实现一键登录

            本文介绍如果通过微信小程序的getPhoneNumber方法获取用户微信绑定的手机号并自动注册登录。 1、按钮类型 openType 指定 \\\"getPhoneNumber\\\"   2、@getphonenumber必须全部小写 code:手机号获取凭证:动态令牌。可通过动态令牌换取用户手机号。         后台根据前端传入

    2024年02月16日
    浏览(57)
  • 基于 Taro 框架的微信小程序 canvas 绘图海报组件

    项目需要保存收款码,效果如图: (此文仅代表个人日常工作记录,能力有限描述并不全面) 1.安装 npm i taro-plugin-canvas -S --production(taro-plugin-canvas 是基于 Taro 框架的微信小程序 canvas 绘图组件,封装了常用的操作,通过配置的方式生成分享图片)  2.引入:import { TaroCanvas

    2024年01月21日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包