网站导航
> 技术文档 > 没接口也能飞！教你用 Mock 玩转小程序请求模拟_微信小程序 mock

没接口也能飞！教你用 Mock 玩转小程序请求模拟_微信小程序 mock

网友: 技术文档 2025-08-08 12:10:01

大家好，我是一叶星殇

你是不是也遇到过这些问题？

❓ 页面写好了，接口没人给？
❓ 测试逻辑、绑定表单，缺数据根本跑不动？
❓ 不会写后端接口，只能眼巴巴等人？

别急——你其实根本不需要后端！
只要你学会使用 Mock 数据，
哪怕你完全不会写接口，
照样能完成整个小程序的页面开发、交互验证和流程模拟！

💡 什么是 Mock？

Mock（模拟）数据，是前端开发中最常用的“自救工具”。
它的作用就是：

不依赖真实后端，直接模拟接口返回数据，让页面可以跑起来！

比如这个接口数据，你完全可以自己写出来：

{  \"code\": 0,  \"message\": \"success\",  \"data\": [    { \"id\": 1, \"name\": \"张三\" },    { \"id\": 2, \"name\": \"李四\" }  ]}

有了它，登录页逻辑、按钮交互、页面跳转、Token 存储通通能测试，根本不用等后端接口。

🧱 但 mock.js 在小程序里“没用”？

很多人用过 mockjs，
它可以在浏览器中拦截 Ajax 请求（XMLHttpRequest、fetch），返回你定义的假数据，前端开发效率直线上升！

但你可能也发现了：

mock.js 在微信小程序中根本无效。

因为小程序的请求不是走 Ajax，而是走 wx.request，mockjs 根本无法拦截！

✅ 自己动手，封装一个 wxmock

为了让 Mock 能在小程序中也用起来，
我们干脆自己封装了一个请求拦截器 —— wxmock.js

它做了三件事：

  1. ✅ 重写 wx.request 方法，在发请求前统一拦截；

  2. ✅ 判断是否命中已注册的 mock 接口；

  3. ✅ 命中则返回模拟数据，否则发真实请求。

是不是很简单？但威力很大！

如果你想省时间、直接体验效果，
可以点击下面链接，下载我整理好的完整示例代码，
省去繁琐配置，一键跑起来。

👉代码片段

https://developers.weixin.qq.com/s/4bIsenmr8B1u

🔨 实战开始：让我们一步步搭建小程序 Mock 环境

接下来，我将手把手教你如何：

✅ 封装 wxmock.js，让小程序支持 Mock；
✅ 注册模拟接口（支持 GET 和 POST）；
✅ 在页面中调用接口，获取假数据进行渲染；
✅ 模拟登录逻辑、异常情况等高级场景。

📂 项目目录结构总览

在正式动手写代码之前，先给大家看看我们项目的整体目录结构，方便理解各个文件的位置和作用：

🛠 第一步：下载 mock.js

https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js

    1. 打开你的小程序项目根目录

    2. 在项目里新建一个 utils 文件夹（如果还没有的话）

    3. 将刚刚下载好的 mock.js 文件放进这个文件夹内

    你的目录结构大致如下：

    📁 your-mini-program/├── pages/├── utils/│   └── mock.js    // mock工具库├── app.js└── ...

    ✅ 我们接下来会在 utils/wxmock.js 中引用这个文件，用它来定义模拟接口和生成假数据。

    🛠 第二步：创建 wxmock.js，拦截所有小程序请求

    📁在 utils/ 目录下，新建一个文件：wxmock.js

    然后写入如下内容：

    var __request = wx.request;var Mock = require(\"./mock.js\");// 允许对 wx.request 重新赋值 Object.defineProperty(wx, \"request\", { writable: true});//重写 wx.request 方法 wx.request = function (config) { let method = (config.method || \'GET\').toLowerCase(); let url = config.url; let mockItem; // 遍历所有通过 Mock.mock(url, method, template) 注册的模拟接口 //匹配当前请求的 URL 和 method for (let key in Mock._mocked) { let item = Mock._mocked[key]; if (item.rurl === url && (item.rtype || \'get\').toLowerCase() === method) { mockItem = item; break; } } //如果找不到匹配的 mock（即用户请求的接口没有定义过模拟数据），就调用原生的 wx.request 发送真实网络请求。 if (!mockItem) { __request(config); // 没命中走原始请求 return; } // 如果是函数模板，调用并传入 config 模拟请求信息 let response = typeof mockItem.template === \'function\' ? mockItem.template({ url: config.url, body: JSON.stringify(config.data) }) : Mock.mock(mockItem.template); if (typeof config.success === \"function\") { config.success(response); } if (typeof config.complete === \"function\") { config.complete(response); }};module.exports = Mock;

    📦 第三步：注册模拟接口（支持 GET 和 POST）

    在项目根目录下新建一个 mock 文件夹，
    在 mock 文件夹内新建 mockDemo.js，写入：

    var Mock = require(\'../utils/WxMock.js\');//get接口Mock.mock(\'https://myDemoMock/GetUser\', { // 静态对象返回 \"origin\": function () { return { a: \'a\', b: \'s\' }; }, // 返回字符串 \"status\": function () { return \"success\"; }, //返回3条，不同数据的内容 \"list|3\": [{ id: () => Mock.Random.id(), name: () => Mock.Random.cname(), age: () => Mock.Random.integer(20, 40) }],});//post接口Mock.mock(\'https://myDemoMock/login\', \'post\', (options) => { const body = JSON.parse(options.body) // 前端发过来的请求体 if (body.username === \'admin\' && body.password === \'123456\') { return { code: 0, message: \'登录成功\', token: \'abcdefg1234567\' } } else { return { code: 1, message: \'用户名或密码错误\' } }});

    ⚠️ 温馨提示：
    别忘了在 app.js 里引入模拟接口注册文件，这样封装的 wxmock 拦截器才能生效。

    // app.jsrequire(\'/mock/mockDemo.js\');

    🎬 接下来就是重头戏了！

    我们已经准备好了拦截器和模拟接口注册文件，
    接下来正式在小程序页面里调用这些接口，
    看看如何轻松拿到我们自己模拟的数据！

    🖱️ 页面示例：两个按钮分别演示 GET 和 POST 请求

    在页面 JS 中写：

    wxml代码就不贴了，直接上js

     PostHandler() { wx.request({ url: \'https://myDemoMock/login\', method: \'POST\', data:{ username:\'admin\', password:\'12345\' }, success: function (res) { console.log(res); } }) }, GetHandler() { const that = this wx.request({ url: \'https://myDemoMock/GetUser\', success: function (res) { that.setData({ list: res.list }); } }) }

    👀 运行小程序，查看 Mock 结果

    1. 点击“获取用户列表（GET）”按钮，查看控制台打印的返回数据；

    2. 点击“登录（POST）”按钮，查看控制台返回的登录结果。

    如果一切配置正确，你会看到：

    • GET 请求返回的是你在 mockDemo.js 里定义的用户数组；

    • POST 请求根据你传的用户名密码，返回“登录成功”或“用户名或密码错误”的模拟结果。

    🛠 调试小技巧

    • 如果控制台没有输出数据，确认你是否在 app.js 中引入了 mockDemo.js；

    • 确认 wxmock.js 拦截器是否正确加载，且路径无误；

    • 用断点或 console.log 打印 wx.request，确认请求是否被拦截；

    • 注意请求的 URL 和请求方法（GET/POST）是否与你注册的 mock 接口完全一致。

    🎉 总结

    通过重写 wx.request，我们成功实现了接口请求的拦截；
    借助 mockjs 生成了丰富且灵活的模拟数据，大幅方便了开发调试；
    从此，小程序前端开发再也不受后端接口进度限制，开发效率显著提升！

    Mock 不仅是前端开发者的必备利器，
    更是在微信小程序开发中，解决接口依赖难题的利剑。
    通过本文介绍的方法，人人都能轻松搭建属于自己的 Mock 环境，
    让开发过程更加顺畅、高效，充满乐趣！

    如果你有不会的地方，或者遇到问题，欢迎大家在评论区留言交流，
    我们一起探讨、一起进步！

    网络标签：

    相关问题