简介微信步数小程序页面源码是一份面向微信小程序初学者与前端开发者的可直接运行的项目模板专注步数展示、个人中心等常见页面场景导入微信开发者工具即可预览效果。压缩包共 32 个文件大小约 445KB主要包含 json 配置文件、js 逻辑脚本、wxss 样式表、wxml 页面结构及 PNG/JPG 图片素材另有 README 说明文档页面、组件与公共工具函数分层清晰整体体积小巧便于按需裁剪与快速定位。已有 81 人学习/下载。通过学习这份源码可以了解小程序从 app.json 全局注册、app.js 启动逻辑到页面路由与视图渲染的完整组织方式也能熟悉 WXML 视图层与 JS 逻辑层的配合写法内部包含多个功能页面、工具函数与相关图片资源可直接运行体验也可将数据替换为自己的步数接口作为二次开发基础模板。适合课程设计、毕业设计或日常练习能有效节省从零搭建基础架构的时间是上手微信小程序开发的一份实用参考。1. 拿到“微信步数的微信小程序页面源码.zip”后先别急着解压导入当你从网盘或资源站下载到“微信步数的微信小程序页面源码.zip”第一反应往往是解压后拖进微信开发者工具结果页面要么白屏要么步数永远是 0。这不是压缩包坏了而是步数页面和你以前写的“新闻列表”“待办事项”不一样它依赖微信运动授权、加密数据解密以及真机上“微信运动”功能本身是开启的。解压 zip 只是把 UI 和业务代码放到了本地数据链路里还藏着 scope.werun、encryptedData、session_key 解密、近 7 天步数图表绘制这几个独立环节。下面按一个步数页面从 ZIP 到能提交审核的路径讲覆盖目录结构、权限参数、页面注册、图表展示和上线前检查。适合正在改步数打卡、运动排行、健身激励类小程序的人也适合想把手里的“页面源码.zip”改成自己项目的人。2. 微信步数页面的数据层wx.getWeRunData 的授权与解密2.1 前置条件scope.werun 授权与微信运动开关微信步数不是随便一个页面就能读出来的。页面调用微信运动数据之前需要同时满足三个条件当前微信已启用“微信运动”功能用户点击操作触发授权用户没有在设置中关闭过对应权限。三者缺一wx.getWeRunData都会走到 fail 分支。先看授权判断的常规写法。代码里用wx.getSetting读取authSetting[scope.werun]值为true说明已经授权直接取数值为undefined说明还没弹过授权框可以引导用户点击按钮值为false说明用户之前拒绝过此时不能再次调用wx.authorize只能引导去wx.openSetting。这是小程序权限模型的一个常见误区拒绝后调用wx.authorize不会重新弹窗只会直接失败。步骤上通常是页面加载时先wx.getSetting检查授权状态未授权时在页面上放一个“授权微信运动”按钮点击后调用wx.authorize({ scope: scope.werun })失败时展示提示并提供“去设置”入口授权成功后调用wx.getWeRunData。还要注意“微信运动”这个总开关。部分用户关注了“微信运动”公众号但从未启用授权弹窗可能不会出现或者调用后返回fail。常见做法是在 fail 回调里弹一个wx.showModal提示“需要到微信的 设置-通用-辅助功能-微信运动 中启用”比直接静默失败对用户友好得多。2.2 最小可运行代码从按钮授权到页面显示今日步数下面这一段是可以直接放进pages/steps/steps.js的最小实现。它不做复杂 UI只保证授权、取数、把今日步数和近 7 天步数放到页面数据里。// pages/steps/steps.js Page({ data: { authorized: false, // 是否已获得 scope.werun 授权 todayStep: 0, // 今日步数 weekSteps: [], // 近 7 天步数 loading: false }, onLoad() { this.checkWeRunAuth(); }, checkWeRunAuth() { wx.getSetting({ success: (res) { const auth res.authSetting[scope.werun]; if (auth true) { this.setData({ authorized: true }); this.loadSteps(); } else { this.setData({ authorized: false }); } } }); }, requestWeRunAuth() { // wx.authorize 必须在用户点击回调里触发不能在 onLoad 直接调用 wx.authorize({ scope: scope.werun, success: () { this.setData({ authorized: true }); this.loadSteps(); }, fail: () { wx.showToast({ title: 未授权微信运动无法读取步数, icon: none }); } }); }, openSetting() { wx.openSetting(); }, loadSteps() { this.setData({ loading: true }); wx.getWeRunData({ success: (res) { // res.encryptedData 是加密串需要小程序服务端用 session_key 解密 this.sendToBackend(res.encryptedData, res.iv); }, fail: (err) { console.error(wx.getWeRunData 失败, err); this.setData({ loading: false }); } }); }, sendToBackend(encryptedData, iv) { // 用 wx.login 的 code 去后端换 session_key再进行解密 wx.login({ success: (loginRes) { wx.request({ url: https://your-api.example.com/decrypt-werun, method: POST, data: { code: loginRes.code, encryptedData: encryptedData, iv: iv }, success: (resp) { const stepInfoList resp.data.stepInfoList || []; stepInfoList.sort((a, b) a.timestamp - b.timestamp); const today stepInfoList.length ? stepInfoList[stepInfoList.length - 1].step : 0; this.setData({ todayStep: today, weekSteps: stepInfoList.slice(-7).map((item) item.step), loading: false }); }, fail: () { this.setData({ loading: false }); wx.showToast({ title: 步数解析失败, icon: none }); } }); } }); } });这段代码的思路是先确认授权再请求原始加密数据拿到encryptedData和iv后配合wx.login返回的code交给服务端。服务端拿code换session_key用 AES-128-CBC 解密得到stepInfoList后再返回给小程序端。stepInfoList按时间升序排列所以最后一组是今天slice(-7)取到最近 7 天用于页面的折线图。我在实际项目里会再加一层判断stepInfoList可能因为微信运动还没有记录今天的数据而只有 6 条这时“今天”取最后一条会显示成昨天的步数。更保险的做法是先看最后一条的timestamp对应的日期是不是今天不是今天就显示 0而不是直接拿最后一条。2.3 返回结构、解密边界与调用频率控制wx.getWeRunData成功回调里的字段并不直接包含步数它包含的是密文。下面这张表整理了解密前后的关键字段数据阶段字段类型说明授权状态scope.werunboolean/undefinedtrue 表示已授权false 为拒绝undefined 为未询问接口回调encryptedDatastring加密后的微信运动数据接口回调ivstringAES 解密需要的偏移量接口回调errMsgstring调用结果描述解密后stepInfoList[].timestampnumber当天 0 点的 Unix 时间戳单位秒解密后stepInfoList[].stepnumber当天总步数数据范围--最近 30 天常见实现取最近 7 天展示解密这一步必须放在可信服务端或云函数里。小程序端拿不到session_key也不应该把session_key下发到前端。session_key会随着登录态更换而失效一旦泄露别人可以解密该用户的运动数据和 openid属于比较典型的安全事故。关于调用频率微信官方没有给出像wx.getUserProfile那样明确的次数限制但不建议在onLoad、onShow、onPullDownRefresh里各调一次。常见做法是页面展示时读缓存进入前台时最多拉一次并且把timestamp为当天的结果缓存到wx.setStorageSync否则用户每次切后台再回来都会触发一次解密请求。后端也要按openid 日期做幂等缓存重复请求直接返回上一次结果。提示开发者工具里wx.getWeRunData不一定能拿到真实步数。模拟器没有“微信运动”环境经常返回 fail 或空数据。判断功能是否正常最终要在真机调试里看。3. 把微信步数页面源码.zip 展开成可运行项目目录结构与导入3.1 先看 ZIP 目录再决定从哪一页开始调试很多从网盘下到的微信步数的微信小程序页面源码.zip外层还套着一层同名的文件夹。直接解压到桌面后开发者工具“导入项目”时选错目录会提示找不到project.config.json。所以先列目录比解压动作本身更重要。unzip -l 微信步数的微信小程序页面源码.zip | head -40如果你的系统是 Windows可以用 7-Zip 打开压缩包先看结构不急着解压。常见的三种结构分别是根目录直接是app.json、pages、project.config.json根目录里还有一个项目名文件夹真正的代码在里层还有一种是从 uni-app 或原生模板转换出来的外层是src/里面可能是pages.json而不是app.json。压缩包结构处理方式根目录有 app.json、pages/解压后直接导入根目录只有项目名/ 一层目录导入时指定miniprogramRoot到内层根目录有 src/pages.json、manifest.json先用 HBuilderX 发行成微信小程序再导入产物目录第一种最常见解压后直接作为项目根目录导入。第二种需要在开发者工具里把miniprogramRoot指向里层目录。第三种如果出现pages.json那说明不是原生微信小程序项目不能直接导入微信开发者工具需要先用 HBuilderX 打开再“发行 - 小程序-微信”生成一份带app.json的dist/build/mp-weixin目录然后导入那个产物目录。很多人卡在这一步是因为把 uni-app 的源码目录当成了原生微信小程序源码。拿到源码头一件事我会先找app.json看它的pages第一个元素是什么。这个页面是启动页决定了你打开小程序第一眼看到的内容。如果压缩包里同时有pages/index和pages/steps但app.json里只注册了index那步数页面就只能在开发者工具里手动编译到那个页面不能直接通过首页跳转。3.2 导入开发者工具时需要确认的三个配置打开微信开发者工具选择“导入项目”填项目目录后工具会根据project.config.json里的内容生成配置。老 zip 里的配置文件经常带有作者自己的appid直接导入会报“appid 不存在”或“无权限”。我一般会先改成自己的配置{ appid: touristappid, compileType: miniprogram, projectname: we-run-steps, setting: { urlCheck: false, es6: true, postcss: true, minified: true } }这里几个参数分别解决不同问题appid在开发阶段可以用touristappid测试号先跑通 UI但wx.getWeRunData要验证真实步数建议换成自己注册的小程序 AppID否则真机预览时部分接口可能不可用。urlCheck改成false后开发者工具和真机调试都允许请求任意域名适合本地连后端联调但提交体验版和正式版前要关掉并在小程序后台配置合法域名。es6开启 ES6 转 ES5避免旧手机出现模板字符串和箭头函数不兼容minified是代码压缩正式构建时建议打开。除了显式声明为touristappid也可以选择“测试号”。区别是测试号没有独立 AppID无法使用需要真实主体的接口和用户信息能力适合只验证页面效果。源码 zip 里偶尔会带着project.private.config.json这个文件是当前机器私有的可以删除里面可能包含本机路径和调试开关。3.3 页面注册与 tabBar为什么首页白屏如果源码里的步数页面有自己的pages/steps/steps目录但你把它放到一个已经有首页的项目里最容易犯的错误是只复制了.wxml、.wxss、.js、.json却没有在app.json里注册页面。结果是开发者工具提示“page not found”或者跳转时白屏。{ pages: [ pages/index/index, pages/steps/steps ], window: { navigationBarTitleText: 微信步数, navigationBarBackgroundColor: #1a1a1a, navigationBarTextStyle: white, backgroundColor: #f5f5f5 }, tabBar: { color: #999999, selectedColor: #07c160, backgroundColor: #ffffff, list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/steps/steps, text: 步数 } ] }, lazyCodeLoading: requiredComponents }pages数组的顺序就是启动优先级第一个为首页。如果只想让步数页面作为独立页不参与 tabBar直接从pages里去掉tabBar字段即可。lazyCodeLoading对应的值requiredComponents是官方推荐配置让微信小程序按需注入组件减少冷启动时间旧源码没有这个字段加上不会影响功能但要注意基础库版本需要 2.11.1 以上。另一个容易忽略的是navigationBarTitleText很多 zip 里的标题是“首页”或“项目名”改成本页面的“微信步数”或“我的运动”更符合实际使用场景。注意permission字段在app.json只用于位置类接口scope.werun不需要在这里声明。一定不要把scope.werun写进permission写了也不会弹授权只会给你自己造成“为什么没效果”的困惑。4. 微信步数页面如何展示数据canvas 2d 画近 7 天趋势与分享卡片4.1 为什么步数页面不适合用一堆 view 模拟柱状图把近 7 天步数画出来最直接的想法是用 7 个view撑出不同高度。步数少的时候页面 DOM 确实不高但一旦后面要加 30 天趋势、要加触摸提示和坐标轴view方案的计算会越写越乱。canvas 的优势是坐标系直接对应像素画折线、填充面积、标注峰值都只跟坐标有关不依赖 flex 布局。微信小程序的 canvas 分成两代老代码里常见canvas canvas-idstepChart stylewidth:300px;height:200px;/canvas配合wx.createCanvasContext(stepChart)。新基础库更推荐canvas type2d idstepChart通过SelectorQuery拿到node后走标准 Canvas 2D 接口。zip 里的老代码还能跑但在新手机的高分辨率下容易出现模糊因为老接口没有按设备像素比做缩放。我一般会把源码里的 canvas 统一改成type2d方案失真问题会小很多。4.2 绘制 7 天步数折线图的最小代码与坐标换算页面里先放一个 canvasview classchart-card canvas idstepChart type2d classstep-chart/canvas /view对应的样式.step-chart { width: 100%; height: 240rpx; }然后是绘制逻辑。这段代码放在pages/steps/steps.js里数据来自上一章的weekStepsdrawStepChart() { const self this; wx.createSelectorQuery() .in(this) .select(#stepChart) .fields({ node: true, size: true }) .exec((res) { if (!res || !res[0] || !res[0].node) return; const canvas res[0].node; const ctx canvas.getContext(2d); const dpr wx.getSystemInfoSync().pixelRatio; const width res[0].width; const height res[0].height; // 把逻辑像素换算成物理像素避免在 Retina 屏上发虚 canvas.width width * dpr; canvas.height height * dpr; ctx.scale(dpr, dpr); const steps self.data.weekSteps; const safeSteps steps.length ? steps : [0, 0, 0, 0, 0, 0, 0]; const max Math.max.apply(null, safeSteps.concat([8000])); const len safeSteps.length; const gap len 1 ? width / (len - 1) : width; ctx.clearRect(0, 0, width, height); ctx.beginPath(); safeSteps.forEach((step, i) { const x i * gap; const y height - (step / max) * (height - 40) - 10; if (i 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } }); ctx.strokeStyle #07c160; ctx.lineWidth 3; ctx.lineCap round; ctx.stroke(); }); }这段代码的关键点有三个。第一canvas.width width * dpr和ctx.scale(dpr, dpr)必须成对出现否则高分辨率屏幕上折线是糊的。第二max里concat([8000])是为了防止七天步数全是 0 时除数为 0同时让图表在步数很低时也不至于被压到最底部。第三height - 40预留了折线离底部和顶部的间距不让线条直接贴边。如果你要再画坐标轴可以在这个绘制逻辑里继续用ctx.fillText标日期但不要每帧都调用createSelectorQuery性能会很差一般只在数据更新后调用一次。4.3 加载状态、空数据页与分享卡片参数真正可用的步数页面不会在拿到数据前直接画折线。weekSteps为空时页面应该显示“开启微信运动后查看步数趋势”的占位而不是一条贴在底部的直线。可以加一个loaded标记只有loaded true才渲染图表容器否则渲染空态。分享是步数页面提高活跃度的关键。源码 zip 里可能已经写好了onShareAppMessage但没有处理path参数导致别人从分享卡片进来后定位不到具体页面。常见做法是带上来源参数方便在页面里做来源统计onLoad(options) { if (options.from) { wx.setStorageSync(shareFrom, options.from); } // 开启分享到朋友圈菜单 if (wx.showShareMenu) { wx.showShareMenu({ menus: [shareAppMessage, shareTimeline] }); } }, onShareAppMessage() { return { title: 我今天走了 ${this.data.todayStep || 0} 步要不要来比一下, path: /pages/index/index?fromshare, imageUrl: /assets/share-we-run.png }; }, onShareTimeline() { return { title: 我的今日步数${this.data.todayStep || 0} }; }path路由必须保证是app.json里注册过的页面路径。imageUrl只支持本地路径或临时文件路径不支持网络图片也不支持 base64。分享图建议按 5:4 比例准备避免卡片出来后左右被裁。如果你用的是mp-weixin或原生微信小程序分享朋友圈要单独实现onShareTimeline它不支持path和imageUrl所以标题要写完整。字段是否必选说明title是分享标题会展示在卡片主位置path是shareAppMessage用户点开后的落地页imageUrl否分享封面仅支持本地/临时路径建议 5:4onShareTimeline否通过title控制分享朋友圈内容不支持自定义 path5. 微信步数页面源码的发布前验证真机、基础库与压缩包安全5.1 真机调试模拟器里步数拿不到是正常的微信开发者工具的模拟器没有“微信运动”能力wx.getWeRunData在模拟环境里失败是预期行为。要验证授权链路和加密数据用开发者工具顶部的“真机调试”拉起二维码在手机上打开。真机调试和预览的关键区别是真机调试会输出console日志能直接看到 fail 回调里的报错预览只能看到用户界面。实际操作步骤在开发者工具里点“真机调试”选择自动预览手机扫码后先确认页面里的“授权微信运动”按钮是否正常弹出拒绝一次授权再确认“去设置”入口能跳到设置页授权成功后观察 Network 面板里decrypt-werun请求是否返回stepInfoList把todayStep和weekSteps打印到页面或 console。如果真机上提示“微信运动未开启”不要把它当成代码 bug这是测试账号的环境问题。换一个已经启用“微信运动”的微信号再试。5.2 用 unzip -l 检查压缩包内容从网盘、论坛、资源站拿到的 zip解压前先看清单。前文提到的命令在这里仍然有用unzip -l 微信步数的微信小程序页面源码.zip主要看有没有可执行脚本、.env文件、奇怪的index.html、以及作者留下的appid和密钥。微信小程序源码包本身是明文的.js所以不要把appsecret、支付密钥这类内容写进去。只要 zip 里出现.env、config.js里带secret、key的字符串基本可以判断这不是一个适合直接上线的源码。另外解压后如果看到__MACOSX隐藏目录直接忽略或删除即可。PC 和 Mac 解压同一份 zip 可能产生不同的文件属性开发者工具能自动过滤大部分但看到多出来的隐藏文件不用大惊小怪。5.3 提审前最后一遍检查提交微信审核之前按下面这张表过一遍能省掉一两次被打回检查项建议操作授权文案页面按钮文案明确写“授权微信运动”不能只写“立即查看”解密链路确认session_key只存在服务端前端不打印encryptedData和iv域名开发者工具关闭urlCheck后记得在小程序后台配置 request 合法域名app.json确认pages第一个元素是首页navigationBarTitleText已修改隐私协议如果隐私保护指引里涉及用户信息需要在小程序后台补充说明基础库用 zip 里的旧代码时检查是否有wx.getUserInfo等已废弃接口全部换成官方推荐方案最后一步是上传体验版。在开发者工具右上角点“上传”填好版本号和备注再到 mp.weixin.qq.com 提交审核。审核备注里写明“本页面仅读取当前用户的微信运动步数在本地展示并绘制图表”会比空着更容易通过。本文还有配套的精品资源点击获取