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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容