367 lines
11 KiB
HTML
367 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Soul派对小程序 - 测试二维码</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
||
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
|
||
color: #ffffff;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
width: 100%;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
backdrop-filter: blur(20px);
|
||
border-radius: 32px;
|
||
padding: 60px 40px;
|
||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 50%, #FFA39E 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 20px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.config-info {
|
||
background: rgba(255, 77, 79, 0.1);
|
||
border: 2px solid rgba(255, 77, 79, 0.3);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.config-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #FF4D4F;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.config-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.config-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.config-label {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 16px;
|
||
}
|
||
|
||
.config-value {
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.qrcode-section {
|
||
text-align: center;
|
||
margin: 40px 0;
|
||
}
|
||
|
||
.qrcode-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
margin-bottom: 24px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.qrcode-placeholder {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 16px;
|
||
margin: 0 auto 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.qrcode-icon {
|
||
font-size: 80px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.qrcode-text {
|
||
font-size: 18px;
|
||
color: #666666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.steps {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.steps-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
margin-bottom: 24px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.step {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 24px;
|
||
padding-bottom: 24px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.step:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.step-number {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.step-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.step-desc {
|
||
font-size: 15px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.code-block {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
margin-top: 12px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 14px;
|
||
color: #50fa7b;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.notice {
|
||
background: rgba(255, 193, 7, 0.1);
|
||
border: 2px solid rgba(255, 193, 7, 0.3);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-top: 24px;
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.notice-icon {
|
||
font-size: 32px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.notice-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.notice-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #FFC107;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.notice-text {
|
||
font-size: 15px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.status {
|
||
background: rgba(76, 175, 80, 0.2);
|
||
border: 2px solid rgba(76, 175, 80, 0.5);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 32px;
|
||
text-align: center;
|
||
}
|
||
|
||
.status-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #4CAF50;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="title">Soul派对·创业实验</div>
|
||
<div class="subtitle">微信小程序测试版</div>
|
||
</div>
|
||
|
||
<div class="status">
|
||
<div class="status-icon">✅</div>
|
||
<div class="status-text">配置完成，可以开始测试！</div>
|
||
</div>
|
||
|
||
<div class="config-info">
|
||
<div class="config-title">📋 当前配置</div>
|
||
<div class="config-item">
|
||
<div class="config-label">小程序AppID</div>
|
||
<div class="config-value">wx0976665c3a3d5a7c</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<div class="config-label">API域名</div>
|
||
<div class="config-value">http://kr-soul.lytiao.com</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<div class="config-label">本地开发地址</div>
|
||
<div class="config-value">http://localhost:3000</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<div class="config-label">配置状态</div>
|
||
<div class="config-value">✅ 已完成</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="qrcode-section">
|
||
<div class="qrcode-title">📱 扫码体验小程序</div>
|
||
<div class="qrcode-placeholder">
|
||
<div class="qrcode-icon">📱</div>
|
||
<div class="qrcode-text">请在微信开发者工具中生成预览码</div>
|
||
</div>
|
||
<p style="color: rgba(255, 255, 255, 0.6); font-size: 15px;">
|
||
在开发者工具中点击"预览"按钮，自动生成小程序码
|
||
</p>
|
||
</div>
|
||
|
||
<div class="steps">
|
||
<div class="steps-title">🚀 快速测试步骤</div>
|
||
|
||
<div class="step">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">打开微信开发者工具</div>
|
||
<div class="step-desc">
|
||
选择"导入项目"，导入以下目录：
|
||
<div class="code-block">/Users/karuo/Documents/开发/3、自营项目/一场soul的创业实验/miniprogram</div>
|
||
AppID会自动识别为：wx0976665c3a3d5a7c
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">启用本地调试</div>
|
||
<div class="step-desc">
|
||
点击右上角"详情" → "本地设置" → 勾选"不校验合法域名"<br>
|
||
（这样可以使用本地API: http://localhost:3000）
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">点击编译运行</div>
|
||
<div class="step-desc">
|
||
在模拟器中查看效果，测试所有功能：<br>
|
||
- 首页书籍展示<br>
|
||
- 匹配书友功能<br>
|
||
- 我的页面和分销中心<br>
|
||
- 阅读页面
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-number">4</div>
|
||
<div class="step-content">
|
||
<div class="step-title">真机预览测试</div>
|
||
<div class="step-desc">
|
||
点击工具栏"预览"按钮，生成小程序码<br>
|
||
用微信扫码即可在手机上预览
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notice">
|
||
<div class="notice-icon">⚠️</div>
|
||
<div class="notice-content">
|
||
<div class="notice-title">正式发布前注意事项</div>
|
||
<div class="notice-text">
|
||
1. 必须配置HTTPS证书（小程序要求必须HTTPS）<br>
|
||
2. 在小程序后台配置服务器域名白名单<br>
|
||
3. 将API地址改为：https://kr-soul.lytiao.com/api<br>
|
||
4. 上传代码到微信后台提交审核
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 显示当前时间
|
||
console.log('Soul派对小程序测试页面加载成功');
|
||
console.log('配置时间:', new Date().toLocaleString('zh-CN'));
|
||
</script>
|
||
</body>
|
||
</html>
|