小程序mock数据的方法

最新推荐文章于 2026-03-12 14:38:34 发布

原创最新推荐文章于 2026-03-12 14:38:34 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #json #前端

收录于

在前后端同时开发时，若后端接口未完成，前端可以通过Mock假数据进行模拟开发。方法包括：1)直接在JS中声明变量并赋值；2)读取本地或网络JSON文件；3)使用工具如Postman或Apifox模拟接口。这样能确保前端工作不因后端进度而阻滞。

前后端同时开发的时候，后端接口数据没有出来，前端可以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模拟接口