给自己的网站添加一个网盘搜索功能

是刘不是牛 教程攻略 10

代码是通过ai写的,有点粗糙,就是将代码放在“自定义js”代码里即可,然后就会在首页右下角显示一个图标,图标可以自定义,点击会唤醒对话框,调用腾讯对话平台的代码,而腾讯对话平台是对接网上免费的网盘搜索api。

截图:

1756050395-20250824234242877-image-92

以下是完整AI写的:

 <script>
document.addEventListener('DOMContentLoaded', () => {
// =========================
// 配置项
// =========================
const CONFIG = {
iconUrl: 'https://i.imgs.ovh/2025/08/24/m5sSt.png', // 悬浮图标 URL
scriptUrl: 'https://chatbot.weixin.qq.com/mmspraiweb_node/dist/static/script/FLOAT_WINDOW_INIT.min.js', // 远程脚本 URL
floatWindowUrl: 'https://chatbot.weixin.qq.com/webapp/VMMaBfwcRFiEV6pLY10zudRdLbXcH8?isFloat=true&robotName=%E7%BD%91%E7%9B%98%E5%8A%A9%E6%89%8B' // 浮窗初始化地址
};
 
// =========================
// 工具函数
// =========================
 
/**
* 动态注入 CSS 样式(防止重复添加)
*/
function injectStyle() {
if (document.getElementById('float-icon-style')) return;
const style = document.createElement('style');
style.id = 'float-icon-style';
style.textContent = `
.float-icon {
position: fixed;
right: 30px;
bottom: 20px;
width: 50px;
height: 50px;
background: url('${CONFIG.iconUrl}') no-repeat center center;
background-size: cover;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
border: none;
outline: none;
}
.float-icon.loading {
background: #f0f0f0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23007aff" stroke-width="5" stroke-dasharray="31.4 31.4" transform="rotate(-90 25 25)"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" from="0 25 25" to="360 25 25"/></circle></svg>') no-repeat center center;
background-size: 30px 30px;
}
`;
document.head.appendChild(style);
}
 
/**
* 动态加载 JS 脚本,返回 Promise
* @param {string} src - 脚本地址
* @returns {Promise<void>}
*/
function loadScript(src) {
return new Promise((resolve, reject) => {
if (document.querySelector(`script[src="${src}"]`)) {
resolve(); // 已加载过,不再重复加载
return;
}
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = resolve;
script.onerror = () => reject(new Error(`加载脚本失败:${src}`));
document.body.appendChild(script);
});
}
 
/**
* 显示错误提示
* @param {string} msg - 错误信息
*/
function showError(msg) {
alert(msg || '加载失败,请稍后再试');
}
 
// =========================
// 核心逻辑
// =========================
 
/**
* 加载浮窗逻辑
*/
function loadFloatWindow() {
const btn = document.querySelector('.float-icon');
if (!btn) return;
 
btn.classList.add('loading'); // 显示加载动画
 
loadScript(CONFIG.scriptUrl)
.then(() => {
btn.classList.remove('loading');
if (typeof window._FLOAT_WINDOWA_INIT_ === 'function') {
window._FLOAT_WINDOWA_INIT_(CONFIG.floatWindowUrl);
} else {
showError('初始化函数未找到,请检查脚本');
}
})
.catch(err => {
btn.classList.remove('loading');
console.error(err);
showError('加载悬浮窗脚本失败');
});
}
 
/**
* 初始化悬浮按钮
*/
function initFloatIcon() {
// 防止重复初始化
if (document.querySelector('.float-icon')) return;
 
injectStyle(); // 注入样式
 
const floatIcon = document.createElement('button');
floatIcon.className = 'float-icon';
floatIcon.setAttribute('aria-label', '打开聊天悬浮窗');
floatIcon.addEventListener('click', loadFloatWindow);
document.body.appendChild(floatIcon);
}
 
// =========================
// 初始化
// =========================
initFloatIcon();
});
</script>

以下是原始腾讯对话平台代码:

动手能力强的小伙伴可以嵌入到自己网站,如果有更好的嵌入方法可以分享以下哦!

 new Promise((r,j)=>{const s=document.createElement('script');s.src='https://chatbot.weixin.qq.com/mmspraiweb_node/dist/static/script/FLOAT_WINDOW_INIT.min.js';s.onload=r;s.onerror=j;document.body.append(s)}).then(()=>window._FLOAT_WINDOWA_INIT_('https://chatbot.weixin.qq.com/webapp/VMMaBfwcRFiEV6pLY10zudRdLbXcH8?isFloat=true&robotName=%E7%BD%91%E7%9B%98%E5%8A%A9%E6%89%8B')).catch(console.error)

回复

我来回复
  • 暂无回复内容

One Nav 导航主题