简介面向微信小程序初中级开发者的微信步数页面源码以步数展示、排行与个人中心为主要场景提供可直接运行的页面实现适合用于学习原生小程序的页面结构、组件组织与数据绑定也可作为课程设计或功能演示的快速起点。资源共三十二个文件以配置、逻辑、页面结构和样式文件为主附有图片素材与说明文档压缩包仅四百四十五KB整体轻量、目录清晰。页面目录涵盖首页、日志、个人中心等模块全局配置、入口逻辑、工具函数与静态资源配套完整便于对照阅读和二次修改通过工程配置与页面路由配合可以较直观地理解小程序从全局配置到局部样式的组织方式。目前已有八十一人学习浏览适合需要一份精简完整的微信步数页面源码用于参考、改造或继续扩展的开发者。1. 微信步数小程序页面源码这个 zip先拆开看再动手一份“微信步数的微信小程序页面源码.zip”拿到手最常见的操作是急着解压、急着拖进微信开发者工具结果要么报“找不到 app.json”要么授权弹窗根本不出现。这个 zip 代表一类很典型的需求把微信运动步数做进一个小程序页面里包含用户授权、步数拉取、列表渲染和一套能看的样式最后整体打包成 zip 分发给别人。真正要交给毕业设计、外包交付或二次开发的人注意力不该放在解压这个动作上而是这套源码的骨架怎么组织的、要改哪几处、跑不起来时看哪里。这个标题里值得拆的技术点有三个微信步数数据的获取方式wx.getWeRunData、zip 解压后如何被开发者工具正确识别工程结构以及步数列表页的渲染思路。下面按这三条线往下走。2. 微信步数数据从哪来wx.getWeRunData 的权限与返回结构2.1 步数能力只在微信生态内开放前端拿到的其实是密文微信步数不是普通网页能随便读的数据它挂在微信运动WeRun下面微信小程序里的官方入口是wx.getWeRunData。这个方法从基础库 2.2.2 开始支持调用前必须先拿到scope.werun授权。很多刚接触的人会把它当成wx.getSystemInfo那类普通接口以为直接返回 JSON实际上调用成功后返回的是encryptedData、iv和可选的cloudID真实的步数列表必须靠后端解密session_key才能拿到。wx.getWeRunData({ success(res) { // res.encryptedData 是加密串res.iv 是解密偏移量 // 前端直接打印只能看到密文看不到 step 数字 console.log(res.encryptedData, res.iv); }, fail(err) { console.error(未授权或调用失败, err.errMsg); } });这段代码里success回调拿到的encryptedData不是给页面直接用的它需要连同iv一起发给后端由后端使用登录流程中缓存的session_key执行 AES 解密。前端能确认的只有授权状态和调用成败真正与用户相关的步数明细、日期序列化都在服务端完成。这也是步数类小程序的普遍架构前端拉密文给后端后端解密后回传明文列表整个链路里微信只做加密透传。需要区分的是如果你拿到的 zip 工程本身是 uniapp 项目页面里调用的不是wx.getWeRunData而是uni.getWeRunData参数和返回结构一致只是调用方式映射到 uniapp 的 Promise 风格。原生小程序和 uniapp 微信小程序在这一层的差异只有调用前缀后续解密流程完全相同。判断 zip 里是哪套工程看根目录有没有manifest.json有就是 uniapp 项目用 HBuilderX 导入没有就按原生小程序处理直接用微信开发者工具导入。2.2 授权流程scope.werun 的申请与用户拒绝时的兜底步数授权和普通接口授权不一样scope.werun有独立的授权开关。页面一进来就弹授权框是坏设计常见做法是页面加载时不索取权限等用户点了“查看我的步数”按钮再触发。这里最容易写错的是button的open-type拼成open-type或者把设置页入口当成授权入口两者职责完全不同。button open-typeopenSetting bindopensettingonSettingBack去开启微信运动授权/button button bindtaploadStepData查看我的步数/buttonPage({ loadStepData() { wx.getSetting({ success: (res) { if (res.authSetting[scope.werun]) { this.fetchWeRunData(); } else { wx.authorize({ scope: scope.werun }); } } }); }, fetchWeRunData() { wx.getWeRunData({ success: (res) this.sendToDecrypt(res), fail: () wx.showToast({ title: 获取步数失败, icon: none }) }); } });open-typeopenSetting的作用是跳到小程序设置页用户在那里重新打开“微信运动”开关后bindopensetting回调里能拿到最新的authSetting。而wx.authorize只负责弹一次授权框如果用户之前明确拒绝过再调authorize会直接走fail不会再弹框这时必须引导用户回设置页。整个授权逻辑的要点是授权行为要由用户主动触发页面不能强制索取步数权限拒绝后也要有可见的重新开启入口。2.3 返回数据解密后的结构前端能拿到什么后端要做什么解密后的明文数据结构是固定的直接决定页面列表怎么写字段类型说明stepInfoListArray最近 30 天步数列表按时间正序排列stepInfoList[].timestampNumber当天 0 点的时间戳单位是秒stepInfoList[].stepNumber当天总步数单位是步timestamp单位是秒这一点特别容易忽略。前端如果把它直接传给new Date(timestamp)得到的是 1970 年附近的日期正确写法是new Date(timestamp * 1000)。后端解密这一步常见语言都有现成方案Java 用WXBizDataCryptPHP 用官方wxBizDataCrypt.php逻辑都是先校验session_key与iv再按 AES-128-CBC 解出 JSON。密文里只有stepInfoList没有用户名、没有头像步数归属完全依赖用户身份。所以做排行榜、好友对比这类功能时需要自己把解密后的步数关联到openid上存储zip 里的前端源码只能解决展示层数据存储和后端接口必须单独实现。这一点在验收别人交付的步数源码时尤其重要源码里如果没有后端解密接口说明这份 zip 只是半成品。3. 把 zip 解压成微信开发者工具能跑的工程3.1 解压后先检查目录结构不要急着点导入zip 格式在微信小程序源码分发里非常常见但从 zip 变成可运行工程并不是“双击解压、拖进工具”两步就能保证成功。很多源码包从 Gitee、GitHub 或微信开发者社区下载下来文件名带版本号和日期解压后常见两种情况要么顶层多包了一层同名文件夹要么project.config.json不在第一层。建议解压后先看一眼目录结构确认关键文件存在再导入。unzip we-run-source.zip -d we-run-project cd we-run-project ls -la find . -maxdepth 2 -name project.config.json -o -name app.jsonfind命令检查两个关键文件是否在预期层级。正常情况下app.json在小程序根目录project.config.json也在根目录。如果app.json出现在子目录说明项目配置了miniprogramRoot导入目标目录要选到app.json所在的子目录而不是 zip 解压后的根目录。这一步做错工具会直接提示“未找到 app.json 文件”。解压时如果报error read zip archive多半是 zip 下载不完整重新下载后对比文件大小不要依赖压缩软件的“修复压缩包”功能修复出的工程导入后经常缺文件。3.2 导入开发者工具时的三个必填项与常见报错微信开发者工具创建项目时“导入项目”和“新建项目”的差异在于导入会沿用源码自带的project.config.json配置。以下三项填写时最容易出问题表单项填写内容常见错误目录解压后包含app.json的文件夹选成了压缩包本身或外层父目录AppID测试号或自己的小程序 AppID使用测试号时部分能力受限制后端服务按源码选择“不使用云服务”或“微信云开发”源码用了云开发却选了不使用导入后最常看到两类报错。第一类是“没有找到 app.json 文件”目录层级选错解决方法是把目录指向直接包含pages文件夹的那一层。第二类是invalid appid源码里的 AppID 被原作者删掉了或根本不是你的去 mp.weixin.qq.com 申请一个或者用工具登录状态的测试号。另外建议把“ES6 转 ES5”编译选项打开老项目源码常用 async/await新版本基础库默认支持但真机预览出问题时关掉转译对比看看能快速定位语法兼容问题。3.3 微信小程序运行时能下载 zip 吗源码包与运行时的区别这里要澄清一个经常搜到的问题微信小程序页面源码能不能在运行环境里下载 zip 包并在小程序内解压。答案是否定的。项目源码用的 zip 和运行时下载的 zip 是两回事小程序源码 zip 只在开发期导入运行时不解析 zip 文件。运行时下发的静态资源靠微信自己的代码包机制主包和分包体积限制分别是 2MB 和 20MB分包已经足够覆盖大部分资源下发场景。wx.env.user_data_path指向本地用户数据目录它是运行时文件的落盘位置不是开发者解压源码用的路径。所以页面源码 zip 的定位是分发给开发者的人工产物。你自己重新分发工程时要固定目录层级zip 里第一层直接是app.json、app.js、pages不要套一层“we-run-project-master”的壳。我一般会先cd到工程根目录再执行zip -r we-run.zip .保证别人解压后就能直接导入。4. 页面源码核心步数列表页从数据到渲染4.1 日期回填与 stepInfoList 的处理逻辑拿到解密后的stepInfoList页面要做的事通常是展示今天步数和最近 7 天列表。源码里常见的处理逻辑是把秒级时间戳换算成MM-DD字符串再标记出今天做列表翻转后渲染。function formatStepList(list) { const today new Date(); today.setHours(0, 0, 0, 0); // 归零到当天 0 点避免时间干扰比较 return list .filter((item) item.timestamp * 1000 today.getTime() - 6 * 86400000) .map((item) { const date new Date(item.timestamp * 1000); const md ${date.getMonth() 1}-${date.getDate()}; const isToday md ${today.getMonth() 1}-${today.getDate()}; return { step: item.step, date: md, isToday }; }) .reverse(); // 微信返回正序翻转成最新日期在顶部 }filter先取出最近 7 天避免把整个 30 天列表全塞进界面map里做时间戳到日期的换算isToday供列表里高亮当前行today.setHours(0,0,0,0)把当前时间归零再比较避免出现“7 天前同一时刻”的边界误差。这里最典型的 bug 是new Date(item.timestamp * 1000)不乘 1000输出 1970 年日期审查源码第一眼就看这里。reverse放在filter之后是为了视觉上把“今天”放在顶部放在filter之前会导致头尾日期错乱。4.2 WXML 渲染步数卡片与页面样式适配步数小程序的页面设计通常分两块顶部一张带大数字的总步数卡片下面跟一个周列表。WXML 里用wx:for循环渲染列表卡片和列表项都写在同一个页面模板里。view classstep-card text classstep-number{{currentStep}}/text text classstep-label今日步数/text /view view classstep-list view classstep-item {{item.isToday ? active : }} wx:for{{stepList}} wx:keydate text{{item.date}}/text text{{item.step}}/text /view /viewwx:key用date而不是index是因为列表经过reverse后索引不稳定用日期做 key 能保证列表复用正确。currentStep是页面 data 里单独存的今日步数在 JS 计算列表时同步赋值不要在 WXML 里用stepList[0].step翻转后的数组索引不一定是今天。样式上要注意微信小程序的单位体系750rpx 等于设备宽度卡片宽度建议用百分比或 rpx 自适应不少源码写死width: 375px在 iPhone 大屏上左右留白异常这是步数页面设计中最常见的适配问题。4.3 三个高频坑onShow 刷新、时间戳时区、空数据处理步数页面第一个高频坑是刷新时机写在onLoad。微信小程序页面从后台切回前台时不会重跑onLoad用户上午授权后走了几千步切后台再切回来数字不变体验很差。我一般把拉取步数的动作放在onShow配合一个简单的节流开关避免重复请求。第二个坑是时间戳时区。timestamp是当天零点的时间戳微信按东八区返回后端如果拿服务器的 UTC 时间换算日期部署在非东八区时数据会整体偏移 8 小时。稳妥做法是解密后直接用new Date(timestamp * 1000)做本地化展示不要在服务端先格式化成字符串再传给前端。第三个坑是空数据。开发者工具里首次预览wx.getWeRunData经常返回空数组或只有一条数据因为模拟器没有真实微信运动数据。判断空列表时要区分三种情况用户没开启微信运动、当天确实没走路、工具环境无数据。源码里至少要有“暂无数据”的占位视图不能是空白页面。遇到空数据先让用户去微信运动“步数排行榜”看一眼当天有没有产生步数这能排除大多数假故障。5. 改造成自己的项目AppID、分享与重新打包分发5.1 替换 AppID 并重新配置 project.config.json拿到 zip 后第一件改的事是project.config.json里的appid。测试号 AppID 的限制在于部分开放能力不可用云开发服务也需要真实 AppID。替换后重新编译确认开发者工具右上角“详情-基本信息”里 AppID 已经变化否则真机预览时仍是旧身份步数属于别人的用户体系授权逻辑也会异常。如果源码里project.config.json的appid一栏是touristappid说明原作者用游客模式调试过直接替换成自己的 AppID 即可不要保留游客标识。5.2 分享卡片带步数结果onShareAppMessage 的参数设计步数页面有一个适合加在源码上的技巧分享出去时把步数写进标题和路径参数对方点开分享卡片进入页面后直接看到分享者的步数。这也让“微信小程序跳转链接weixin://dl/business从生成到触发的全流程”这类问题有了更简单的答案——页面源码内的分享用onShareAppMessage就够不必动到外部唤起链接那层。onShareAppMessage() { return { title: 我今天走了 ${this.data.currentStep} 步, path: /pages/index/index?fromsharestep${this.data.currentStep} }; }title里带currentStep分享卡片在对话列表里自带数据信息path里带fromshare是给页面做标记的onLoad读取options.step后可以渲染首屏快照。注意currentStep是数字拼进路径前用String()包一层否则 iOS 真机上可能出现undefined文案。页面侧收到fromshare参数时可以隐藏部分引导组件因为对方是从内部链接进来的不需要顶上那条“打开小程序”的提示。5.3 重新打包 zip 的目录层级与验证方式最后重新分发时压缩包里的目录结构决定了下一个人导入是否顺利。在工程根目录执行下面这条命令能排出开发期无用目录zip -r we-run.zip . -x *.git* node_modules/* unpackage/*-x参数排除.git、node_modules、unpackageuniapp 编译产物目录等压缩包体积更小也避免隐藏文件干扰。验证方式是把这个 zip 重新解压到新目录再用微信开发者工具导入一次如果没报error read zip archive、直接看到project.config.json并正常编译说明打包正确。工具里跑通后再把 zip 文件大小核对一遍源码包控制在 1MB 以内为宜。能走到这一步这份“微信步数小程序页面源码 zip”才真正变成可以交付、可以二次开发的东西收到包的人解压即用不用再把时间花在目录层级的排错上。本文还有配套的精品资源点击获取
微信步数小程序源码解析：从wx.getWeRunData到页面渲染
简介面向微信小程序初中级开发者的微信步数页面源码以步数展示、排行与个人中心为主要场景提供可直接运行的页面实现适合用于学习原生小程序的页面结构、组件组织与数据绑定也可作为课程设计或功能演示的快速起点。资源共三十二个文件以配置、逻辑、页面结构和样式文件为主附有图片素材与说明文档压缩包仅四百四十五KB整体轻量、目录清晰。页面目录涵盖首页、日志、个人中心等模块全局配置、入口逻辑、工具函数与静态资源配套完整便于对照阅读和二次修改通过工程配置与页面路由配合可以较直观地理解小程序从全局配置到局部样式的组织方式。目前已有八十一人学习浏览适合需要一份精简完整的微信步数页面源码用于参考、改造或继续扩展的开发者。1. 微信步数小程序页面源码这个 zip先拆开看再动手一份“微信步数的微信小程序页面源码.zip”拿到手最常见的操作是急着解压、急着拖进微信开发者工具结果要么报“找不到 app.json”要么授权弹窗根本不出现。这个 zip 代表一类很典型的需求把微信运动步数做进一个小程序页面里包含用户授权、步数拉取、列表渲染和一套能看的样式最后整体打包成 zip 分发给别人。真正要交给毕业设计、外包交付或二次开发的人注意力不该放在解压这个动作上而是这套源码的骨架怎么组织的、要改哪几处、跑不起来时看哪里。这个标题里值得拆的技术点有三个微信步数数据的获取方式wx.getWeRunData、zip 解压后如何被开发者工具正确识别工程结构以及步数列表页的渲染思路。下面按这三条线往下走。2. 微信步数数据从哪来wx.getWeRunData 的权限与返回结构2.1 步数能力只在微信生态内开放前端拿到的其实是密文微信步数不是普通网页能随便读的数据它挂在微信运动WeRun下面微信小程序里的官方入口是wx.getWeRunData。这个方法从基础库 2.2.2 开始支持调用前必须先拿到scope.werun授权。很多刚接触的人会把它当成wx.getSystemInfo那类普通接口以为直接返回 JSON实际上调用成功后返回的是encryptedData、iv和可选的cloudID真实的步数列表必须靠后端解密session_key才能拿到。wx.getWeRunData({ success(res) { // res.encryptedData 是加密串res.iv 是解密偏移量 // 前端直接打印只能看到密文看不到 step 数字 console.log(res.encryptedData, res.iv); }, fail(err) { console.error(未授权或调用失败, err.errMsg); } });这段代码里success回调拿到的encryptedData不是给页面直接用的它需要连同iv一起发给后端由后端使用登录流程中缓存的session_key执行 AES 解密。前端能确认的只有授权状态和调用成败真正与用户相关的步数明细、日期序列化都在服务端完成。这也是步数类小程序的普遍架构前端拉密文给后端后端解密后回传明文列表整个链路里微信只做加密透传。需要区分的是如果你拿到的 zip 工程本身是 uniapp 项目页面里调用的不是wx.getWeRunData而是uni.getWeRunData参数和返回结构一致只是调用方式映射到 uniapp 的 Promise 风格。原生小程序和 uniapp 微信小程序在这一层的差异只有调用前缀后续解密流程完全相同。判断 zip 里是哪套工程看根目录有没有manifest.json有就是 uniapp 项目用 HBuilderX 导入没有就按原生小程序处理直接用微信开发者工具导入。2.2 授权流程scope.werun 的申请与用户拒绝时的兜底步数授权和普通接口授权不一样scope.werun有独立的授权开关。页面一进来就弹授权框是坏设计常见做法是页面加载时不索取权限等用户点了“查看我的步数”按钮再触发。这里最容易写错的是button的open-type拼成open-type或者把设置页入口当成授权入口两者职责完全不同。button open-typeopenSetting bindopensettingonSettingBack去开启微信运动授权/button button bindtaploadStepData查看我的步数/buttonPage({ loadStepData() { wx.getSetting({ success: (res) { if (res.authSetting[scope.werun]) { this.fetchWeRunData(); } else { wx.authorize({ scope: scope.werun }); } } }); }, fetchWeRunData() { wx.getWeRunData({ success: (res) this.sendToDecrypt(res), fail: () wx.showToast({ title: 获取步数失败, icon: none }) }); } });open-typeopenSetting的作用是跳到小程序设置页用户在那里重新打开“微信运动”开关后bindopensetting回调里能拿到最新的authSetting。而wx.authorize只负责弹一次授权框如果用户之前明确拒绝过再调authorize会直接走fail不会再弹框这时必须引导用户回设置页。整个授权逻辑的要点是授权行为要由用户主动触发页面不能强制索取步数权限拒绝后也要有可见的重新开启入口。2.3 返回数据解密后的结构前端能拿到什么后端要做什么解密后的明文数据结构是固定的直接决定页面列表怎么写字段类型说明stepInfoListArray最近 30 天步数列表按时间正序排列stepInfoList[].timestampNumber当天 0 点的时间戳单位是秒stepInfoList[].stepNumber当天总步数单位是步timestamp单位是秒这一点特别容易忽略。前端如果把它直接传给new Date(timestamp)得到的是 1970 年附近的日期正确写法是new Date(timestamp * 1000)。后端解密这一步常见语言都有现成方案Java 用WXBizDataCryptPHP 用官方wxBizDataCrypt.php逻辑都是先校验session_key与iv再按 AES-128-CBC 解出 JSON。密文里只有stepInfoList没有用户名、没有头像步数归属完全依赖用户身份。所以做排行榜、好友对比这类功能时需要自己把解密后的步数关联到openid上存储zip 里的前端源码只能解决展示层数据存储和后端接口必须单独实现。这一点在验收别人交付的步数源码时尤其重要源码里如果没有后端解密接口说明这份 zip 只是半成品。3. 把 zip 解压成微信开发者工具能跑的工程3.1 解压后先检查目录结构不要急着点导入zip 格式在微信小程序源码分发里非常常见但从 zip 变成可运行工程并不是“双击解压、拖进工具”两步就能保证成功。很多源码包从 Gitee、GitHub 或微信开发者社区下载下来文件名带版本号和日期解压后常见两种情况要么顶层多包了一层同名文件夹要么project.config.json不在第一层。建议解压后先看一眼目录结构确认关键文件存在再导入。unzip we-run-source.zip -d we-run-project cd we-run-project ls -la find . -maxdepth 2 -name project.config.json -o -name app.jsonfind命令检查两个关键文件是否在预期层级。正常情况下app.json在小程序根目录project.config.json也在根目录。如果app.json出现在子目录说明项目配置了miniprogramRoot导入目标目录要选到app.json所在的子目录而不是 zip 解压后的根目录。这一步做错工具会直接提示“未找到 app.json 文件”。解压时如果报error read zip archive多半是 zip 下载不完整重新下载后对比文件大小不要依赖压缩软件的“修复压缩包”功能修复出的工程导入后经常缺文件。3.2 导入开发者工具时的三个必填项与常见报错微信开发者工具创建项目时“导入项目”和“新建项目”的差异在于导入会沿用源码自带的project.config.json配置。以下三项填写时最容易出问题表单项填写内容常见错误目录解压后包含app.json的文件夹选成了压缩包本身或外层父目录AppID测试号或自己的小程序 AppID使用测试号时部分能力受限制后端服务按源码选择“不使用云服务”或“微信云开发”源码用了云开发却选了不使用导入后最常看到两类报错。第一类是“没有找到 app.json 文件”目录层级选错解决方法是把目录指向直接包含pages文件夹的那一层。第二类是invalid appid源码里的 AppID 被原作者删掉了或根本不是你的去 mp.weixin.qq.com 申请一个或者用工具登录状态的测试号。另外建议把“ES6 转 ES5”编译选项打开老项目源码常用 async/await新版本基础库默认支持但真机预览出问题时关掉转译对比看看能快速定位语法兼容问题。3.3 微信小程序运行时能下载 zip 吗源码包与运行时的区别这里要澄清一个经常搜到的问题微信小程序页面源码能不能在运行环境里下载 zip 包并在小程序内解压。答案是否定的。项目源码用的 zip 和运行时下载的 zip 是两回事小程序源码 zip 只在开发期导入运行时不解析 zip 文件。运行时下发的静态资源靠微信自己的代码包机制主包和分包体积限制分别是 2MB 和 20MB分包已经足够覆盖大部分资源下发场景。wx.env.user_data_path指向本地用户数据目录它是运行时文件的落盘位置不是开发者解压源码用的路径。所以页面源码 zip 的定位是分发给开发者的人工产物。你自己重新分发工程时要固定目录层级zip 里第一层直接是app.json、app.js、pages不要套一层“we-run-project-master”的壳。我一般会先cd到工程根目录再执行zip -r we-run.zip .保证别人解压后就能直接导入。4. 页面源码核心步数列表页从数据到渲染4.1 日期回填与 stepInfoList 的处理逻辑拿到解密后的stepInfoList页面要做的事通常是展示今天步数和最近 7 天列表。源码里常见的处理逻辑是把秒级时间戳换算成MM-DD字符串再标记出今天做列表翻转后渲染。function formatStepList(list) { const today new Date(); today.setHours(0, 0, 0, 0); // 归零到当天 0 点避免时间干扰比较 return list .filter((item) item.timestamp * 1000 today.getTime() - 6 * 86400000) .map((item) { const date new Date(item.timestamp * 1000); const md ${date.getMonth() 1}-${date.getDate()}; const isToday md ${today.getMonth() 1}-${today.getDate()}; return { step: item.step, date: md, isToday }; }) .reverse(); // 微信返回正序翻转成最新日期在顶部 }filter先取出最近 7 天避免把整个 30 天列表全塞进界面map里做时间戳到日期的换算isToday供列表里高亮当前行today.setHours(0,0,0,0)把当前时间归零再比较避免出现“7 天前同一时刻”的边界误差。这里最典型的 bug 是new Date(item.timestamp * 1000)不乘 1000输出 1970 年日期审查源码第一眼就看这里。reverse放在filter之后是为了视觉上把“今天”放在顶部放在filter之前会导致头尾日期错乱。4.2 WXML 渲染步数卡片与页面样式适配步数小程序的页面设计通常分两块顶部一张带大数字的总步数卡片下面跟一个周列表。WXML 里用wx:for循环渲染列表卡片和列表项都写在同一个页面模板里。view classstep-card text classstep-number{{currentStep}}/text text classstep-label今日步数/text /view view classstep-list view classstep-item {{item.isToday ? active : }} wx:for{{stepList}} wx:keydate text{{item.date}}/text text{{item.step}}/text /view /viewwx:key用date而不是index是因为列表经过reverse后索引不稳定用日期做 key 能保证列表复用正确。currentStep是页面 data 里单独存的今日步数在 JS 计算列表时同步赋值不要在 WXML 里用stepList[0].step翻转后的数组索引不一定是今天。样式上要注意微信小程序的单位体系750rpx 等于设备宽度卡片宽度建议用百分比或 rpx 自适应不少源码写死width: 375px在 iPhone 大屏上左右留白异常这是步数页面设计中最常见的适配问题。4.3 三个高频坑onShow 刷新、时间戳时区、空数据处理步数页面第一个高频坑是刷新时机写在onLoad。微信小程序页面从后台切回前台时不会重跑onLoad用户上午授权后走了几千步切后台再切回来数字不变体验很差。我一般把拉取步数的动作放在onShow配合一个简单的节流开关避免重复请求。第二个坑是时间戳时区。timestamp是当天零点的时间戳微信按东八区返回后端如果拿服务器的 UTC 时间换算日期部署在非东八区时数据会整体偏移 8 小时。稳妥做法是解密后直接用new Date(timestamp * 1000)做本地化展示不要在服务端先格式化成字符串再传给前端。第三个坑是空数据。开发者工具里首次预览wx.getWeRunData经常返回空数组或只有一条数据因为模拟器没有真实微信运动数据。判断空列表时要区分三种情况用户没开启微信运动、当天确实没走路、工具环境无数据。源码里至少要有“暂无数据”的占位视图不能是空白页面。遇到空数据先让用户去微信运动“步数排行榜”看一眼当天有没有产生步数这能排除大多数假故障。5. 改造成自己的项目AppID、分享与重新打包分发5.1 替换 AppID 并重新配置 project.config.json拿到 zip 后第一件改的事是project.config.json里的appid。测试号 AppID 的限制在于部分开放能力不可用云开发服务也需要真实 AppID。替换后重新编译确认开发者工具右上角“详情-基本信息”里 AppID 已经变化否则真机预览时仍是旧身份步数属于别人的用户体系授权逻辑也会异常。如果源码里project.config.json的appid一栏是touristappid说明原作者用游客模式调试过直接替换成自己的 AppID 即可不要保留游客标识。5.2 分享卡片带步数结果onShareAppMessage 的参数设计步数页面有一个适合加在源码上的技巧分享出去时把步数写进标题和路径参数对方点开分享卡片进入页面后直接看到分享者的步数。这也让“微信小程序跳转链接weixin://dl/business从生成到触发的全流程”这类问题有了更简单的答案——页面源码内的分享用onShareAppMessage就够不必动到外部唤起链接那层。onShareAppMessage() { return { title: 我今天走了 ${this.data.currentStep} 步, path: /pages/index/index?fromsharestep${this.data.currentStep} }; }title里带currentStep分享卡片在对话列表里自带数据信息path里带fromshare是给页面做标记的onLoad读取options.step后可以渲染首屏快照。注意currentStep是数字拼进路径前用String()包一层否则 iOS 真机上可能出现undefined文案。页面侧收到fromshare参数时可以隐藏部分引导组件因为对方是从内部链接进来的不需要顶上那条“打开小程序”的提示。5.3 重新打包 zip 的目录层级与验证方式最后重新分发时压缩包里的目录结构决定了下一个人导入是否顺利。在工程根目录执行下面这条命令能排出开发期无用目录zip -r we-run.zip . -x *.git* node_modules/* unpackage/*-x参数排除.git、node_modules、unpackageuniapp 编译产物目录等压缩包体积更小也避免隐藏文件干扰。验证方式是把这个 zip 重新解压到新目录再用微信开发者工具导入一次如果没报error read zip archive、直接看到project.config.json并正常编译说明打包正确。工具里跑通后再把 zip 文件大小核对一遍源码包控制在 1MB 以内为宜。能走到这一步这份“微信步数小程序页面源码 zip”才真正变成可以交付、可以二次开发的东西收到包的人解压即用不用再把时间花在目录层级的排错上。本文还有配套的精品资源点击获取
