微信小程序结合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 相关文章推荐
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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中static,const与define的使用区别
2013/06/18 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
php接口技术实例详解
2016/12/07 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
jQuery动态添加
2016/04/07 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
react-router JS 控制路由跳转实例
2017/06/15 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
vue 组件简介
2020/07/31 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python Numpy计算各类距离的方法
2019/07/05 Python
Django REST framework内置路由用法
2019/07/26 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
幼儿园家长会欢迎词
2014/01/09 职场文书
高三地理教学反思
2014/01/11 职场文书
管理提升方案
2014/06/04 职场文书
调解书格式范本
2015/05/20 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电