本文提供了两种微信运动步数显示的样式：底部版权处显示和独立页面显示。底部版权处显示样式通过HTML和CSS代码实现，包括一个显示今日运动步数的div元素和一个加载FontAwesome图标库的链接。独立页面显示样式则提供了一个完整的PHP模板，包括获取历史数据的函数、今日步数的显示和历史数据的展示。这些代码可以帮助用户在网站上展示微信运动步数。
底部版权处显示：
<!-- 底部步数显示 -->
<div class="footer-steps" style="margin: 10px 0; color: #666;">
今日运动步数：
<span id="footer-today-steps" style="color: #4CAF50; font-weight: 600;">
<i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
</span>
</div>
<!-- 国内高速CDN加载FontAwesome（替代国外CDN，加速图标加载） -->
<link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/5.15.4/css/all.min.css">
<!-- 底部步数获取脚本（完全移除jQuery依赖，原生JS极速运行） -->
<script>
try {
// 页面加载完成后立即执行（比DOMContentLoaded更快，仅需等待基础DOM解析）
(function() {
// PHP直接渲染数据到JS变量（无需异步请求，最快获取方式）
var todaySteps = <?php
if (class_exists('WeFootStep_Plugin')) {
try {
$db = Typecho_Db::get();
$today = date('Y-m-d');
// 优化SQL查询：只查今日数据，减少数据库压力
$todayStep = $db->fetchRow(
$db->select('step_count')
->from('table.we_foot_step')
->where('date = ?', $today)
->limit(1) // 限制只返回1条，提速
);
echo $todayStep ? (int)$todayStep['step_count'] : 0;
} catch (Exception $e) {
echo "0; console.error('步数获取失败: " . addslashes($e->getMessage()) . "');";
}
} else {
echo "0; console.error('WeFootStep插件未启用');";
}
?>;
// 原生JS快速渲染（无任何依赖，执行速度最快）
var stepElement = document.getElementById('footer-today-steps');
if (stepElement) {
// 轻量数字格式化（无多余逻辑，极速执行）
function formatNum(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
// 直接替换内容，无延迟
stepElement.innerHTML = todaySteps > 0 ? formatNum(todaySteps) : '暂无数据';
}
})();
} catch (e) {
console.error('步数显示错误: ' + e.message);
var stepElement = document.getElementById('footer-today-steps');
if (stepElement) stepElement.textContent = '获取失败';
}
</script>
独立页显示：
<?php
/**
* 步数统计独立页面模板（支持历史数据）
* @package custom
*/
$this->need('header.php');
// 获取历史数据函数
function getStepHistoryData() {
if (class_exists('WeFootStep_Plugin')) {
try {
$db = Typecho_Db::get();
$rows = $db->fetchAll($db->select('date', 'step_count')
->from('table.we_foot_step')
->order('date', Typecho_Db::SORT_DESC)
->limit(30)); // 限制最近30天数据
$history = array();
foreach ($rows as $row) {
$history[$row['date']] = (int)$row['step_count'];
}
return $history;
} catch (Exception $e) {
return array('error' => '数据获取失败: ' . $e->getMessage());
}
}
return array('error' => 'WeFootStep插件未启用');
}
// 获取今日步数
function getTodayStep() {
if (class_exists('WeFootStep_Plugin')) {
try {
$db = Typecho_Db::get();
$today = date('Y-m-d');
$todayStep = $db->fetchRow($db->select('step_count')
->from('table.we_foot_step')
->where('date = ?', $today)
->limit(1));
return $todayStep ? (int)$todayStep['step_count'] : 0;
} catch (Exception $e) {
return 0;
}
}
return 0;
}
// 将历史数据转换为按年月分组的形式
function groupStepsByMonth($historyData) {
$grouped = array();
foreach ($historyData as $date => $steps) {
if ($date === 'error') continue;
$yearMonth = date('Y年m月', strtotime($date));
if (!isset($grouped[$yearMonth])) {
$grouped[$yearMonth] = array();
}
$grouped[$yearMonth][] = array(
'date' => $date,
'day' => date('d日', strtotime($date)),
'steps' => $steps
);
}
// 按月份倒序排序
krsort($grouped);
// 每月内的数据按日期倒序排序
foreach ($grouped as &$monthData) {
usort($monthData, function($a, $b) {
return strtotime($b['date']) - strtotime($a['date']);
});
}
return $grouped;
}
// 获取数据
$todaySteps = getTodayStep();
$historyData = getStepHistoryData();
$groupedData = isset($historyData['error']) ? array() : groupStepsByMonth($historyData);
?>
<div id="mainbox2">
<div class="post" id="post-<?php $this->cid(); ?>">
<!-- 步数统计标题 -->
<div class="archive-header">
<h1>微信运动步数统计</h1>
<p class="archive-desc">实时同步我的运动数据</p>
</div>
<div class="clear"></div>
<div class="entry">
<!-- 今日步数卡片 -->
<div class="step-stats-card today-card">
<div class="step-icon">
<i class="fas fa-walking"></i>
</div>
<div class="step-info">
<div class="step-date"><?php echo date('Y年m月d日'); ?></div>
<div class="step-count" id="today-steps">
<?php echo $todaySteps > 0 ? number_format($todaySteps) : '<span style="color:#999">暂无数据</span>'; ?>
</div>
<div class="step-text">今日步数</div>
</div>
</div>
<!-- 历史数据展示 -->
<div class="step-history-container">
<h2 class="history-title">历史数据</h2>
<?php if (!empty($groupedData)): ?>
<?php foreach ($groupedData as $month => $days): ?>
<div class="month-group">
<h3 class="month-title"><?php echo $month; ?></h3>
<div class="day-list">
<?php foreach ($days as $day): ?>
<div class="day-item">
<span class="day-date"><?php echo $day['day']; ?></span>
<span class="day-steps"><?php echo number_format($day['steps']); ?></span>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
<?php else: ?>
<div class="no-history">
<?php echo isset($historyData['error']) ? $historyData['error'] : '暂无历史数据'; ?>
</div>
<?php endif; ?>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- FontAwesome 图标库 -->
<link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/5.15.4/css/all.min.css">
<style>
.archive-header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
border: 1px solid #eaeaea;
border-radius: 4px;
background: #fff;
}
.archive-header h1 {
font-size: 24px;
color: #4CAF50;
margin: 0;
padding: 0;
}
.archive-desc {
color: #666;
font-size: 14px;
margin: 10px 0 0;
}
/* 卡片基础样式 */
.step-stats-card {
max-width: 400px;
margin: 30px auto;
padding: 30px;
background: #fff;
border-radius: 12px;
/*box-shadow: 0 4px 12px rgba(0,0,0,0.08);*/
display: flex;
align-items: center;
border: 1px solid #eee;
transition: all 0.3s ease;
}
.step-stats-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.step-icon {
font-size: 40px;
color: #000000;
margin-right: 25px;
}
.step-info {
flex: 1;
text-align: center;
}
.step-date {
color: #666;
font-size: 14px;
margin-bottom: 8px;
}
.step-count {
font-size: 32px;
font-weight: 700;
color: #333;
margin: 10px 0;
/*min-height: 40px;*/
}
.step-text {
color: #666;
font-size: 16px;
}
/* 历史数据容器 */
.step-history-container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.history-title {
font-size: 20px;
color: #333;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/* 月份分组样式 */
.month-group {
margin-bottom: 30px;
}
.month-title {
font-size: 18px;
color: #000000;
margin: 15px 0;
padding-left: 10px;
border-left: 3px solid #000000;
}
/* 每日数据项 */
.day-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
}
.day-item {
padding: 12px;
background: #f9f9f9;
border-radius: 6px;
text-align: center;
transition: all 0.2s;
}
/*.day-item:hover {*/
/* background: #4CAF50;*/
/* color: white;*/
/* transform: scale(1.03);*/
/*}*/
.day-date {
display: block;
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
/*.day-item:hover .day-date {*/
/* color: white;*/
/*}*/
.day-steps {
display: block;
font-size: 18px;
font-weight: bold;
}
.no-history {
text-align: center;
padding: 30px;
color: #999;
}
@media (max-width: 768px) {
.step-stats-card {
margin: 20px;
padding: 20px;
}
.step-icon {
font-size: 32px;
margin-right: 15px;
}
.step-count {
font-size: 26px;
}
.step-history-container {
margin: 20px;
padding: 15px;
}
.day-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.day-list {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
<?php $this->need('footer.php'); ?>