微信小程序结合mock.js实现后台模拟及调试


Posted in Javascript onMarch 28, 2019

一、创建小程序项目

微信小程序结合mock.js实现后台模拟及调试

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

api.js:配置模拟数据和后台接口数据,通过DEBUG = true;//切换数据入口

let API_HOST = "http://xxx.com/xxx";
let DEBUG = true;//切换数据入口
var Mock = require('mock.js')
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
}

index.js页面

//index.js
//获取应用实例
var app = getApp()
var API = require('../../utils/api.js')
Page({
  data: {
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    // 使用 Mock
    API.ajax('', function (res) {
      //这里既可以获取模拟的res
      console.log(res)
      that.setData({
        list:res.data
      })
    });

    console.log(this.data.list)
  }
})

index.wxml

<!--index.wxml-->
<block wx:for="{{list}}" wx:key="name">
 <view>{{item.title}}</view>
 <text>{{item.city}}</text>
 <view>
  <text>{{item.marketing_start}}</text>
 </view>
 <image src='{{item.img}}'></image>
</block>

页面显示

微信小程序结合mock.js实现后台模拟及调试

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 #Javascript
详解Vue.directive 自定义指令
Mar 27 #Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 #Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 #Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 #Javascript
vue中多个倒计时实现代码实例
Mar 27 #Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 #Javascript
You might like
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
函授毕业自我鉴定
2013/12/19 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
怎样写离婚协议书
2014/09/10 职场文书
合作经营协议书范本
2014/09/16 职场文书
事业单位聘任报告
2015/03/02 职场文书
初一英语教学反思
2016/02/15 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Python开发五子棋小游戏
2022/05/02 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python