h5調起小紅書的分享 js-sdk

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #tips {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            /* height: 100vw; */
            display: none;
        }

        #tips img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div>
        <div id="tips">
            <img src="./tips.png" alt="提示">
        </div>
    </div>
</body>
<script src="https://fe-static.xhscdn.com/biz-static/goten/xhs-1.0.1.js"></script>
<script>
    var u = navigator.userAgent.toLowerCase();
    let isAndroid = isAdr();
    let isWx = isWeixin();

    let params = {
        storeId: 0,
        themeId: 0
    };

    //安卓 在微信瀏覽器
    if (isAndroid && isWx) {
        //打開提示 安卓端提示在默認瀏覽器打開
        document.getElementById("tips").style.display = 'block';
    } else {
        goFun();
    }

    /**
     * 執行方法 
    */
    async function goFun() {
        await getParams();
        let data = await getConfig();
        xhsFn(data.data, data.shareInfo);
    }

    /**
     * 判斷是否是安卓
    */
    function isAdr() {
        let isAndroid = u.indexOf('android') > -1 || u.indexOf('adr') > -1; //android終端
        return isAndroid
    }
    /**
     * 判斷是否在微信瀏覽器
    */
    function isWeixin() {
        if (u.indexOf('micromessenger') !== -1) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 獲取路徑上的參數
    */
    function getParams() {
        return new Promise((resolve) => {
            //從地址中獲取 門店ID和主題ID
            const urlParams = new URLSearchParams(window.location.search);
            for (const [key, value] of urlParams.entries()) {
                params[key] = value;
            }
            resolve();
        })

    }

    /**
     * 獲取數據
    */
    function getConfig() {
        return new Promise((resolve) => {
            // 目標URL
            const url = `請求接口`;
            // 發送GET請求
            fetch(url)
                .then(response => {
                    // 確保響應成功（狀態碼在200-299）
                    if (!response.ok) {
                        throw new Error('Network response was not ok ' + response.statusText);
                    }
                    return response.json(); // 解析JSON
                })
                .then(data => {
                    resolve(data)
                })
                .catch(error => {
                    console.error('There has been a problem with your fetch operation:', error); // 處理錯誤
                });
        })

    }

    /**
     * 調起小紅書的API
     */
    function xhsFn(data, shareInfo) {
        let images = shareInfo.images.filter(v => v);//判斷圖片存在
        xhs.share({
            shareInfo: {
                type: 'normal', // 必填，筆記類型 'video' | 'normal'
                title: shareInfo.title, // 筆記標題
                content: shareInfo.content, // 筆記正文
                images, //圖文類型必填，筆記圖片，必須是服務器地址，暫時不支持本地文件
                video: '', // 視頻類型必填，必須是服務器地址
                cover: '' // 視頻封面圖，必須是服務器地址，暫時不支持本地文件
            },
            verifyConfig: data,
            fail: (e) => {
                // 調用失敗時執行的回調函數
                console.log(e)
            },
        })
    }


</script>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容