国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【Taro】微信小程序關(guān)于隱私協(xié)議改造

這篇具有很好參考價(jià)值的文章主要介紹了【Taro】微信小程序關(guān)于隱私協(xié)議改造。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

之前微信剛公布要求整改小程序獲取用戶隱私接口的改造公告那會(huì),Taro還沒有支持這方面的更新,于是當(dāng)時(shí)就暫時(shí)擱置了一下,后面發(fā)現(xiàn)有人回復(fù)了我的提問,并且給出了解決方案。按照大佬給出的解決方案試了下,果然可行,所以在此記錄分享一下!

首先,當(dāng)時(shí)的帖子在這:微信隱私協(xié)議taro的解決方案
?

我這邊整理了一下完整的解決方案。

我這邊用的是:taro3+ts+taro-ui

小程序的基礎(chǔ)調(diào)試庫(kù)切到3.0.0,防止開發(fā)者工具報(bào)相關(guān)API找不到。

【Taro】微信小程序關(guān)于隱私協(xié)議改造,taro,微信小程序,小程序

其次,執(zhí)行

npm i @tarojs/plugin-inject -D

安裝插件,這個(gè)插件在這里的作用是繞過taro的編譯,將自定義的屬性和方法能夠傳遞到編譯后的微信組件上。

//taro組件
<Button abc="123">自定義屬性</Button>

//編譯后的微信小程序
<button abc="123">自定義屬性</button>

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

const appConfig = {
  window: {},
  lazyCodeLoading: '',
  requiredPrivateInfos: [],
  permission: {},
  __usePrivacyCheck__:true,//開啟隱私校驗(yàn)
}

接著在config/index.js文件夾下,修改小程序的配置,將@tarojs/plugin-inject插件添加到插件配置中去,給taro的Button組件添加自定義方法名“bindagreeprivacyauthorization”,目前taro的最新版本聽說已經(jīng)支持了,但是應(yīng)該沒人敢擅自升級(jí)公司的框架版本吧.....我升了下,運(yùn)行不起來,放棄了。

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

然后因?yàn)槲矣昧藅s,所以還需要在項(xiàng)目根目錄的global.d.ts文件下對(duì)這個(gè)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>;
}

準(zhǔn)備工作就到此結(jié)束,下面開始封裝隱私協(xié)議彈窗。

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 }) => {
    //控制隱私協(xié)議彈窗
    const [open, setOpen] = useState(false)

    //如果用戶取消授權(quán),需要再次喚醒
    useEffect(() => {
        if (isOpened) {
            setOpen(true)
        }
    }, [isOpened])

    //初始化的時(shí)候監(jiān)聽是否需要授權(quán)
    useEffect(() => {
        wx.getPrivacySetting({
            success: res => {
                console.log("是否需要授權(quán):", res.needAuthorization, "隱私協(xié)議的名稱為:", res.privacyContractName)
                if (res.needAuthorization) {
                    setOpen(true)
                } else {
                    onConfirm('agree')
                }
            },
            fail: () => { },
            complete: () => { },
        })

    }, [])

    //點(diǎn)擊隱私協(xié)議
    const goWxAgreement = () => {
        wx.openPrivacyContract({
            success: (res) => {
                console.log('打開隱私協(xié)議成功', res)
            }, // 打開成功
            fail: (res) => {
                console.error('隱私協(xié)議打開失敗', res)
            }, // 打開失敗
            complete: () => { }
        })
    }

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

    //這里微信會(huì)同步收到用戶同意隱私協(xié)議,在這個(gè)方法或以后調(diào)用涉及用戶隱私相關(guān)api就可以正常獲取了
    const handleAgreePrivacyAuthorization = () => {
        console.log('同意')
    }

    //上面的回調(diào)方法打印不了,也就是目前只上報(bào),不作回調(diào),沒辦法關(guān)閉彈窗咱們只能自己設(shè)置點(diǎn)擊事件關(guān)閉彈窗了
    const handleClickConfirm = () => {
        onConfirm('agree')
        setOpen(false)
    }

    return <AtModal
        isOpened={open}
        onClose={cancelAgreementModal}
        closeOnClickOverlay={false}
        className={classes.agreementModal}
    >
        <AtModalContent>
            在你使用【xxxx】小程序服務(wù)之前,請(qǐng)仔細(xì)閱讀<Text style={{ color: '#3b7eff' }} onClick={goWxAgreement}>xxxx隱私保護(hù)指引</Text>。如你同意<Text style={{ color: '#3b7eff' }} onClick={goWxAgreement}>xxxx隱私保護(hù)指引</Text>,請(qǐng)點(diǎn)擊“同意”開始使用【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);

    //微信將獲取用戶手機(jī)號(hào)的api改成了收費(fèi)接口,如果是新用戶再?gòu)棾霁@取手機(jī)號(hào)的彈窗
     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;
                    }

                    // 判斷有沒有綁定手機(jī)號(hào)
                    if (!data?.phone) {
                        setPoneNumberModalVisible(true)
                    }
                }
            } else {
                //重新喚醒隱私彈窗
                setOpenAgreement(true)
            }
        } catch (e) {
            console.error(e)
        }
    }

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

    //手機(jī)號(hào)授權(quán)回調(diào)
    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} >
            手機(jī)號(hào)快捷登錄
        </Button>

        {/* 提示手機(jī)綁定 */}
        <AtModal isOpened={phoneNumberModalVisible}>
            <AtModalContent>
                <View>授權(quán)綁定您的手機(jī)號(hào)</View>
            </AtModalContent>
            <AtModalAction>
                <Button onClick={handleReject}>拒絕</Button>
                <Button openType="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
                    允許
                </Button>
            </AtModalAction>
        </AtModal>
           

        {/* 隱私彈窗 */}
        <WxAgreementModal isOpened={openAgreement} onConfirm={handleWxModal} />
    </View>
}

