微信小程序结合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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
vue 实现上传组件
May 31 Vue.js
详解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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
简单JS代码压缩器
2006/10/12 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
vue实现购物车案例
2020/05/30 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python定义类self用法实例解析
2020/01/22 Python
Python内置类型性能分析过程实例
2020/01/29 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
称象教学反思
2014/02/03 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
环保倡议书怎么写
2014/05/16 职场文书
大专学生求职信
2014/07/04 职场文书
导游词300字
2015/02/13 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
详解Go与PHP的语法对比
2021/05/29 PHP