微信小程序数据mock以及接口封装_mockjs 微信小程序

目录准备

|- api              // 放置mock的数据以及api（与pages对应）
    |- home.js
    |- table.js
|- components       // 放置公用组件
|- image
|- pages
    |- home
    |- table
|- utils
    |- mock.js     // 下载mock-min.js放置
    |- url.js      // 请求地址（线上线下）
1
2
3
4
5
6
7
8
9
10
11

开始(api→home.js文件)

import BASE from './../utils/url.js'
const header = { "Content-Type": "application/json" }
var Mock = require('./../utils/mock.js')
let DEBUG = true  （数据接口切换）
function home(data = '', fn) {
  if(!DEBUG) {
    // 真实接口
    wx.request({
        url: BASE.API_HOST + data,
        method: "get",
        data: {},
        header: header,
        success: function (res) {
            fn(res);
        }
    })
  }else{
    // 模拟数据
    var res = Mock.mock({
      'data|10': [{
          'id|+1': 1,
          'picUrl': "@image('200x100', '#4A7BF7','#168eea')",
          'name': '@ctitle(3,8)',
          'completeNum': "@integer(100,200)",
          'totalNumber': '@integer(0,100)',//库存数量  
          'counterPrice': '@integer(100,200)',
          'retailPrice': '@integer(100,200)',
      }]  
    })
    // 输出结果
    // console.log(JSON.stringify(res))
    fn(res);
  }  
}
module.exports = {
    home: home
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

页面使用

let API = require('./../../api/home.js')
page({
    onload(){
        let that = this
        API.home('', (res) => {
            cosnole.log(res)
        })
    }
})
1
2
3
4
5
6
7
8
9