如果登錄作為業(yè)務(wù)必要的入口的話,在登錄這里做一下這樣的操作,后面不管是再監(jiān)聽用戶位置啥的都不需要再授權(quán)了?。

另外說一下,微信官方給解決方案

【Taro】微信小程序關(guān)于隱私協(xié)議改造,taro,微信小程序,小程序文章來源地址http://www.zghlxwxcb.cn/news/detail-726967.html

到了這里,關(guān)于【Taro】微信小程序關(guān)于隱私協(xié)議改造的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

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

    最近有一個(gè)小程序項(xiàng)目,因?yàn)橐恍┰蝽?xiàng)目架構(gòu)選擇了微信小程序原生+Taro 混編的方式進(jìn)行開發(fā),在開發(fā)的過程中發(fā)現(xiàn) Taro 不支持使用原生的 behaviors 特性,因?yàn)榛炀幍脑蝽?xiàng)目當(dāng)中已有原生頁面在使用 behaviors,所以需要一個(gè)方案在不影響其他頁面的基礎(chǔ)上使 Taro 也能使用這

    2024年02月11日
    瀏覽(24)
  • Taro微信小程序 實(shí)現(xiàn)下拉、觸底刷新

    下拉刷新, 需要在頁面的config文件中配置 enablePullDownRefresh: true, onReachBottomDistance: 50, backgroundTextStyle: \\\'dark\\\', 在代碼中使用usePullDownRefresh, 當(dāng)我們刷新頁面時(shí)候會(huì)觸發(fā)usePullDownRefresh方法,這里我們獲取數(shù)據(jù)。

    2024年02月11日
    瀏覽(29)
  • taro 微信小程序?qū)懟瑒?dòng)刪除左滑

    taro 微信小程序?qū)懟瑒?dòng)刪除左滑

    思路: css寫布局,增加過渡效果,邏輯控制哪一條展開,展開項(xiàng)增加展開樣式,滑動(dòng)判斷

    2024年02月10日
    瀏覽(43)
  • 第一個(gè)微信小程序 Taro + React

    第一個(gè)微信小程序 Taro + React

    新建一個(gè)文件夾,在該文件夾下打開cmd,執(zhí)行命令 然后新建一個(gè)taro項(xiàng)目 基本上一路回車就可以,可參考下面的選項(xiàng) 打開idea,open該項(xiàng)目 安裝依賴 運(yùn)行小程序

    2024年02月13日
    瀏覽(24)
  • taro3 微信小程序 createIntersectionObserver 監(jiān)聽無效

    taro3 微信小程序 createIntersectionObserver 監(jiān)聽無效

    項(xiàng)目: taro3 + vue3 官方文檔 版本:3.x Taro.createIntersectionObserver(component, options) 創(chuàng)建并返回一個(gè) IntersectionObserver 對(duì)象實(shí)例。在自定義組件或包含自定義組件的頁面中,應(yīng)使用 this.createIntersectionObserver([options]) 來代替。 支持情況:微信小程序 抖音小程序 H5 React Native Harmony 類型

    2024年02月16日
    瀏覽(36)
  • Taro:微信小程序通過獲取手機(jī)號(hào)實(shí)現(xiàn)一鍵登錄

    ????????本文介紹如果通過微信小程序的getPhoneNumber方法獲取用戶微信綁定的手機(jī)號(hào)并自動(dòng)注冊(cè)登錄。 1、按鈕類型 openType 指定 \\\"getPhoneNumber\\\"?? 2、@getphonenumber必須全部小寫 code:手機(jī)號(hào)獲取憑證:動(dòng)態(tài)令牌。可通過動(dòng)態(tài)令牌換取用戶手機(jī)號(hào)。 ????????后臺(tái)根據(jù)前端傳入

    2024年02月16日
    瀏覽(92)
  • 用Taro做個(gè)微信小程序Todo, 小白工作記錄

    做微信小程序的框架, 幾個(gè)比較主流的: 官方的 WePY : https://tencent.github.io/wepy/document.html#/ 美團(tuán)的 mpvue : http://mpvue.com/mpvue/#-html 京東的 Taro : https://taro.aotu.io/ 前兩者都是Vue風(fēng)格的, Taro是React的. 本篇本著學(xué)習(xí)的目的, 用Taro做一個(gè)簡(jiǎn)單的小程序. 代碼在這里: https://github.com/mengdd/min

    2024年02月21日
    瀏覽(39)
  • 微信小程序--Taro框架實(shí)際開發(fā)中的問題匯總

    微信小程序--Taro框架實(shí)際開發(fā)中的問題匯總

    前言:微信小程序相信大家都不陌生,目前小程序開發(fā)主流的框架有微信 原生開發(fā) , uni-app ,以及今天的重點(diǎn) Taro 。編者自身小程序開發(fā)經(jīng)驗(yàn)也不多,僅針對(duì)自身在小程序開發(fā)中的問題做一次匯總,望更多像我一樣的小白少走 一點(diǎn)彎路。 注意:本篇博客中小程序開發(fā)基于

    2024年02月16日
    瀏覽(22)
  • 基于 Taro 框架的微信小程序 canvas 繪圖海報(bào)組件

    基于 Taro 框架的微信小程序 canvas 繪圖海報(bào)組件

    項(xiàng)目需要保存收款碼,效果如圖: (此文僅代表個(gè)人日常工作記錄,能力有限描述并不全面) 1.安裝 npm i taro-plugin-canvas -S --production(taro-plugin-canvas 是基于 Taro 框架的微信小程序 canvas 繪圖組件,封裝了常用的操作,通過配置的方式生成分享圖片) ?2.引入:import?{?TaroCanvas

    2024年01月21日
    瀏覽(95)
  • 使用taro+canvas實(shí)現(xiàn)微信小程序的圖片分享功能

    使用taro+canvas實(shí)現(xiàn)微信小程序的圖片分享功能

    二輪充電業(yè)務(wù)中,用戶充電完成后在訂單詳情頁展示訂單相關(guān)信息,用戶點(diǎn)擊分享按鈕喚起微信小程序分享菜單,將生成的圖片海報(bào)分享給微信好友或者下載到本地,好友可通過掃描海報(bào)中的二維碼加群領(lǐng)取優(yōu)惠。 使用場(chǎng)景及功能:微信小程序 生成海報(bào)圖片 分享好友 下載圖

    2024年02月05日
    瀏覽(704)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包