小程序mock数据的方法

前后端同时开发的时候,后端接口数据没有出来,前端可以mock假数据,模拟开发;

第一种

在js里直接声明变量,并给变量赋值,在逻辑脚本中使用,并渲染到dom;

第二种

将模拟数据编辑成json数据或者是零碎的js脚本中,通过请求,取回数据,并进行业务逻辑处理,渲染到dom,json格式也有本地格式和网路格式两种

1.本地文件读取

Page({
 
  /**
   * 页面的初始数据
   */
  data: {},
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this
  const data = require("../../Json/commodityList.json")
  console.log(data)
  }
})

2.读取网络json文件

Page({
 
  /**
   * 页面的初始数据
   */
  data: {},
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this
    wx.request({
      url: 'https://www.aa.com/myproject/test/new_file2.json',//json数据地址
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
           console.log(res)
      }
    })
  }
})

第三种

使用工具postman或者apifox模拟接口

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序可以使用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)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值