小程序配合mockjs随机生成数据

控制台打印出来是随机生成的.png

看到打印出来的结果很开心
mock.js官网,没事多查查文档,文档能解决一切.在这里,我用了两种方法

直接引入mock.js
  1. 下载mock.js

2.直接使用Mock.mock根据随机规则语法生成自己的数据

let API_HOST = "http://xxx.com/xxx";
let DEBUG = true;// 切换数据入口
var Mock = require('mock.js') // require是相对路径
function ajax(data = '', fn, method = "get", header = {}) {
  if (!DEBUG) {
    wx.request({
      url: config.API_HOST + data,
      method: method ? method : 'get',
      data: {},
      header: header ? header : { "Content-Type": "application/json" },
      success: function (res) {
        fn(res);
      }
    });
  } else {
    // 模拟数据
    var res = Mock.mock({
      'error_code': '',
      'error_msg': '',
      'data|10': [{
        'id|+1': 1,
        'img': "@image('200x100', '#4A7BF7','#fff','pic')",
        'title': '@ctitle(3,8)',
        'city': "@county(true)",
        'stock_num': '@integer(0,100)',//库存数量  
        'marketing_start': '@datetime()',
        'marketing_stop': '@now()',
        'price': '@integer(100,2000)',//现价,单位:分  
        'original_price': '@integer(100,3000)'
      }]
    })
    // 输出结果
    // console.log(JSON.stringify(res, null, 2))
    fn(res);
  }
}
module.exports = {
  ajax: ajax
}

3.直接使用即可

// photography.js
var app = getApp()
var API = require('../../utils/api.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    API.ajax('',function(res){
       console.log(res);
     })
  }
})

用npm安装,小程序用2.2.1开始支持用npm安装包.但是需要下载beta版开发者工具

1.在创建好的小程序目录下使用npm init初始化一个package.json的文件
2.在使用npm i mockjs --production // 小程序官方文档是说必须用--production,原因如下

image.png

3.打开微信开发工具,选择工具下的构建npm即可
image.png

4.使用的方法与直接引入一模一样,注意require相对路径的地址就好了
参考 微信小程序开发者文档 小程序社区

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容