当前位置:   article > 正文

微信小程序使用mock.js_微信小程序mock.js

微信小程序mock.js

1、在utils中创建api.js和mock.js

2、在mock.js中复制mock.js中的代码,下边是地址

https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 

3、在api.js中写入以下代码

  1. let API_HOST = "http://xxx.com/xxx";
  2. let DEBUG = true;//切换数据入口
  3. var Mock = require('mock.js')
  4. // data是接口
  5. function ajax(data = '', fn, method = "get", header = {}) {
  6. if (!DEBUG) {
  7. wx.request({
  8. url: API_HOST + data,
  9. method: method ? method : 'get',
  10. data: {},
  11. header: header ? header : { "Content-Type": "application/json" },
  12. success: function (res) {
  13. fn(res);
  14. }
  15. });
  16. } else {
  17. // 模拟数据
  18. var res = Mock.mock({
  19. 'error_code': '',
  20. 'error_msg': '',
  21. 'data|10': [{
  22. 'id|+1': 1,
  23. 'img': "@image('200x100', '#4A7BF7','#fff','pic')",
  24. 'title': '@ctitle(3,8)',
  25. 'city': "@county(true)",
  26. 'stock_num': '@integer(0,100)',//库存数量
  27. 'marketing_start': '@datetime()',
  28. 'marketing_stop': '@now()',
  29. 'price': '@integer(100,2000)',//现价,单位:分
  30. 'original_price': '@integer(100,3000)'
  31. }]
  32. })
  33. // 输出结果
  34. // console.log(JSON.stringify(res, null, 2))
  35. fn(res);
  36. }
  37. }
  38. module.exports = {
  39. ajax: ajax
  40. }

4、引入(我在index.js中引入的)

  1. var API = require('../../utils/api.js')
  2. page({
  3. data:{
  4. list:[]
  5. },
  6. onLoad() {
  7. var that = this
  8. // 使用 Mock
  9. API.ajax('', function (res) {
  10. //这里既可以获取模拟的res
  11. console.log(res)
  12. that.setData({
  13. list:res.data
  14. })
  15. });
  16. console.log(this.data.list)
  17. },
  18. })

5、在index.wxml中直接for循环list

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
  

闽ICP备14008679号