微信小程序如何mock数据和接口
时间: 2024-01-02 13:03:14 浏览: 168
微信小程序使用mock.js提供模拟数据,提示输入对话框prompt
微信小程序可以使用mock数据来模拟接口返回的数据,可以在开发工具中直接编辑JSON格式的数据。
同时,也可以使用第三方工具来模拟接口,如Mock.js、EasyMock等。
具体操作步骤如下:
1. 在项目根目录下新建一个mock文件夹,用于存放mock数据。
2. 在mock文件夹中新建一个JSON文件,用于存放接口返回的数据。
3. 在需要模拟接口的页面中引入mock数据。
4. 在页面的请求方法中判断是否使用mock数据,如果使用则直接读取mock数据,否则调用真实接口。
例如:
1. 在项目根目录下新建一个mock文件夹,如下图所示:
![image.png](https://cdn.nlark.com/yuque/0/2021/png/214821/1620642376475-5fc1d113-9a85-4055-b8a5-6c5f5d5a5b5a.png#align=left&display=inline&height=88&margin=%5Bobject%20Object%5D&name=image.png&originHeight=88&originWidth=320&size=6669&status=done&style=none&width=320)
2. 在mock文件夹中新建一个JSON文件,如下图所示:
![image.png](https://cdn.nlark.com/yuque/0/2021/png/214821/1620642424726-b9f9eeba-8c1a-4d72-a1b7-7f041f31c7a2.png#align=left&display=inline&height=250&margin=%5Bobject%20Object%5D&name=image.png&originHeight=250&originWidth=553&size=13243&status=done&style=none&width=553)
3. 在需要模拟接口的页面中引入mock数据,如下图所示:
![image.png](https://cdn.nlark.com/yuque/0/2021/png/214821/1620642464675-0e5cf6a2-2d97-4c83-8a06-6d5b6f9b8ab5.png#align=left&display=inline&height=85&margin=%5Bobject%20Object%5D&name=image.png&originHeight=85&originWidth=320&size=1907&status=done&style=none&width=320)
4. 在页面的请求方法中判断是否使用mock数据,如果使用则直接读取mock数据,否则调用真实接口,如下图所示:
![image.png](https://cdn.nlark.com/yuque/0/2021/png/214821/1620642503917-8a0f1ec1-396e-4f10-987f-2e2e7f8916b1.png#align=left&display=inline&height=139&margin=%5Bobject%20Object%5D&name=image.png&originHeight=139&originWidth=554&size=8557&status=done&style=none&width=554)
阅读全文