自定义模式 - 完全自主设计
完全跳过内置 UI，使用您自己的设计和组件，仅调用 RAKUFUN 的一键购买 API。适合需要深度定制的场景。
什么是自定义模式？
自定义模式让您可以：
- 完全控制 UI 外观和交互
- 使用自己的按钮、表单、弹窗等
- 仅在需要时调用
quickBuy()API - 保留自动跳转和数据注入的便利
核心 API：quickBuy()
这是自定义模式的核心方法：
javascript
await rakufun.quickBuy({
title: '商品标题',
price: '价格（数字字符串）',
url: window.location.href,
images: ['图片URL数组'],
description: '商品描述'
});调用后会：
- 验证并保存商品数据
- 跳转到 RAKUFUN 网站
- 自动填充商品信息
最简示例
html
<!DOCTYPE html>
<html>
<head>
<title>自定义购买按钮</title>
</head>
<body>
<h1>精选商品</h1>
<img src="product.jpg" alt="商品图片">
<p class="price">¥26,800</p>
<!-- 您的自定义按钮 -->
<button id="my-buy-button" class="custom-btn">
🛒 立即购买
</button>
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
document.getElementById('my-buy-button').addEventListener('click', async () => {
try {
await rakufun.quickBuy({
title: 'Bose QuietComfort 耳机',
price: '26800',
url: window.location.href,
images: ['product.jpg'],
description: '顶级降噪耳机'
});
} catch (error) {
console.error('购买失败:', error);
alert('购买失败，请重试');
}
});
</script>
</body>
</html>完整商品数据
quickBuy() 支持 13 个字段，越完整越好：
javascript
await rakufun.quickBuy({
// 必填字段
title: "Nintendo Switch OLED",
price: "37980",
url: window.location.href,
// 强烈推荐
images: [
"https://example.com/switch-1.jpg",
"https://example.com/switch-2.jpg"
],
description: "7 英寸 OLED 显示屏，64GB 存储空间",
// 可选字段
brand: "Nintendo",
condition: "全新",
minQuantity: "1",
maxStock: "100",
shippingInfo: "免运费",
deliveryTime: "3-5 个工作日",
precautions: "支持一年保修",
productParameters: "尺寸: 102mm × 242mm × 13.9mm, 重量: 约 320g",
// 自动生成
timestamp: new Date().toISOString()
});错误处理
专业的错误处理模式：
javascript
async function handlePurchase() {
const button = document.getElementById('buy-btn');
const originalText = button.textContent;
try {
button.disabled = true;
button.textContent = '处理中...';
await rakufun.quickBuy({
title: '商品名称',
price: '12800',
url: window.location.href
});
// 成功后会自动跳转，此行通常不会执行
button.textContent = '跳转中...';
} catch (error) {
console.error('购买失败:', error);
// 根据错误类型给出不同提示
switch (error.code) {
case 'VALIDATION_ERROR':
alert('商品信息不完整，请联系客服');
break;
case 'NETWORK_ERROR':
alert('网络错误，请检查连接后重试');
break;
default:
alert('购买失败，请稍后重试');
}
// 恢复按钮状态
button.disabled = false;
button.textContent = originalText;
}
}为什么选择自定义模式？
- ✅ 完全控制 - UI 和交互完全自主
- ✅ 无缝集成 - 融入现有系统
- ✅ 品牌一致 - 保持您的品牌风格
- ✅ 灵活扩展 - 添加任何自定义逻辑
- ✅ 轻量调用 - 仅使用核心 API
与内置模式对比
| 特性 | 自定义模式 | 内置模式 |
|---|---|---|
| UI 控制 | 完全自主 | SDK 提供 |
| 集成难度 | 中等 | 极简 |
| 灵活性 | 最高 | 有限 |
| 开发时间 | 较长 | 最短 |
| 适用场景 | 深度定制 | 快速集成 |
下一步
常见问题
quickBuy 会刷新页面吗？
是的，调用成功后会跳转到 RAKUFUN 网站。确保在跳转前保存必要的状态。
可以在 SPA（单页应用）中使用吗？
完全可以！在 React、Vue、Angular 等框架中都能正常工作：
javascript
// React 示例
function BuyButton({ product }) {
const handleBuy = async () => {
await window.rakufun.quickBuy({
title: product.title,
price: product.price,
url: window.location.href
});
};
return <button onClick={handleBuy}>购买</button>;
}有疑问？联系我们：[email protected]