美文网首页web前端
小程序配合mockjs随机生成数据

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

作者: 南蓝NL | 来源:发表于2018-08-21 11:40 被阅读11次
控制台打印出来是随机生成的.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相对路径的地址就好了
参考 微信小程序开发者文档 小程序社区

相关文章

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

    直接引入mock.js 下载mock.js 2.直接使用Mock.mock根据随机规则语法生成自己的数据 3.直接...

  • 在项目中使用mockjs

    一、了解mockjs 前言:mockjs是什么 生成随机数据,拦截 Ajax 请求。 通过随机数据,模拟各种场景;...

  • 小程序中使用Mock数据

    介绍 Mock.js生成随机数据,拦截 Ajax 请求 前端使用mockjs后,对后端接口进行请求时,mockjs...

  • Vue中使用mockjs

    介绍 Mock.js生成随机数据,拦截 Ajax 请求 前端使用mockjs后,对后端接口进行请求时,mockjs...

  • mockjs 随机生成数据

    npm install mockjs

  • 用mockjs来模拟后端数据

    1.什么是mockjs 前端编写代码的时候,可以用mockjs来生成随机数据,拦截 Ajax 请求。 官网 2.使...

  • mockjs使用,生成随机数据和拦截请求

    mockjs可以生成数据,还可以拦截请求。 一、生成随机数据 准备vue-cli脚手架 安装 目录结构,在src目...

  • element七 mock.js axios

    Mock.js作用:生成随机数据,拦截ajax请求安装:cnpm install mockjs核心:Mock.mo...

  • Mockjs ( 模拟数据 ) 快速入门

    mockjs 根据规则生成随机数据, 通过拦截ajax 请求实现 模拟前端数据接口 安装 主要模块 mock根据数...

  • mockjs

    是什么 MockJs 很好的解决了以下这些问题: 前端可以随机的生成静态模拟数据 尽可能还原真实的数据模型 拥有了...

网友评论

  • shawbs:不能使用Mock.mock( rurl, rtype, function( options ) )??

本文标题:小程序配合mockjs随机生成数据

本文链接:https://www.haomeiwen.com/subject/lkmdiftx.html