小程序：mock数据_原生微信小程序mock使用

前言

普通项目中，我们经常会使用 mockjs 来模拟数据，那么在小程序中怎么做呢。

普通项目

npm install mockjs

// utils/mock.js接受请求
import Mock from 'mockjs'
var article = Mock.mock('http://test.com', function (options) {
  console.log(options)
  return Mock.mock({
    'user|1-3': [{
      'name': '@cname',
      'id|+1': 88
    }
    ]
  })
})
export default article
// {url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// app.js发起请求
import './utils/mock'
$.ajax({
  url: 'http://test.com',
  type: 'post',
  dataType: 'json',
  data: {
    account: 888,
    pwd: 'abc123'
  }
}).done(function (data, status, xhr) {
  console.log(JSON.stringify(data, null, 4))
})
// {
//   "user": [
//     {
//       "name": "于明",
//       "id": 88
//     },
//     {
//       "name": "任静",
//       "id": 89
//     }
//   ]
// }
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

小程序

不可以这样做，因为小程序不是浏览器环境。request 不是 XHR 也不是 ajax。所以我们需要模拟开启一个服务器，用 node + express 来试试。

1. 目录结构

├── pages
├── images
├── server # 前端mock目录
│ ├── MockServer.js
│ ├── package.json

2. 使用

cd server
npm install
node MockServer.js
1
2
3

3. 前端请求代码

const baseUrl = 'http://localhost:8090'
wx.request({
  url:baseUrl + '/index/banner',
  method: 'get',
  data: data,
  success: res => {
    resolve(res)
    wx.hideLoading()
  }
})
1
2
3
4
5
6
7
8
9
10

4. 前端mock代码

// package.json
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "MockServer.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "mockjs": "^1.0.1-beta3"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// MockServer.js
let express = require('express')
let Mock = require('mockjs')
var bodyParser = require('body-parser')

let app = express()

// 配置 body-parser 中间件（插件，专门用来解析表单 POST 请求体）
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

// 所有路由
// index-轮播
app.get('/index/banner', function (req, res) {
  res.json(Mock.mock({
    'code': 200,
    'message': '成功',
    'data|1-2': [
      {
        'icon|+1': ['banner-test-@2x.png', 'banner-cert-@2x.png'],
        'src': 'https://www.baidu.com'
      }
    ]
  }))
})
// score-mall-签到
app.post('/score-mall/sign', function (req, res) {
  if (req.body.sign) {
    res.json(Mock.mock({
      'code': 200,
      'message': '成功',
      'data': {
        // 'isSign': '@boolean'
        'isSign': true
      }
    }))
  }
})
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
38
39
40